JavaScript面试题知识点总结

以下是JavaScript常见面试题及解析的整理，帮助您系统准备相关知识点：

1. 闭包（Closure）

问题：什么是闭包？举例说明其用途。
答案：
闭包是能够访问其他函数作用域变量的函数。它使得函数外部可以访问内部变量，常用于封装私有变量或延长变量生命周期。
示例：

function createCounter() {
  let count = 0;
  return () => count++;
}
const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1

2. 原型链（Prototype Chain）

问题：解释JavaScript中的原型链。
答案：
每个对象都有一个原型对象，通过__proto__属性连接，形成链式结构。访问属性时，若对象自身不存在，则沿原型链向上查找，直到null。
示例：

function Person(name) { this.name = name; }
Person.prototype.sayHi = function() { console.log(`Hi, ${this.name}`); };
const p = new Person('Alice');
p.sayHi(); // 调用原型方法

3. 箭头函数 vs 普通函数

问题：箭头函数和普通函数有什么区别？
答案：

• this绑定：箭头函数无自身this，继承外层上下文。
• 构造函数：不可用new调用，无prototype属性。
• arguments：箭头函数使用外部arguments或通过剩余参数（...args）获取。

4. 事件循环（Event Loop）

问题：宏任务和微任务的执行顺序是怎样的？
答案：

• 宏任务：setTimeout、setInterval、I/O。
• 微任务：Promise.then、MutationObserver。

执行顺序：每轮循环先清空微任务队列，再执行一个宏任务。
示例：

console.log('start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise'));
console.log('end');
// 输出顺序：start → end → promise → timeout

5. 继承与Class

问题：ES6的class如何实现继承？
答案：
class通过extends和super实现继承，本质是原型链的语法糖。
示例：

class Animal {
  constructor(name) { this.name = name; }
  speak() { console.log(`${this.name} makes noise`); }
}
class Dog extends Animal {
  speak() { console.log(`${this.name} barks`); }
}
const dog = new Dog('Rex');
dog.speak(); // Rex barks

6. this的绑定规则

答案：

• 默认绑定：函数独立调用时，this指向全局（严格模式为undefined）。
• 隐式绑定：作为方法调用时，this指向调用对象。
• 显式绑定：call/apply/bind指定this。
• new绑定：构造函数中this指向新实例。
• 箭头函数：继承外层this。

7. 异步编程：Promise与async/await

问题：如何用Promise解决回调地狱？
答案：
Promise通过链式调用（.then()）管理异步流程，async/await进一步简化代码：

fetchData()
  .then(data => process(data))
  .catch(err => console.error(err));

// async/await
async function handleData() {
  try {
    const data = await fetchData();
    process(data);
  } catch (err) {
    console.error(err);
  }
}

8. 跨域解决方案

问题：如何解决跨域问题？
答案：

• CORS：服务器设置Access-Control-Allow-Origin头。
• JSONP：动态创建<script>标签，通过回调函数获取数据。
• 代理服务器：后端转发请求绕过同源限制。

9. 深拷贝实现

答案：
递归拷贝对象，处理循环引用（使用WeakMap）：

function deepClone(obj, map = new WeakMap()) {
  if (typeof obj !== 'object' || obj === null) return obj;
  if (map.has(obj)) return map.get(obj);
  const clone = Array.isArray(obj) ? [] : {};
  map.set(obj, clone);
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key], map);
    }
  }
  return clone;
}

10. 防抖（Debounce）与节流（Throttle）

答案：

• 防抖：事件停止触发后执行。

  function debounce(fn, delay) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
  }
  

• 节流：固定时间间隔执行一次。

  function throttle(fn, delay) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= delay) {
      fn.apply(this, args);
      last = now;
    }
  };
  }
  

其他高频考点

• 数据类型：基本类型（string、number等）与引用类型区别。
• 事件委托：利用冒泡机制，父元素代理子元素事件。
• 模块化：ES6模块（import/export）与CommonJS差异。
• Web安全：XSS（输入过滤）、CSRF（Token验证）。

通过理解以上核心概念，结合实际代码示例，可系统掌握JavaScript面试要点。建议结合手写代码实践（如实现Promise、bind等）加深理解。