一:闭包的概念理解
在 定义 某函数的 词法作用域 以外调用该函数时,该函数依然保留有对其 定义时的词法作用域 的引用。那么这个 引用 就叫做闭包。
闭包的一些特点:
1当函数在定义时的词法作用域以外调用时,闭包使得函数可以继续访问其定义时的词法作用域
2闭包可以阻止内存空间的回收
3只要使用了回调函数,实际上就在使用闭
Tip: 词法作用域是定义在词法阶段的作用域,即是由 编写代码时 函数、变量声明的位置来决定的。也就是说,词法作用域是在 编写代码时 绑定的。(对比this,其是在 代码运行时绑定)
对于这里的在词法作用域以外调用的 以外 可以总结为两种:即时间或空间上的以外。
1. 空间上的以外。
eg1:
function foo() {
var a = 2;
function bar() {
console.log(a);
}
return bar;
}
var baz = foo();
baz();//2 这就是闭包的效果
baz()可以被正常执行。它是在自己定义时的词法作用域以外的地方被执行的。故体现了闭包的特点1。
foo()执行后,通常情况下foo()的整个内部作用域都会被销毁,因为引擎有垃圾回收器来释放不再使用的内存空间。由于foo()的内容看上去不会再被使用,所以很自然地考虑对其进行回收。然而闭包可以阻止该回收的发生。 bar所声明的位置,决定了其拥有对foo内部作用域的引用,这使得该作用域能够一直存活,以供bar()在以后人任何时间进行引用。故体现了闭包的特点2。
当函数在定义时的词法作用域以外调用时,都能观察到闭包:
eg2
var fn;
function foo() {
var a = 2;
function baz() {
console.log(a);
}
fn = baz;//将baz分配给全局变量
}
function bar(fn) {
fn();//这里是在baz定义的作用域之外调用了baz,baz仍然保留有对定义时的作用域foo()的引用,故产生了闭包。
}
bar();//2
无论通过何种手段将函数内部的函数传递到所在词法作用域以外,
它都会持有对原始定义时的词法作用域的引用,
无论在何处执行这个函数都会产生闭包。
这里闭包的一个经典应用就是 模块
2. 时间上的以外
eg1
function wait(message) {
setTimeout( function timer() {
console.log(message);
}, 1000);
}
wait("Hello!");
wait()执行1s以后,timer依然保留有对wait()内部作用域的引用,故产生了闭包。
在 定时器、事件监听器、Ajax请求、跨窗口通信、web workers 或者其它任何异步任务中,只要使用了 回调函数,实际上就是在使用闭包
eg2
for (var i = 1; i <= 5; i++) {
setTimeout(function timer() {
console.log(i);
}, i * 1000);
}
//输出6 6 6 6 6
该代码段会输出 6 6 6 6 6。
这是因为延迟函数的回调会在循环结束后才执行。虽然我们试图期望每次循环在运行时都会给自己捕获一个i的副本,但是根据作用域的工作原理,尽管循环中的五个函数都是在每次循环中分别定义的,但是 它们都被封闭在一个共享的全局作用域中,所以实际上只有一个i。 循环结构让我们误以为背后还有更复杂的机制在起作用,但实际上并没有。
解决方案1:使用闭包
想要得到想要的1 2 3 4 5,必须 针对每个循环增加一个闭包作用域。而IIFE可以办到这一点。所以,可以将上述代码改写成这样
for (var i = 1; i <= 5; i++) {
(function(j) {
setTimeout(function timer() {
console.log(j);
}, j * 1000);
})(i);
}
//输出1 2 3 4 5
或这样:
for (var i = 1; i <= 5; i++) {
(function() {
var j = i; //只要针对每次的循环增加一个作用域,并把i保存在这个作用域即可,无论是通过变量的方式还是通过参数的方式。
setTimeout(function timer() {
console.log(j);
}, j * 1000);
})();
}
//输出1 2 3 4 5
解决方案2:使用es6的let
其实,我们上述的改进是将for循环的每个循环体都封闭为一个独立的作用域,你们ES6的let可以轻易地办到这一点:
for (let i = 1; i <= 5; i++) {
let j = i; //这样就不必再在setTimeout外包装一层作用域了,因为let本身就是声明一个作用域被限制在块级中的本地变量,此处每个循环体就是一个块,j的作用域仅仅在这个块中。
setTimeout(function timer() {
console.log(j);
}, j*1000);
}
//输出1 2 3 4 5
更进一步,因为for循环头部的let上面有一个特殊行为,即变量在循环过程中会被不止声明一次,每次循环都会声明。之后下一次循环会使用上一次循环结束时的值来初始化这个变量。所以其实对于每一次循环,都有一个独立的i存在于这个循环块作用域中:
for (let i = 1; i <= 5; i++) {
setTimeout(function timer() {
console.log(i);
}, i*1000);
}
//输出1 2 3 4 5
解决方案3:使用setTimeout的第三个参数
setTimeout第三个及以后的参数param1, …, paramN: 可选
附加参数,一旦定时器到期,它们会作为参数传递给function 或 执行字符串(setTimeout参数中的code)。
for (var i = 1; i <= 5; i++) {
setTimeout(function (j) {
console.log(j);
}, i*1000,i);
}
二、闭包经典问题
- 问题:如何实现JavaScript代码的模块模式 与 单例模式?
解答:
模块模式:
function CoolModule() {
var something = 'cool';
var another = [1, 2, 3];
function doSomething() {
conosle.log(somthing);
}
function doAnother() {
console.log(another.join('!'));
}
return {
doSomething: doSomething,
doAnother: doAnother
}
}
var foo = CoolModule();
foo.doSomething();//'cool'
foo.doAnother();//'1! 2! 3!'
将模块创建器函数转换成IIFE,即实现了单例模式。
2. 问题: 思考下面的代码段
for(var i=0;i<5;i++){
var btn=document.createElement('button');
btn.appendChild(document.createTextNode('Button'+i));//document.createTextNode(<text>)方法:创建一个带有指定内容的新Text对象(即上述button元素上写的文字)
btn.addEventListener(//为元素添加事件监听器
'click',
function(){
console.log(i);
}
);
document.body.appendChild(btn);
}
a. 点击“Button4”后输出什么?如何使得输出和预期相同
b. 给出一个可以和预期相同的写法。
答案:
a. 输出5,因为形成了闭包,循环结束后,i为5,所有按钮点击都是5
1解决方法:DOM污染法
就是利用button本身自己的属性。这里button本身的text是Buttoni,所以如果直接使用Buttoni就也不存在额外的DOM污染。
如果button上的text没有包含i的信息,则可以给button添加属性,如将button的index设为i:
for(let i=0;i<5;i++) {
const btn=document.createElement('button');
btn.index=i;
btn.addEventListener('click', ()=> {
console.log(btn.index);
});
document.body.appendChild(btn);
}
2闭包法
这是错误的:
for(var i=0;i<5;i++){
var btn=document.createElement('button');
btn.appendChild(document.createTextNode('Button'+i));
btn.addEventListener(
'click',
(function(i){
(function(){
console.log(i);
})();
})(i)
);
document.body.appendChild(btn);
}
这也是错误的:
for(var i=0;i<5;i++){
var btn=document.createElement('button');
btn.appendChild(document.createTextNode('Button'+i));
btn.addEventListener(
'click',
(function(i){
console.log(i);
})(i)
);
document.body.appendChild(btn);
}
这才是正确的:
for(var i=0;i<5;i++){
var btn=document.createElement('button');
btn.appendChild(document.createTextNode('Button'+i));
(function(a){
btn.addEventListener(
'click',
function () {
console.log(a);
}
)
})(i);
document.body.appendChild(btn);
}
其实,闭包法就是在要引用外部变量i的函数外面再包裹一个 用作块级作用域的匿名函数
(function(i){
//某某内部使用了i的函数
})(i);
问题:有如下一段html:
<div class="article-list">
<div class="article">文章</div>
<div class="article">文章</div>
<div class="article">文章</div>
</div>
使用闭包法实现点击第n块article,输出 Article:n。
解答:
使用闭包法有以下几种不同的写法,都可以实现想要的效果
写法1:
const articleLists = Array.from(document.querySelectorAll('.article-list .article'));
articleLists.forEach((elem, index) => {
(function() {
elem.addEventListener('click', function(){
console.log(index);
const labelForListArticle = `Article: ${index+1}`;
console.log('click ', labelForListArticle);
})
})(index);
});
写法2
const articleLists = Array.from(document.querySelectorAll('.article-list .article'));
articleLists.forEach((elem, index) => {
(function(i) {
elem.addEventListener('click', function(){
console.log(i);
const labelForListArticle = `Article: ${i+1}`;
console.log('click ', labelForListArticle);
})
})(index);
});
写法3
const articleLists = Array.from(document.querySelectorAll('.article-list .article'));
articleLists.forEach((elem, index) => {
const labelForListArticle = `Article: ${index+1}`;
(function(label) {
elem.addEventListener('click', function(){
console.log(index);
console.log('click ', label);
})
})(labelForListArticle);
});