闭包

问题：函数执行完后，局部变量被销毁，无法继续访问

没有闭包：定时器回调、事件处理等场景无法访问已销毁的变量

解决：内部函数引用外部变量，延长变量生命周期

有闭包：变量被内部函数"抓住"，GC 判定可达，不回收

┌───────────────────────────────────────┐
│    外部函数执行完毕                      │  ← 局部变量本该被 GC 回收
└─────────────────┬─────────────────────┘
                  │ 内部函数引用了外部变量
                  ▼
┌───────────────────────────────────────┐
│    变量被"抓住"，GC 判定可达             │  ← 延长生命周期
└─────────────────┬─────────────────────┘
                  │ 内部函数被返回给外部
                  ▼
┌───────────────────────────────────────┐
│    外部通过内部函数访问"私有"变量         │  ← 数据私有化
└───────────────────────────────────────┘

// 闭包的经典模式：数据私有化
function createCounter() {
  let count = 0; // 外部无法直接访问
  return {
    increment() {
      return ++count;
    },
    getCount() {
      return count;
    },
  };
}
const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.getCount(); // 2
// count 变量被闭包"抓住"，外部无法直接修改

// var：所有闭包共享同一个 i
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：3, 3, 3

// let：每次迭代创建新的词法环境
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// 输出：0, 1, 2

// IIFE 方案（ES5）
for (var i = 0; i < 3; i++) {
  (function (j) {
    setTimeout(() => console.log(j), 100);
  })(i);
}
// 输出：0, 1, 2

// 等价于 let 方案（ES6）
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}

// 现代 V8 的逃逸分析：如果闭包代码里根本没用到 hugeData，V8 不会把它塞进闭包
function createLeak() {
  const hugeData = new Array(1000000).fill("*"); // 100 万个元素
  return function unused() {
    return "noop";
  }; // hugeData 不在闭包中
}
// V8 编译时发现 unused 没有引用 hugeData，不会把它加入闭包的 Context
// hugeData 会被正常 GC 回收

// 但在 eval 或 with 的复杂场景下，V8 无法静态推断，优化就会失效

// WeakRef 解决闭包缓存问题
const key = "huge-object";
const hugeObject = new Array(1e6).fill("*");
const cache = new Map();
cache.set(key, new WeakRef(hugeObject)); // 弱引用，GC 可以随时回收

// V8 的逃逸分析优化
function createClosure() {
  const small = 1; // 被闭包引用
  const huge = new Array(1e6).fill("*"); // 未被引用
  return function () {
    return small; // huge 不在闭包中
  };
}
// V8 编译时发现返回的函数没有引用 huge，不会把它加入 Context
// huge 会被正常 GC 回收

// WeakRef：弱引用，不阻止 GC
const hugeObject = new Array(1e6).fill("*");
const ref = new WeakRef(hugeObject);
ref.deref(); // 如果对象已被 GC，返回 undefined

// FinalizationRegistry：对象被 GC 后的回调
const registry = new FinalizationRegistry((key) => {
  console.log(`${key} 已被回收`);
});
registry.register(hugeObject, "huge-object");

const obj = {
  name: "张三",
  greet() {
    function inner() {
      console.log(this.name); // undefined（不是 '张三'）
    }
    inner(); // 独立调用，this 指向 window
  },
};

// 解决方案：箭头函数（没有自己的 this，继承外层）
const obj2 = {
  name: "张三",
  greet() {
    setTimeout(() => {
      console.log(this.name); // '张三'（箭头函数继承 greet 的 this）
    }, 100);
  },
};

// 普通函数：this 动态绑定
const obj = {
  name: "张三",
  greet() {
    function inner() {
      console.log(this.name); // undefined（this 指向 window）
    }
    inner();
  },
};

// 箭头函数：this 词法绑定
const obj2 = {
  name: "张三",
  greet() {
    const inner = () => {
      console.log(this.name); // '张三'（继承 greet 的 this）
    };
    inner();
  },
};

function greet() {
  console.log(this.name);
}
const boundGreet = greet.bind({ name: "张三" });
// boundGreet 是一个闭包，捕获了 greet 和 { name: '张三' }
boundGreet(); // '张三'