90%前端面试必问的12个JS核心，搞懂这些直接起飞！

你是不是也遇到过这样的场景？面试官抛出一个闭包问题，你支支吾吾答不上来；团队代码review时，看到同事用的Promise链一脸懵逼；明明功能实现了，性能却总是差那么一点...

别慌！今天我整理了12个JavaScript核心概念，这些都是2024年各大厂面试的高频考点，也是日常开发中真正实用的硬核知识。搞懂它们，不仅能轻松应对面试，更能让你的代码质量提升一个档次！

变量与作用域

先来看个最常见的面试题：

// 经典面试题：猜猜输出什么？
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 输出：3 3 3
  }, 100);
}

为什么会这样？因为var声明的变量存在变量提升，而且没有块级作用域。换成let就正常了：

// 使用let的正确写法
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // 输出：0 1 2
  }, 100);
}

这里涉及到两个关键概念：变量提升和块级作用域。let和const是ES6引入的，它们有块级作用域，不会出现var的那些奇怪问题。

闭包与内存管理

闭包可能是最让人头疼的概念了，但其实理解起来并不难：

// 闭包的实际应用：计数器
function createCounter() {
  let count = 0; // 这个变量被"封闭"在函数内部
  return {
    increment: () => ++count,
    decrement: () => --count,
    getValue: () => count
  };
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2

闭包就是函数能够记住并访问其词法作用域中的变量，即使函数在其作用域外执行。但要注意内存泄漏问题：

// 潜在的内存泄漏
function createHeavyObject() {
  const largeObject = new Array(1000000); // 大对象
  return () => {
    // 即使外部不再需要，largeObject仍然被引用
    console.log('对象还在内存中');
  };
}

原型与继承

JavaScript的继承是基于原型的，这和传统的类继承很不一样：

// 原型链示例
function Animal(name) {
  this.name = name;
}
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a noise.`);
};
function Dog(name) {
  Animal.call(this, name); // 调用父类构造函数
}
// 设置原型链
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.speak = function() {
  console.log(`${this.name} barks.`);
};
const dog = new Dog('Rex');
dog.speak(); // Rex barks.

ES6的class语法让这变得更简单：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}
class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

异步编程演进

从回调地狱到async/await，异步编程经历了很大变化：

// 1. 回调地狱
function oldWay(callback) {
  readFile('file1.txt', (err, data1) => {
    if (err) return callback(err);
    processData(data1, (err, result1) => {
      if (err) return callback(err);
      // 更多嵌套...
    });
  });
}
// 2. Promise链
function promiseWay() {
  return readFilePromise('file1.txt')
    .then(processDataPromise)
    .then(data => {
      // 更清晰的流程
    })
    .catch(error => {
      // 统一错误处理
    });
}
// 3. async/await（推荐）
async function modernWay() {
  try {
    const data = await readFilePromise('file1.txt');
    const result = await processDataPromise(data);
    return result;
  } catch (error) {
    console.error('处理失败:', error);
  }
}

Promise深度解析

Promise是现代JavaScript异步编程的基石：

// 手写一个简易Promise
class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.onFulfilledCallbacks = [];
    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(cb => cb(value));
      }
    };
    executor(resolve);
  }
  then(onFulfilled) {
    return new MyPromise((resolve) => {
      if (this.state === 'fulfilled') {
        const result = onFulfilled(this.value);
        resolve(result);
      } else {
        this.onFulfilledCallbacks.push((value) => {
          const result = onFulfilled(value);
          resolve(result);
        });
      }
    });
  }
}

事件循环机制

这是JavaScript并发模型的核心：

// 理解事件循环的执行顺序
console.log('1. 同步任务开始');
setTimeout(() => {
  console.log('6. 宏任务执行');
}, 0);
Promise.resolve().then(() => {
  console.log('4. 微任务执行');
});
console.log('2. 同步任务继续');
Promise.resolve().then(() => {
  console.log('5. 另一个微任务');
});
console.log('3. 同步任务结束');
// 输出顺序：1 2 3 4 5 6

ES6+新特性实战

现代JavaScript提供了很多好用特性：

// 解构赋值
const user = { name: '小明', age: 25, city: '北京' };
const { name, age } = user;
// 扩展运算符
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
// 可选链操作符
const street = user?.address?.street; // 不会报错
// 空值合并
const displayName = user.nickname ?? '匿名用户'; // 只有null/undefined时使用默认值

函数式编程概念

JavaScript很适合函数式编程风格：

// 高阶函数
const users = [
  { name: '小明', age: 25 },
  { name: '小红', age: 30 },
  { name: '小刚', age: 28 }
];
// 函数组合
const getAdultNames = users
  .filter(user => user.age >= 18)
  .map(user => user.name)
  .sort();
// 柯里化
const multiply = a => b => a * b;
const double = multiply(2);
console.log(double(5)); // 10

模块化系统

从IIFE到ES Modules的演进：

// 现代ES Modules
// math.js
export const add = (a, b) => a + b;
export const PI = 3.14159;
// app.js
import { add, PI } from './math.js';
console.log(add(PI, 2)); // 5.14159
// 动态导入
const loadModule = async () => {
  const module = await import('./math.js');
  console.log(module.add(1, 2));
};

类型系统与TypeScript

虽然JavaScript是动态类型，但类型检查很重要：

// 类型检查工具函数
const typeCheck = {
  isString: value => typeof value === 'string',
  isFunction: value => typeof value === 'function',
  isObject: value => value !== null && typeof value === 'object'
};
// TypeScript带来的类型安全
interface User {
  name: string;
  age: number;
  email?: string;
}
function createUser(user: User): User {
  // TypeScript会在编译时检查类型
  return { ...user };
}

性能优化技巧

写出高性能的JavaScript代码：

// 防抖函数：避免频繁调用
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}
// 使用Web Worker处理密集型任务
const worker = new Worker('heavy-task.js');
worker.postMessage({ data: largeData });
worker.onmessage = (event) => {
  console.log('计算结果:', event.data);
};

现代开发工具链

2024年的前端开发离不开这些工具：

// Vite配置示例
// vite.config.js
export default {
  plugins: [vue(), eslint()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router']
        }
      }
    }
  }
};
// 现代测试工具
import { describe, it, expect } from 'vitest';
describe('工具函数测试', () => {
  it('应该正确计算加法', () => {
    expect(add(1, 2)).toBe(3);
  });
});

这12个核心概念就像JavaScript的基石，理解它们不仅能让你在面试中游刃有余，更能写出更健壮、更易维护的代码。

本文转自 https://juejin.cn/post/7568765712446029878，如有侵权，请联系删除。