一、引言

在学习《深入理解JavaScript系列》（链接：
https://www.wanxiangyundang.top/books/deep-understand-javascript）时，新手常被原型链、闭包、作用域等概念绕晕，甚至资深开发者也会在设计模式或性能优化上遇到瓶颈。本文结合文档核心内容，整理5大高频问题及解决方案，帮你扫清学习障碍，文末附文档章节索引，方便对照学习！

二、基础语法与作用域相关问题

问题1：变量提升如何影响代码执行顺序？

现象：

console.log(a); // 输出undefined而非报错
var a = 10;

文档解析（第12章）：
JS引擎会将变量声明提升至作用域顶部，但赋值操作保留在原地。上述代码等价于：

var a; // 声明提升
console.log(a); // undefined
a = 10; // 赋值保留

避坑建议：养成“先声明再使用”的习惯，避免混淆声明提升与赋值逻辑。

问题2：箭头函数的this为何与普通函数不同？

对比案例：

// 普通函数
const obj = {
  name: "Alice",
  sayHi: function() {
    console.log(this.name); // 输出"Alice"
  }
};
obj.sayHi();

// 箭头函数
const obj2 = {
  name: "Bob",
  sayHi: () => {
    console.log(this.name); // 输出undefined（继承外层this，非obj2）
  }
};
obj2.sayHi();

文档解析（第13章）：
箭头函数没有独立的this，其this指向定义时的外层作用域（通常是全局对象或函数）。普通函数的this取决于调用方式（如obj.method()中this指向obj）。
应用场景：在需要固定this指向的回调函数中（如定时器、数组方法），优先使用箭头函数。

三、原型与面向对象常见误区

问题3：原型链继承的核心机制是什么？

代码示例：

function Animal() { this.type = "animal"; }
Animal.prototype.speak = function() { return "sound"; };

function Dog() { Animal.call(this); this.breed = "husky"; }
Dog.prototype = Object.create(Animal.prototype); // 关键：继承原型
Dog.prototype.constructor = Dog; // 修复构造函数指向

const dog = new Dog();
console.log(dog instanceof Animal); // true（原型链包含Animal.prototype）

文档解析（第5章）：
通过Object.create()创建原型链，使子类实例可访问父类原型方法。需注意重置constructor避免指向错误。
常见错误：直接赋值Dog.prototype = new Animal()会导致父类构造函数被调用，产生多余属性。

问题4：构造函数模式与工厂模式有何区别？

• 构造函数模式适合需要继承的场景（如Dog继承Animal）；
• 工厂模式适合快速生成无继承关系的对象（如配置项生成）。

四、闭包与性能优化问题

问题5：闭包如何导致内存泄漏？

典型场景：

function outer() {
  const largeArray = new Array(100000).fill(1); // 占用大量内存
  return function inner() {
    console.log(largeArray.length); // 闭包引用largeArray，无法被GC回收
  };
}
const fn = outer(); // outer执行完毕后，largeArray因闭包引用仍驻留内存

文档解析（第16章）：
闭包会保留对外部变量的引用，若引用大型对象且长期持有，可能导致内存泄漏。
优化方案：

1. 避免在闭包中引用不必要的变量；
2. 明确不需要闭包时，将其设为null（如fn = null;）。

五、设计模式实战问题

问题6：单例模式为何能保证全局唯一？

实现原理：

const Singleton = (function() {
  let instance;
  function createInstance() {
    return { data: "unique" }; // 单例对象
  }
  return {
    getInstance: () => {
      if (!instance) instance = createInstance();
      return instance; // 首次创建后始终返回同一实例
    }
  };
})();

const a = Singleton.getInstance();
const b = Singleton.getInstance();
console.log(a === b); // true

文档解析（第25章）：
通过立即执行函数（IIFE）创建私有作用域，用变量instance缓存实例，确保多次调用getInstance返回同一对象。
应用场景：全局状态管理（如Vuex中的store、浏览器弹窗管理器）。

问题7：观察者模式如何解耦组件通信？

核心流程：

1. 订阅者向主题注册回调函数；
2. 主题触发事件时，遍历调用所有订阅者的回调。

// 文档第32章案例简化
class Subject {
  constructor() { this.observers = []; }
  subscribe(fn) { this.observers.push(fn); }
  notify(data) { this.observers.forEach(fn => fn(data)); }
}

// 使用：
const subject = new Subject();
subject.subscribe(data => console.log("更新1:", data));
subject.subscribe(data => console.log("更新2:", data));
subject.notify("新数据"); // 同时触发两个回调

优势：组件间无需直接依赖，新增订阅者不影响现有逻辑，符合开闭原则（OCP，文档第7章）。

六、性能与安全问题

问题8：为什么不推荐使用eval()？

风险案例：

const userInput = "恶意代码();";
eval(userInput); // 执行用户输入的任意代码，存在XSS风险

文档警示（第9章）：

• 安全风险：易受代码注入攻击；
• 性能影响：引擎无法优化动态执行的字符串代码；
• 替代方案：用Function构造函数（仅推荐用于明确场景）：const add = new Function("a", "b", "return a + b"); // 安全创建函数

问题9：如何避免内存泄漏？

文档总结的4大场景：

1. 意外全局变量：未声明直接赋值（如a=1），可开启ESLint的no-undef规则检测；
2. DOM引用未释放：移除DOM元素前，先销毁其事件监听器：element.removeEventListener("click", handler); // 避免内存残留
3. 闭包过度使用：及时释放不再需要的闭包引用（如fn = null）；
4. 定时器未清除：组件销毁前调用clearTimeout/clearInterval。

七、文档章节速查与学习建议

高频问题对应章节索引

系统学习路径

1. 基础扫盲：先通读第1-4章（代码质量要点）和第10章（JS核心），建立全局认知；
2. 专题突破：按“原型链（5）→ 闭包（16）→ 设计模式（25-46）”顺序深入，每章配合文档代码调试；
3. 实战检验：用第23-24章（JS与DOM）做项目练手，如实现一个基于观察者模式的todo列表。

八、结语

JavaScript的复杂性源于其灵活的设计，而《深入理解JavaScript系列》正是拆解这种复杂性的利器。从变量提升到设计模式，每个看似晦涩的问题背后，都有清晰的逻辑脉络。建议结合文档中的“代码+图示+原理”三维解析，边学边练，逐步构建属于自己的JS知识体系。

互动话题：你在学习文档时遇到最困惑的问题是什么？欢迎在评论区留言，点赞最高的问题将获得文档对应章节的详细解读！

学习链接：《深入理解JavaScript系列》完整文档：
https://www.wanxiangyundang.top/books/deep-understand-javascript

注：文中代码均可在Chrome控制台运行，建议搭配文档对应章节调试，重点关注控制台输出与内存占用变化。