JavaScript中闭包(Closure)举例深度讲解

// 最简单的闭包示例
function outer() {
  const message = "Hello from outer!"; // 外部变量
  function inner() {
    console.log(message); // inner函数"记住"了message
  }
  
  return inner; // 返回inner函数
}

const myClosure = outer(); 
myClosure(); // "Hello from outer!"

// 伪代码：执行上下文的内部结构
ExecutionContext = {
  // 1. 词法环境 (用于let/const和函数声明)
  LexicalEnvironment: {
    EnvironmentRecord: {}, // 环境记录
    outer: null            // 外部环境引用
  },
  
  // 2. 变量环境 (用于var声明)
  VariableEnvironment: {
    EnvironmentRecord: {},
    outer: null
  },
  
  // 3. this绑定
  ThisBinding: undefined
}

function createLexicalEnvironment() {
  // 示例：词法环境的创建
  function outer(x) {
    let a = 10;
    const b = 20;
    
    function inner(y) {
      let c = 30;
      console.log(a + b + c + x + y); // 访问多个作用域的变量
    }
    
    return inner;
  }
  
  return outer;
}

// 执行过程中的词法环境变化
/*
1. 全局词法环境:
{
  EnvironmentRecord: {
    createLexicalEnvironment: <function>,
    outer: <function>
  },
  outer: null
}

2. outer函数的词法环境:
{
  EnvironmentRecord: {
    x: 参数值,
    a: 10,
    b: 20,
    inner: <function>
  },
  outer: <全局词法环境的引用>
}

3. inner函数的词法环境:
{
  EnvironmentRecord: {
    y: 参数值,
    c: 30
  },
  outer: <outer函数词法环境的引用>
}
*/

// 作用域链查找示例
function demonstrateScopeChain() {
  const globalVar = "全局变量";
  function level1() {
    const level1Var = "第一层变量";
    function level2() {
      const level2Var = "第二层变量";
      function level3() {
        const level3Var = "第三层变量";
        // 变量查找顺序演示
        console.log(level3Var); // 1. 在当前环境找到
        console.log(level2Var); // 2. 向上一层查找
        console.log(level1Var); // 3. 继续向上查找
        console.log(globalVar);  // 4. 查找到全局环境
        // console.log(nonExistent); // 5. 找不到则报错
      }
      return level3;
    }
    return level2;
  }
  return level1;
}

// 调用过程中的作用域链
const fn = demonstrateScopeChain()()();
fn(); // 执行时会沿着作用域链查找变量

function makeCounter() {
  let count = 0; // 外部函数的局部变量
  
  return function() { // 返回的内部函数形成闭包
    count++; // 访问外部函数的变量
    return count;
  };
}

const counter = makeCounter(); // 调用外部函数
console.log(counter()); // 1 - 调用闭包函数
console.log(counter()); // 2 - count 变量被保持
console.log(counter()); // 3

// 步骤 1-2: 全局执行上下文创建，调用makeCounter
function makeCounter() {
  // 步骤 3: 在makeCounter的词法环境中创建count变量
  let count = 0;
  
  // 步骤 4: 创建匿名函数，该函数的[[Environment]]属性
  // 指向makeCounter的词法环境，形成闭包
  return function() {
    // 步骤 9: 通过作用域链找到外部的count变量
    count++;
    return count;
  };
  // 步骤 5-6: makeCounter执行完毕，执行上下文出栈
  // 但count变量因为被闭包引用而不会被垃圾回收
}

// 步骤 7: counter变量保存了闭包函数的引用
const counter = makeCounter();

// 步骤 8-10: 每次调用counter()都会访问保存的count变量
console.log(counter()); // 1

function optimizationExample() {
  let used = "被闭包使用的变量";
  let unused = "未被使用的变量"; // V8会优化掉这个变量
  let alsoUnused = "同样未被使用";
  
  return function() {
    console.log(used); // 只有这个变量会被保留在闭包中
  };
}

const Calculator = (function() {
  let result = 0; // 私有变量
  
  return {
    add: function(x) {
      result += x;
      return this;
    },
    multiply: function(x) {
      result *= x;
      return this;
    },
    getResult: function() {
      return result;
    },
    reset: function() {
      result = 0;
      return this;
    }
  };
})();

// 使用
Calculator.add(5).multiply(2).getResult(); // 10

function createButtonHandler(name) {
  return function(event) {
    console.log(`按钮 ${name} 被点击了`);
    // name变量被闭包保存
  };
}

document.getElementById('btn1').onclick = createButtonHandler('按钮1');
document.getElementById('btn2').onclick = createButtonHandler('按钮2');

// 防抖函数
function debounce(func, delay) {
  let timeoutId; // 被闭包保存的变量
  
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

// 节流函数
function throttle(func, delay) {
  let lastCall = 0;
  
  return function(...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      lastCall = now;
      func.apply(this, args);
    }
  };
}

// 经典错误示例
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出三次 3
  }, 100);
}

// 方案1：使用IIFE创建新的作用域
for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // 输出 0, 1, 2
    }, 100);
  })(i);
}

// 方案2：使用let块级作用域
for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // 输出 0, 1, 2
  }, 100);
}

// 方案3：使用bind
for (var i = 0; i < 3; i++) {
  setTimeout(function(j) {
    console.log(j); // 输出 0, 1, 2
  }.bind(null, i), 100);
}

// 可能导致内存泄漏的代码
function createHandler() {
  const largeData = new Array(1000000).fill('data'); // 大量数据
  
  return function() {
    // 即使不使用largeData，它也会被闭包保留
    console.log('handler called');
  };
}

// 解决方案：显式释放不需要的引用
function createHandler() {
  const largeData = new Array(1000000).fill('data');
  const needed = largeData.slice(0, 10); // 只保留需要的部分
  
  return function() {
    console.log(needed.length);
    // largeData会被垃圾回收
  };
}