闭包深度理解

Posted bonnie3449

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了闭包深度理解相关的知识,希望对你有一定的参考价值。

一、闭包的概念理解

定义 某函数的 词法作用域 以外调用该函数时,该函数依然保留有对其 定义时的词法作用域 的引用。那么这个 引用 就叫做闭包。

闭包的一些特点:

  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 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

其实,我们上述的改进是将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

二、闭包经典问题

1. 问题:如何实现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!‘

该模式被称为 模块模式。 CoolModule是一个函数,必须通过调用它来创建一个模块实例,然后就可以暴露出doSomething和doAnother方法。

doSomething和doAnother函数具有 涵盖模块实例内部作用域的闭包

这里CoolModule函数可以被叫做是模块创建器,可以 被调用任意多次,每次调用都会创建一个新的模块实例当只需要一个实例时,可以使用一种单例模式

单例模式:

    var foo = (function() {
        var something = ‘cool‘;
        var another = [1,2,3];

        function doSomething() {
            console.log( something );
        }

        function doAnother() {
            console.log( another.join(‘!‘));
        }

        return {
            doSomething: doSomething,
            doAnother: doAnother
        }
    })();

将模块创建器函数转换成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

b. 有两种思路可以解决该问题:

(1) 循环比较法(不推荐)

for(var i=0;i<5;i++){
        var btn=document.createElement(‘button‘);
        btn.appendChild(document.createTextNode(‘Button‘+i));
        btn.addEventListener(
            ‘click‘,
                function(e){
                    for(var i=0;i<5;i++){
                        if (e.target.innerhtml==‘Button‘+i) {
                                console.log(i);
                        }
                    }
                }
        );
        document.body.appendChild(btn);//document.A.appendChild(B)方法:将B元素添加为A的子元素
}

(2)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);

3. 问题:实现一段脚本,使得点击对应链接alert出相应的编号

解答:

(1) DOM污染法

通过给document元素对象添加了属性值,故污染了DOM

var lis = document.links;// 属于DOM Document对象,非Dom Element对象,返回文档里具备href属性的a和area元素的对象。
for(var i = 0, length = lis.length; i < length; i++) {
    lis[i].index = i;//此index为自己设置的任意变量值,可任意替换为myindex等等,也可使用固有的元素对象属性,如id等
    lis[i].onclick = function( ) {
        alert(this.index);//也可用function(e),后面this换为e.target
    };

}

(2) 使用闭包

var lis=document.links;

for(var i=0,len=lis.length;i<len;i++){
        (function(a){
                lis[a].onclick=function(){
                        alert(a);
                };
        })(i);
}

(3)循环比较法(不推荐)

var lis=document.links;

for(var i=0,len=lis.length;i<len;i++){
    lis[i].onclick=function(){
        for(var j=0;j<lis.length;j++){
            if (this==lis[j]) {
                alert(j);
            }
        }
    };
}

其实,上述j也可就写作i,因为内部循环参数是在局部函数中的,故循环完成后自动销毁,对外部i没有影响。

更多关于闭包其实闭包并不高深莫测

4. 问题:有如下一段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);
  });

参考资料

http://www.cnblogs.com/zichi/p/4359786.htmlT8

《你不知道的JavaScript》上卷 Part1 Chapter5

以上是关于闭包深度理解的主要内容,如果未能解决你的问题,请参考以下文章

js中的闭包理解

由于lambda闭包或调度程序问题,程序可能会挂起

JS闭包理解_摘

js中的闭包之我理解

Spark闭包与序列化

js闭包