JavaScript闭包怎么理解

# JavaScript闭包怎么理解

## 目录
1. [什么是闭包](#什么是闭包)
2. [闭包的形成条件](#闭包的形成条件)
3. [闭包的核心原理](#闭包的核心原理)
4. [闭包的经典示例](#闭包的经典示例)
5. [闭包的实际应用](#闭包的实际应用)
6. [闭包的优缺点](#闭包的优缺点)
7. [闭包与内存管理](#闭包与内存管理)
8. [常见面试题解析](#常见面试题解析)
9. [最佳实践](#最佳实践)
10. [总结](#总结)

## 什么是闭包

闭包（Closure）是JavaScript中一个既强大又容易让人困惑的概念。简单来说，**闭包是指有权访问另一个函数作用域中变量的函数**。换句话说，当一个函数可以记住并访问其所在的词法作用域时，就产生了闭包，即使这个函数是在当前词法作用域之外执行。

### 学术定义
在计算机科学中，闭包是：
- 一个函数和其相关引用环境的组合
- 具有记忆其被创建时的环境的能力
- 可以访问非全局变量，即使在其原始作用域已经不存在后

### JavaScript中的表现
```javascript
function outer() {
  const outerVar = '我在外部函数中';
  
  function inner() {
    console.log(outerVar); // 访问外部函数的变量
  }
  
  return inner;
}

const closureFn = outer();
closureFn(); // 输出："我在外部函数中"

function createCounter() {
  let count = 0;
  
  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    }
  };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2

const obj = {
  name: 'Object',
  getName: function() {
    return function() {
      return this.name; // 注意这里的this
    };
  }
};

console.log(obj.getName()()); // undefined（非严格模式可能是window.name）

function createCounter() {
  let count = 0;
  return function() {
    return ++count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

function Person(name) {
  let _age = 0; // 私有变量
  
  return {
    getName: function() {
      return name;
    },
    getAge: function() {
      return _age;
    },
    setAge: function(age) {
      _age = age;
    }
  };
}

const person = Person('Alice');
person.setAge(25);
console.log(person.getAge()); // 25

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // 输出5个5
  }, 100);
}

// 使用IIFE
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 100);
  })(i);
}

// 使用let（块级作用域）
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

const calculator = (function() {
  let memory = 0;
  
  return {
    add: function(x) {
      memory += x;
      return memory;
    },
    clear: function() {
      memory = 0;
      return memory;
    }
  };
})();

console.log(calculator.add(5)); // 5
console.log(calculator.add(3)); // 8

function curry(fn) {
  const arity = fn.length;
  
  return function curried(...args) {
    if (args.length >= arity) {
      return fn.apply(this, args);
    } else {
      return function(...moreArgs) {
        return curried.apply(this, args.concat(moreArgs));
      };
    }
  };
}

function sum(a, b, c) {
  return a + b + c;
}

const curriedSum = curry(sum);
console.log(curriedSum(1)(2)(3)); // 6

function setupButtons() {
  const buttons = document.querySelectorAll('button');
  
  for (let i = 0; i < buttons.length; i++) {
    (function(index) {
      buttons[index].addEventListener('click', function() {
        console.log(`按钮 ${index} 被点击`);
      });
    })(i);
  }
}

// 不当的DOM引用
function setup() {
  const element = document.getElementById('myElement');
  
  element.onclick = function() {
    console.log(element.id); // 闭包保留了element引用
  };
}

// 解决方案
function properSetup() {
  const element = document.getElementById('myElement');
  const id = element.id; // 提前获取需要的数据
  
  element.onclick = function() {
    console.log(id); // 不再直接引用DOM元素
  };
  
  element = null; // 显式解除引用
}

for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i);
  }, 1);
}

function once(fn) {
  let called = false;
  return function(...args) {
    if (!called) {
      called = true;
      return fn.apply(this, args);
    }
  };
}

const myOnceFn = once(() => console.log('只执行一次'));
myOnceFn(); // 输出
myOnceFn(); // 无输出

add(1)(2)(3)() // 6
add(1,2)(3)() // 6

function add(...args) {
  let sum = args.reduce((a, b) => a + b, 0);
  
  return function inner(...innerArgs) {
    if (innerArgs.length === 0) {
      return sum;
    }
    sum += innerArgs.reduce((a, b) => a + b, 0);
    return inner;
  };
}

// 性能优化示例
function heavyComputation() {
  const bigData = /* 获取大数据 */;
  
  return function() {
    // 优化前：每次都要访问外部变量
    // return process(bigData);
    
    // 优化后：缓存为局部变量
    const cached = bigData;
    return process(cached);
  };
}