javascript中闭包的应用

hellowoody 发布于2019-08-21 14:43 / 2253人阅读

摘要：在中，有许多闭包的运用。要修改这个可以引进一个立即执行的匿名函数，将当前的值传入封装变量有时候我们需要用一个全局变量来存储一些在整个程序运行过程中都需要被保存下来的值，例如一组人名和对应。

在javascript中，有许多闭包的运用。

1. 事件响应函数

var divs = document.getElementsByTagName("div");
for(var i=0; i<3; i++){
   divs[i].onclick = function(){
       alert(i);
   } 
}

此例中，假设为3个div元素添加onclick事件，我们会发现无论点击哪一个div都会输出3。这是因为我们为div绑定的onclick事件处理函数就是一个闭包，它可以访问到这个函数定义时所处作用域中的变量。并且事件响应是异步触发的，当点击某一个div时，实际上外层循环已经结束了，i的值始终为3。

要修改这个bug可以引进一个立即执行的匿名函数，将当前的i值传入：

for(var i=0; i<3; i++){
   function(i){  
     divs[i].onclick = function(){
       alert(i);
     } 
   }(i);
}

2. 封装变量

有时候我们需要用一个全局变量来存储一些在整个程序运行过程中都需要被保存下来的值，例如一组人名和Id对应。


var persons = {};
var addPerson = function (name，id){
    if(persons.hasOwnProperty(name)){
        return false;
    }
    else {
        persons[name] = id;
        return true;
    }
}

假设只有在addPerson这个函数中我们用到了persons这个变量，就没有必要将其暴露给其他的函数以防止不必要的变量冲突，但是又不能直接将其定义在函数内部，否则会随着函数执行完毕而消失。这个时候就需要用到闭包了。修改代码如下:

var addPerson = (function (){
    var persons = {};
    return function(name,id){
        if(persons.hasOwnProperty(name)){
            return false;
        }
        else {
            persons[name] = id;
            return true;
        }
    }
})();

此例中，我们将persons封装在addPerson函数内部，并且通过在一个立即执行的匿名函数内部return一个闭包函数使得addPerson被赋值的这个函数（即return的函数）可以访问到persons这个变量。

相比于直接在addPerson函数内部定义persons这个变量，我们同样通过闭包延续了变量的生存周期，使其不至于因为函数执行结束而被销毁。

参考《javascript开发实践与设计模式》。

云服务器 GPU云服务器 javascript闭包 javascript闭包详解编程语言中的+闭包 javascript的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88010.html

掌握Javascript面试：什么是闭包？

摘要：我的意思是大多数称职的面试官会问你什么是闭包，并且在大多数时候你回答错误将失去这份工作。在闭包的范围内定义的任何公开方法都是特权的。使对象的数据私有化并不是闭包的唯一用途。文章来源于:https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-closure-b2f0d2152b36 在J...

jifei 2019-08-21 18:21 评论0 收藏0
【译】理解JavaScript：闭包

摘要：当面试中让我解释一下闭包时我懵逼了。这个解释开始可能有点晦涩，让我们抽丝剥茧摘下闭包的真面目。此文不详述作用域有专门的主题阐述，不过作用域是理解闭包原理的基础。这才是闭包的真正便利之处。闭包使用不当就会很坑。原文链接为什么深度学习JavaScript？ JavaScript如今是最流行的编程语言之一。它运行在浏览器、服务器、移动设备、桌面应用，也可能包括冰箱。无需我举其他再多不相干...

岳光 2019-08-22 17:17 评论0 收藏0
温故js系列（14）-闭包&垃圾回收&内存泄露&闭包应用&作用域链&

摘要：该对象包含了函数的所有局部变量命名参数参数集合以及，然后此对象会被推入作用域链的前端。如果整个作用域链上都无法找到，则返回。此时的作用域链包含了两个对象的活动对象和对象。前端学习：教程&开发模块化/规范化/工程化/优化&工具/调试&值得关注的博客/Git&面试-前端资源汇总欢迎提issues斧正：闭包 JavaScript-闭包闭包(closure)是一个让人又爱又恨的somet...

Amio 2019-08-22 10:36 评论0 收藏0
JavaScript基础系列---闭包及其应用

摘要：所以，有另一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。所以本文中将以维基百科中的定义为准即在计算机科学中，闭包，又称词法闭包或函数闭包，是引用了自由变量的函数。闭包(closure)是JavaScript中一个神秘的概念，许多人都对它难以理解，我也一直处于似懂非懂的状态，前几天深入了解了一下执行环境以及作用域链，可戳查看详情，而闭包与作用域及作用域链的关系密不可分，所...

leoperfect 2019-08-22 18:08 评论0 收藏0
javascript - 闭包定义及应用场景

摘要：什么是闭包闭包是指有权访问另一个函数作用域中的变量的函数。在内存中维持一个变量。什么是闭包闭包是指有权访问另一个函数作用域中的变量的函数。 function createFunc() { var name = wheeler; return function () { return name; } } var nameFunc = crea...

Xufc 2019-08-23 11:53 评论0 收藏0
理解Javascript的闭包

摘要：但是闭包也不是什么复杂到不可理解的东西，简而言之，闭包就是闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。可惜的是，并没有提供相关的成员和方法来访问闭包中的局部变量。 (收藏自技术狂) 前言：还是一篇入门文章。Javascript中有几个非常重要的语言特性——对象、原型继承、闭包。其中闭包对于那些使用传统静态语言C/C++的程序员来说是一个新的语言特性。本文将...

dayday_up 2019-08-21 12:37 评论0 收藏0