【前端面试系列】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 优化策略

及时清理：在不需要时，手动解除对闭包的引用。
避免过度使用：不是所有场景都需要闭包，评估是否有更简单的替代方案。
使用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. 闭包的优缺点

优点

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

缺点

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

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：如何优化使用闭包的代码以提高性能？

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

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

示例优化：

// 优化前
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;
}

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

一、比较操作符概述

JavaScript中的比较操作符主要分为两类：相等操作符（==）和全等操作符（===）。理解这两者的区别和使用场景对于编写健壮的代码至关重要。

二、相等操作符（`==`）深入解析

相等操作符（==）用于比较两个操作数是否相等，且在比较前会进行类型转换。

2.1 类型转换规则

布尔值转换为数值

console.log(true == 1); // true
console.log(false == 0); // true

字符串转换为数值

console.log("55" == 55); // true
console.log("" == 0); // true

对象转换为原始值

let obj = { valueOf: function() { return 1; } };
console.log(obj == 1); // true

null 与 undefined

console.log(null == undefined); // true

NaN 比较
```
console.log(NaN == NaN); // false
```

对象引用比较

let obj1 = { name: "John" };
let obj2 = { name: "John" };
console.log(obj1 == obj2); // false

2.2 相等操作符的特殊情况

console.log('' == '0');         // false
console.log(0 == '');           // true
console.log(0 == '0');          // true
console.log(false == 'false');  // false
console.log(false == '0');      // true
console.log(false == undefined);// false
console.log(false == null);     // false
console.log(null == undefined); // true
console.log(' \t\r\n' == 0);    // true

三、全等操作符（`===`）详解

全等操作符（===）用于严格比较两个操作数，仅当类型和值都相同时才返回 true。

3.1 全等比较示例

console.log("55" === 55);   // false
console.log(55 === 55);     // true
console.log(null === null); // true
console.log(undefined === undefined); // true

四、相等与全等操作符的对比

4.1 主要区别

类型转换：== 在比较前进行类型转换，=== 不会。

null 和 undefined 的处理：

console.log(null == undefined);  // true
console.log(null === undefined); // false

4.2 使用建议

除非在比较对象属性为null或undefined时，一般建议使用全等操作符（===），以避免意外的类型转换导致的错误。

const obj = {};
if (obj.x == null) {console.log("属性 x 不存在或为 null");
}
// 等同于但更冗长的写法
if (obj.x === null || obj.x === undefined) {console.log("属性 x 不存在或为 null");
}

五、面试题精选

Q: 请解释 == 和 === 的区别，并给出一个例子说明何时使用 == 可能更合适。

A: == 在比较前进行类型转换，而 === 不会。使用 == 比较 null 和 undefined 时可能更合适，例如：
```
function isNullOrUndefined(value) {return value == null;
}
```
这个函数可以同时检查 null 和 undefined，而使用 === 则需要两次比较。
Q: 下面的比较结果是什么，为什么？
```
console.log([] == ![]);
```
A: 结果是 true。解释如下：
1. ![] 首先被计算，结果为 false
2. 比较变成了 [] == false
3. false 被转换为数字 0
4. [] 被转换为原始值，即空字符串 ''
5. '' 被转换为数字 0
6. 最终比较变成 0 == 0，结果为 true

Q: 如何安全地比较两个可能为 NaN 的值？

A: 可以使用 Object.is() 方法：

function safeCompare(a, b) {return Object.is(a, b);
}
console.log(safeCompare(NaN, NaN)); // true

Q: 在什么情况下 a !== a 会返回 true？

A: 当 a 是 NaN 时。NaN 是JavaScript中唯一不等于自身的值。
Q: 如何在不使用 === 操作符的情况下实现严格相等比较？

A: 可以使用 Object.is() 方法：
```
function strictEqual(a, b) {return Object.is(a, b);
}
```
注意，Object.is() 与 === 略有不同，它认为 NaN 等于 NaN，且 -0 不等于 +0。