JavaScript闭包

1. 闭包的本质

闭包是JavaScript中的一个核心概念，它是一个函数和其词法环境的组合体。这个词法环境由函数声明时所在的作用域中的所有局部变量组成。简单来说，闭包允许一个内部函数访问其外部函数的作用域。

1.1 闭包vs普通函数

特性	闭包	普通函数
访问外部变量	可以访问外部函数作用域	只能访问全局变量和自身局部变量
生命周期	可以延长局部变量的生命周期	函数执行完毕后，局部变量被销毁
内存占用	较高，因为保留了外部作用域	较低
封装性	可以创建私有变量和方法	无法直接创建私有变量和方法

2. 高级应用场景

2.1 函数式编程

闭包在函数式编程中扮演着重要角色，特别是在实现高阶函数、柯里化和组合等技术时。

function multiplyBy(factor) {
  return function(number) {
    return number * factor;
  };
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5));  // 输出: 10
console.log(triple(5));  // 输出: 15

2.2 异步编程模式

闭包在处理异步操作时非常有用，特别是在回调函数和Promise中。

function fetchUserData(userId) {
  return fetch(`https://api.example.com/users/${userId}`)
    .then(response => response.json())
    .then(user => {
      return fetch(`https://api.example.com/posts?userId=${user.id}`)
        .then(response => response.json())
        .then(posts => {
          return { user, posts };  // 闭包捕获了外部的user变量
        });
    });
}

fetchUserData(1).then(({ user, posts }) => {
  console.log(user, posts);
});

2.3 模块模式与私有状态

闭包可以用来创建私有变量和方法，实现信息隐藏和封装。

const Counter = (function() {
  let count = 0;  // 私有变量

  function changeBy(val) {  // 私有方法
    count += val;
  }

  return {
    increment: function() {
      changeBy(1);
    },
    decrement: function() {
      changeBy(-1);
    },
    value: function() {
      return count;
    }
  };
})();

console.log(Counter.value());  // 0
Counter.increment();
Counter.increment();
console.log(Counter.value());  // 2
console.log(Counter.count);  // undefined，无法直接访问私有变量

3. 性能考虑与优化

3.1 内存泄漏风险

闭包可能导致意外的内存泄漏，特别是在处理DOM元素时：

function attachHandler(element) {
  let clickCount = 0;
  element.addEventListener('click', function() {
    console.log(`Clicked ${++clickCount} times`);
  });
}

// 使用
const button = document.createElement('button');
attachHandler(button);
// 之后即使button元素被移除，闭包仍然引用着clickCount，可能导致内存泄漏

3.2 优化策略

1. 及时清理：在不需要时，手动解除对闭包的引用。
2. 避免过度使用：不是所有场景都需要闭包，评估是否有更简单的替代方案。
3. 使用WeakMap：对于需要关联数据到对象但又不想阻止垃圾回收的场景，考虑使用WeakMap。

const cache = new WeakMap();

function computeExpensiveResult(obj) {
  if (cache.has(obj)) {
    return cache.get(obj);
  }
  const result = /* 复杂计算 */;
  cache.set(obj, result);
  return result;
}

4. ES6中的闭包

4.1 块级作用域与let/const

for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i), 1000);
}
// 输出: 0 1 2 3 4

4.2 箭头函数与词法this

function DelayedGreeter(name) {
  this.name = name;
}

DelayedGreeter.prototype.greet = function() {
  setTimeout(() => {
    console.log(`Hello, ${this.name}`);
  }, 1000);
};

const greeter = new DelayedGreeter("World");
greeter.greet();  // 输出: Hello, World

5. 闭包的优缺点

优点

1. 数据隐藏和封装：可以创建私有变量和方法，实现信息隐藏。
2. 状态保持：能够在函数之间保持状态，实现数据持久化。
3. 回调和高阶函数：在异步编程和函数式编程中非常有用。
4. 模块化开发：可以用来创建模块和命名空间，避免全局变量污染。

缺点

1. 内存占用：闭包会保留其外部作用域的引用，可能导致更高的内存使用。
2. 性能影响：由于额外的作用域链查找，可能会对性能造成轻微影响。
3. 内存泄漏风险：如果不正确管理，可能导致意外的内存泄漏。
4. 复杂性：过度使用闭包可能使代码难以理解和维护。

6. 面试题解析

问题1：什么是闭包？如何在JavaScript中创建闭包？

答：闭包是指一个函数及其词法环境的组合。它允许内部函数访问其外部函数的作用域。在JavaScript中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

示例：

function outerFunction(x) {
    let y = 10;
    function innerFunction() {
        console.log(x + y);
    }
    return innerFunction;
}

const closure = outerFunction(5);
closure(); // 输出15

问题2：请举例说明闭包在实际开发中的应用场景

答：闭包在实际开发中有多种应用场景，以下是几个常见的例子：

模块模式

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

counter.increment();
console.log(counter.getCount()); // 1

函数工厂

function multiplyBy(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = multiplyBy(2);
const triple = multiplyBy(3);

console.log(double(5)); // 10
console.log(triple(5)); // 15

异步操作中的数据保持

function fetchData(url) {
    return function(callback) {
        fetch(url)
            .then(response => response.json())
            .then(data => callback(data));
    };
}

const getUserData = fetchData('https://api.example.com/user');
getUserData(data => console.log(data));

问题3：在使用闭包时，有哪些常见的陷阱？如何避免这些问题？

答：使用闭包时的常见陷阱及其解决方案包括：

循环中的闭包问题

问题：

for (var i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// 输出五次5，而不是0,1,2,3,4

解决方案：

for (let i = 0; i < 5; i++) {
    setTimeout(function() {
        console.log(i);
    }, 1000);
}
// 正确输出0,1,2,3,4

this指向问题

问题：

const obj = {
    name: 'MyObject',
    greet: function() {
        setTimeout(function() {
            console.log('Hello, ' + this.name);
        }, 1000);
    }
};
obj.greet(); // 输出 "Hello, undefined"

解决方案：

const obj = {
    name: 'MyObject',
    greet: function() {
        setTimeout(() => {
            console.log('Hello, ' + this.name);
        }, 1000);
    }
};
obj.greet(); // 输出 "Hello, MyObject"

内存泄漏

不正确的DOM引用可能导致内存泄漏。解决方案是确保在不需要时解除对DOM元素的引用，或使用弱引用（WeakMap/WeakSet）。

问题4：如何优化使用闭包的代码以提高性能？

答：优化使用闭包的代码可以从以下几个方面入手：

1. 最小化闭包范围：只捕获必要的变量，减少内存占用。
2. 及时清理：当闭包不再需要时，将其设置为null以便垃圾回收。
3. 避免在循环中创建函数：如果可能，将函数创建移到循环外部。
4. 使用立即执行函数表达式（IIFE）：来限制闭包的作用范围。
5. 权衡使用：评估是否真的需要闭包，有时普通函数或其他模式可能更合适。

示例优化：

// 优化前
function createFunctions() {
    var result = [];
    for (var i = 0; i < 1000; i++) {
        result.push(function() { return i; });
    }
    return result;
}

// 优化后
function createFunctions() {
    var result = [];
    for (var i = 0; i < 1000; i++) {
        result.push((function(num) {
            return function() { return num; };
        })(i));
    }
    return result;
}

通过这些问题和答案，我们可以更好地理解闭包的概念、应用场景、潜在问题及其解决方案。在实际开发和面试中，掌握这些知识点将有助于更好地运用闭包，同时避免常见的陷阱。