闭包的定义
闭包有两个部分组成，一个函数，一个该函数外部作用域（词法环境）的引用。闭包实现内部函数有权访问外部函数的作用域。
创建闭包的常见方式
在一个函数内部创建另一个函数
function foo() {
var msg = "hello world";
return function () {
console.log(msg);
};
}
var bar = foo();
bar();
在匿名函数从 foo() 执行返回后，它的作用域链被初始化为包含了 foo 函数作用域和全局作用域。
通过断点调试，观察刚执行完 foo() 之后，bar 函数的作用域链。
通过下图可以看出，bar 函数包含了 foo 函数作用域和全局作用域，驻留在内存里。
接着往下执行 bar()，观察闭包函数内部可访问的作用域
通过下图可以看出，在执行 bar() 函数内部可以访问的作用域，包含三个，bar 函数局部作用域，foo 函数作用域，全局作用域。
解除对匿名函数的引用，以便释放内存，通过将 bar 设置为 null，等于通知垃圾回收例程将其清除。
bar = null;
闭包的用途
私有变量
var person = function () {
var name = 'default';
return {
getName: function () {
return name;
},
setName: function (newName) {
name = newName;
}
}
}();
函数式编程
function curry(fn) {
const args = []
return function inner(arg) {
if (args.length === fn.length) return fn(...args)
args.push(arg)
return inner
}
}
function add(a, b) {
return a + b
}
const curriedAdd = curry(add)
console.log(curriedAdd(2)(3)())
模块化
let namespace = {};
(function foo(n) {
let numbers = []
function format(n) {
return Math.trunc(n)
}
function tick() {
numbers.push(Math.random() * 100)
}
function toString() {
return numbers.map(format)
}
n.counter = {
tick,
toString
}
}(namespace))
const counter = namespace.counter
counter.tick()
counter.tick()
console.log(counter.toString())
闭包的优缺点
优点：可以避免全局变量的污染。
缺点：由于闭包会携带包含它的函数的作用域，因此会比其他函数占用更多的内存。
闭包常见的面试题
执行以下代码，控制台打印的结果是什么，如何实现每次循环的打印出正确的数字 0 到 5
for (var i = 0; i <= 5; i++) {
setTimeout(function () {
console.log(i);
}, i * 1000);
}
这里的 i 其实是个全局变量，因为 for (var i = 0; i <= 5; i++) {}，等价于 var i; for(i = 0; i <= 5; i++) {}，另外 setTimeout 是异步任务，其中的函数在执行时，全局变量 i 的值已经变成了 6，所以最终的打印结果如下：
6
6
6
6
6
6
实现每次循环的打印出正确的数字 0 到 5 的三种方式
第一种，使用闭包，结合 IIFE （ 立即调用函数表达式）
IIFE （ 立即调用函数表达式），在定义时就会立即执行，格式如下：
(function () {
statements
})();
最终修改后的代码，如下：
for (var i = 0; i <= 5; i++) {
(function (j) {
setTimeout(function () {
console.log(j);
}, i * 1000);
})(i)
}
第二种，使用 let 的块级作用域
ES5 只有全局作用域和函数作用域，ES6 新增了 let 命令声明变量，其申明的变量，只在 let 命令所在的代码块内有效，意味着块级作用域。
块级作用域的出现，实际上使得获得广泛应用的 IIFE （ 立即调用函数表达式）不再必要了。
for (let i = 0; i <= 5; i++) {
setTimeout(function () {
console.log(i);
}, i * 1000);
}
第三种，setTimeout 支持给函数传参
setTimeout 的语法如下，其中，arg1, arg2, ... 作为附加参数，一旦定时器到期，它们会作为参数传递给 function
setTimeout(function[, delay, arg1, arg2, ...]);
修改后的代码，如下
for (var i = 0; i <= 5; i++) {
setTimeout(function (j) {
console.log(j);
}, i * 1000, i);
}
网友评论