javascript面试全攻略

箭头函数核心特性

箭头函数是 javascript面试 中的高频考点，其核心特性包括：没有自己的 this（继承外层作用域的 this）、不能作为构造函数（无 prototype）、不能用 call/apply/bind 改变 this、不支持 arguments 对象（需用剩余参数替代）。

// 箭头函数 this 继承外层
function Person() {
  this.age = 0;
  setInterval(() => {
    this.age++; // ✅ this 指向 Person 实例
  }, 1000);
}
// 箭头函数无 prototype
// const fn = () => {};
// fn.prototype; // undefined
// 箭头函数不能用 new
// const fn = () => {};
// new fn(); // TypeError

面试中常考箭头函数与普通函数在 this 指向上的差异，以及何时应该使用箭头函数（如回调函数、事件处理中保持 this 一致性）。

Promise 链式调用与静态方法

Promise 是 javascript面试 中异步编程的核心考点。需要掌握 Promise 的三种状态（pending、fulfilled、rejected）、链式调用中 then 的返回值传递、以及 Promise.all / Promise.race / Promise.allSettled / Promise.any 四个静态方法的适用场景差异。

// Promise.all - 全部成功才成功
Promise.all([promise1, promise2]).then(results => {
  // results = [result1, result2]
}).catch(err => {
  // 任意一个失败即进入 catch
});
// Promise.race - 竞速模式
Promise.race([promise1, promise2]).then(first => {
  // 哪个先 resolve 就返回哪个
});
// Promise.allSettled - 全部完成（ES2020）
Promise.allSettled([promise1, promise2]).then(results => {
  // results = [
  //   { status: 'fulfilled', value: ... },
  //   { status: 'rejected', reason: ... }
  // ]
});

手写 Promise 实现也是 javascript面试 中的经典题目，需要理解状态机、微任务调度、链式调用中 then 的返回值处理等核心逻辑。

async/await 与错误处理

async/await 是 ES2017 引入的语法糖，让异步代码看起来像同步代码，极大提升了可读性。在 javascript面试 中，面试官常考察 async/await 与 Promise 的等价关系、try-catch 错误处理机制、以及并行请求的优化写法。

// 串行请求
async function fetchUserOrders() {
  try {
    const user = await fetchUser();
    const orders = await fetchOrders(user.id);
    return orders;
  } catch (error) {
    console.error('请求失败:', error);
  }
}
// 并行请求（性能更优）
async function fetchUserAndOrders() {
  try {
    const [user, orders] = await Promise.all([
      fetchUser(),
      fetchOrders()
    ]);
    return { user, orders };
  } catch (error) {
    console.error('请求失败:', error);
  }
}

ES6 Class 与原型继承

ES6 的 class 语法本质上是原型继承的语法糖。在 javascript面试 中，需要理解 class 的继承机制、super 关键字的用法、静态方法、私有字段（# 前缀）等特性，以及 class 与构造函数+原型链方式的等价关系。

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} makes a noise.`;
  }
  static create(name) {
    return new Animal(name);
  }
}
class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类构造函数
    this.breed = breed;
  }
  speak() {
    return `${this.name} barks.`;
  }
}
const dog = Dog.create('Rex'); // 静态方法
console.log(dog.speak()); // "Rex barks."

Proxy / Reflect / Symbol 等高级特性

Proxy 和 Reflect 是 ES6 中较为高级的特性，常用于实现响应式系统（如 Vue 3 的 reactivity）、数据验证、日志追踪等。Symbol 用于创建唯一标识符。在 javascript面试 中，这些知识点通常出现在中高级前端岗位的面试中。

// Proxy 基本用法
const handler = {
  get(target, prop) {
    console.log(`获取属性: ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`设置属性: {value}`);
    target[prop] = value;
    return true;
  }
};
const proxy = new Proxy({}, handler);
proxy.name = 'test'; // 输出: 设置属性: name = test
console.log(proxy.name); // 输出: 获取属性: name
// Reflect 与 Proxy 配合
const obj = { name: 'test' };
const proxy = new Proxy(obj, {
  get(target, prop) {
    return Reflect.get(target, prop);
  },
  set(target, prop, value) {
    return Reflect.set(target, prop, value);
  }
});

Proxy 是 Vue 3 响应式系统的核心实现基础，了解 Proxy 与 Object.defineProperty 的区别（Proxy 可以监听数组变化、新增属性等）是面试加分项。

Vue Router 与 Vuex / Pinia

Vue Router 的 hash 模式与 history 模式原理、路由守卫（beforeEach、beforeEnter、beforeRouteEnter）、嵌套路由、动态路由是 javascript面试 中 Vue 方向的高频考点。状态管理方面，Vuex 的 state/getters/mutations/actions/modules 机制，以及 Pinia 相比 Vuex 的优势（更简洁的 API、更好的 TS 支持）都需要掌握。

React 组件生命周期与 Hooks

React 16.8 引入 Hooks 后，函数组件成为主流。面试中需要掌握 useState、useEffect、useContext、useReducer、useMemo、useCallback 等常用 Hooks 的原理与使用场景，以及自定义 Hooks 的编写方法。同时需要理解函数组件与 class 组件生命周期的对应关系。

function Counter() {
  const [count, setCount] = useState(0);
  // useEffect 模拟 componentDidMount + componentDidUpdate
  useEffect(() => {
    document.title = `Count: ${count}`;
    // 清理函数模拟 componentWillUnmount
    return () => {
      console.log('清理副作用');
    };
  }, [count]); // 依赖数组
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

React 性能优化与虚拟 DOM

React 的虚拟 DOM diff 算法、key 的作用、React.memo、useMemo、useCallback 的性能优化手段是 javascript面试 中的重点。需要理解 React 的调和（Reconciliation）过程，以及为什么 key 对列表渲染性能至关重要。