闭包深度理解

最新推荐文章于 2024-06-18 14:37:18 发布
最新推荐文章于 2024-06-18 14:37:18 发布
阅读量123 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/Bonnie3449/p/9289192.html
版权

一、闭包的概念理解

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

闭包的一些特点:

  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);
}

二、闭包经典问题

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

转载于:https://www.cnblogs.com/Bonnie3449/p/9289192.html

aiguanyi0149
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
python小知识：闭包
12-22
文章目录python闭包一、一切皆对象二、什么是闭包三、闭包的意义与深度理解四、利用闭包来解决问题4.1 先不用闭包解决4.2 使用闭包方式实现 python闭包 一、一切皆对象 在其他语言中（C#）,函数只是一段可以执行的...
MindSpore深度学习框架-其他
06-12
基于源码的转换：该技术是从功能编程框架演进而来，以即时编译（Just-in-time Compilation，JIT）的形式对中间表达式（程序在编译过程中的表达式）进行自动差分转换，支持复杂的控制流场景、高阶函数和闭包。...
javascript 闭包
fhzh520的专栏
08-16 683
一、变量的作用域 要理解闭包，首先必须理解Javascript特殊的变量作用域。 变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 　　var n=999; 　　function f1(){ 　　　　alert(n); 　　} 　　f1(); // 999 另一方面，在函数外部自然无法读取函数内的局部变量。
深度理解JavaScript闭包
ZiXiaweb的博客
10-07 126
什么是js闭包 我想在JavaScript中，一些比较难以理解透的知识点其中就有js闭包，所以我又回过头专门写了一个js闭包的博客。 闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。 其实这句话通俗的来说就是：Javascript中所有的function都是一个闭包。不过一般来说，嵌套的function所产生的闭包更为强大，
JavaScript闭包
尐轩web前端网络日志
10-24 1397
闭包是JavaScript很重要的知识点 闭包在JavaScript的世界中无处不在 掌握了它能够使我们对JavaScript理解的更加深入 闭包是基于词法作用域书写代码时所产生的必然结果 词法作用域可以理解为就是静态的作用域, 就是书写代码时, 变量属于哪个作用域就已经定下来了
每天一道面试题——闭包
写点什么好
07-29 418
一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。 闭包其实就是一个可以访问其他函数内部变量的函数。创建闭包的最常见的方式就是在一个函数内创建另一个函数，创建的函数可以 访问到当前函数的局部变量。 简单的例子 function bibao() .
JavaScript之闭包
weixin_33962923的博客
03-12 92
闭包的定义 定义一：当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。 --《You Don't Know JS》 定义二：闭包是指有权访问另一个函数作用域中的变量的函数。 -- 《JavaScript高级程序设计》 关键词： 1. 是一个函数；2.能够访问另外一个函数作用域中的变量。 创建闭包的常见方式就是在一个函数内部再创建一个函数。 var a = ...
深入理解js闭包
qq_38164763的博客
07-06 273
一、什么是闭包   在JS高程上，是这样介绍闭包的:闭包是指有权访问另一个函数作用域中的变量的函数。比如下面这个最简单的例子： function returnf() { var a = 1; return function f() { console.log(a); } }   在f中可以访问returnf函数中的a变量，所以这样就创建了一个闭包。当我们用变量接到f函数的时候，就可以在...
我所理解的this，闭包，原型链，继承及面向对象.zip
07-08
深度讲解我所理解的this，闭包，原型链，继承及面向对象
Python函数基础实例详解【函数嵌套,命名空间,函数对象,闭包函数等】
09-19
总的来说，理解Python函数的基础，包括命名关键字参数、函数嵌套、命名空间、函数对象和闭包，对于编写高效、可维护的Python代码至关重要。掌握这些概念能够帮助开发者更好地组织和重用代码，提高代码质量。
印客2023大厂前端工程师课程大纲0803.pdf
08-05
* 前端工程师职业成长路径包括基础知识、深度知识、项目经验和职业规划等几个方面。 * 学员需要掌握前端技术栈，包括HTML、CSS、JavaScript、React、Vue.js等，并具备深入理解前端技术的能力。 * 学员需要具备项目...
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1387
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
一个很好用的地图工具的使用：思极地图，以及vue+思极地图的使用
浩星
06-18 180
思极地图，给我们带来了很多便利，这里分享下他的信息与使用。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 515
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
盲盒App开发时有哪些技术框架可以借鉴
bytekj的博客
06-14 595
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
最新发布
qq_61798306的博客
06-18 147
【element 】修改下拉菜单
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 855
Vue在表单校验中trigger属性指定何时触发校验规则
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 318
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
python闭包理解
09-08
闭包是指一个函数对象（即函数）和它在定义时的环境变量（即函数内部变量）的组合。简单来说，闭包就是函数内部定义的函数，它可以访问外部函数中的变量，并且可以保持对这些变量的引用，即使外部函数已经执行结束。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值