JavaScript中常见的闭包陷阱及解决方案

闭包是JavaScript中一个强大但容易误用的特性。以下是常见的闭包陷阱及其解决方案：

1. 循环中的闭包陷阱

问题：在循环中使用闭包时，变量会被共享。

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

解决方案：

使用IIFE(立即执行函数表达式)创建新的作用域
使用let声明变量(ES6+)

// 方案1: IIFE
for (var i = 0; i < 5; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j);
    }, 100);
  })(i);
}

// 方案2: let
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

2. 内存泄漏

问题：闭包会保持对外部变量的引用，可能导致内存无法释放。

function createHeavyObject() {
  const largeArray = new Array(1000000).fill('data');
  return function() {
    console.log(largeArray.length); // 保持对largeArray的引用
  };
}

解决方案：

明确解除不再需要的引用
使用WeakMap或WeakSet存储大对象

function createSafeClosure() {
  const largeArray = new Array(1000000).fill('data');
  const length = largeArray.length; // 只保存需要的数据

  return function() {
    console.log(length); // 不再引用largeArray
  };
}

3. this绑定问题

问题：闭包中的this可能不是预期的对象。

const obj = {
  name: 'Object',
  getName: function() {
    return function() {
      return this.name; // this指向全局或undefined(严格模式)
    };
  }
};

解决方案：

使用箭头函数
保存this引用
使用bind

// 方案1: 箭头函数
const obj = {
  name: 'Object',
  getName: function() {
    return () => this.name; // 箭头函数继承this
  }
};

// 方案2: 保存this
const obj = {
  name: 'Object',
  getName: function() {
    const self = this;
    return function() {
      return self.name;
    };
  }
};

4. 意外的变量共享

问题：多个闭包共享同一个变量可能导致意外行为。

function createCounters() {
  let count = 0;
  return {
    increment: function() { count++; },
    getCount: function() { return count; }
  };
}

const counter1 = createCounters();
const counter2 = createCounters(); // 两个计数器共享同一个count

解决方案：

为每个实例创建独立的作用域

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

const counter1 = createCounter();
const counter2 = createCounter(); // 现在有独立的count

5. 性能问题

问题：过度使用闭包可能导致性能下降，因为每次创建函数都会创建新的作用域链。

解决方案：

避免在频繁调用的函数中创建闭包
将常用函数移到外部

// 不好的做法
function processItems(items) {
  items.forEach(function(item) {
    const helper = function() { /* ... */ }; // 每次迭代都创建新函数
    helper();
  });
}

// 改进做法
function helper() { /* ... */ } // 移到外部

function processItems(items) {
  items.forEach(function(item) {
    helper();
  });
}