资讯专栏INFORMATION COLUMN

浅谈对JavaScript闭包的理解

missonce / 1294人阅读

摘要:关于循环和闭包当循环和闭包结合在一起时,经常会产生让初学者觉得匪夷所思的问题。闭包是一把双刃剑是比较难以理解和掌握的部分,它十分强大,却也有很大的缺陷,如何使用它完全取决于你自己。

在谈闭包之前,我们首先要了解几个概念:

什么是函数表达式? 与函数声明有何不同?

JavaScript查找标识符的机制

JavaScript的作用域是词法作用域

JavaScript的垃圾回收机制

先来说说函数表达式

什么是函数表达式? 如果function是声明中的第一个词,那么就是函数声明,否则就是函数表达式
举个例子:

var foo = function(){}; //匿名函数表达式

(function foo(){})() //函数表达式,因为function不是声明中的第一个词,前面还有一个“(”

function foo(){} //函数声明

函数表达式也分匿名函数表达式和具名函数表达式:

var foo = function(){} //匿名函数表达式

var foo = function bar(){} //具名函数表达式

具名函数表达式要注意一点:上例中的bar标识符 只在当前的函数作用域中存在,在全局作用域中是不存在的

函数声明与函数表达式的重要区别有:

函数声明具有函数声明提升,函数表达式不会被提升

函数表达式可以在表达式后跟个括号来立即执行,函数声明不行

(function (){})() //匿名函数表达式,且立即执行

这种模式的函数,通常称为IIFE(Immediately Invoked Function Expresstion)代表立即执行函数表达式。
关于函数、变量声明的提升这里就不再多说了, 想了解的同学可以查阅一下相关资料

关于JavaScript执行函数时查找标识符的机制

不了解作用域链及变量对象的同学可以先查阅相关资料后再来看。

作用域链本质上是一个由指向变量对象的指针列表,它只引用但不实际包含变量对象,变量,函数等等都存在各自作用域的变量对象中,通过访问变量对象来访问它们。

只有在函数调用的时候,才会创建执行环境和作用域链,同时每个环境都只能逐级向上搜索作用域链,来查询变量和函数名等标识符

JavaScript的作用域

JavaScript的作用域就是词法作用域而不是动态作用域
词法作用域最重要的特征是它的定义过程发生在代码的书写阶段
动态作用域的作用域链是基于调用栈的 词法作用域的作用域链是基于代码中的作用域嵌套

function foo(){
    console.log(num)
}
   
function bar(){
    var num = 2;
    foo(); // 1
}
    
var num = 1;
bar();    

bar函数执行时,会执行foo函数,因为JavaScript是词法作用域,所以函数执行时,会沿着定义时的作用域链查找变量,而不是执行时,foo函数定义在全局中,所以查找到了全局的num,输出了1而不是2。

下面来说闭包

关于什么是闭包,其实有很多种说法,这取决于各自的理解,最主要的有两种:

Nicolas C.Zakas:闭包是指有权访问另一个函数作用域中的变量的函数

KYLE SIMPSON:当函数可以记住并访问所在的词法作用域时,就产生了闭包,这个函数持有对该词法作用域的引用,这个引用就叫做闭包

我个人更倾向于后者对于闭包的定义,即闭包是一个引用。
下面来看一些代码:

function foo() {
    var a = 5;
    return function() {
    console.log(a);
    }
 }

var bar = foo();
bar();       // 5
    

这段代码里 foo执行时会返回一个匿名函数表达式,这个函数能够访问foo()的作用域,并且引用能引用它,然后将这个匿名函数赋值给了变量bar,让bar能引用这个匿名函数并且可以调用它。
这个例子,匿名函数在自己定义的词法作用域以外的地方成功执行
这正是闭包强大的地方,比如通过闭包实现模块模式:

function aModule() {

    var sometext = "module";
    
    function doSomething() {
        console.log(sometext);
    }
    
    return {
        doSomething: doSomething
        };
}

var obj = aModule();
obj.doSomething()   //module

我们通过调用aModule函数创建了一个模块实例,函数返回的这个对象,实质上可以看做是这个模块的公告API,是不是有些像其它面向对象语言中的class?

再来通过闭包实现一个单例模式:

var application = function() {
    
    var components = [];
    /*
    一些初始化操作
    */
    return {              //公共API
        getComponentCount: function() {
        return components.length;
        },
        registerComponent: function(component) {
        components.push(component);
        }
    };
}();

这个例子通过IIFE创建了一个单例对象,函数里返回的对象字面量是这个单例模式的公共接口。
通过闭包实现模块模式,可以做到很多强大的事情,模块模式能成功实现,最关键的是返回的API还能继续引用定义时所在的作用域,从而进行一些操作,也就是说,作用域并没有因为函数执行后被销毁,也就是没有被内存回收,之所以没有被回收是因为闭包的存在和JavaScript的垃圾回收机制。

JavaScript的垃圾回收机制

JavaScript最常用的垃圾收集方式是标记清除,垃圾收集器会给存储在内存中的所有变量都加上标记,然后去除环境中的变量,以及被环境中的变量引用的变量的标记,说明这些变量还有作用,暂时不能被删除,然后在此之后被加上标记的变量就是要删除的变量了,等待垃圾收集器对他们完成清除工作。

对函数来说,函数执行完毕后,会自动释放掉里面的变量,可是如果函数内部存在闭包,它们就不会被删除,因为这个函数还在被内部的函数所引用,所以他不会被加上标记,不会被清除,而是会一直存在内存中得不到释放!除非使用闭包的那个内部函数被销毁,外部函数才能得到释放

所以,虽然闭包强大,但是我们不能滥用它,且在没有必要的情况下尽量不要创建闭包,不然将会有大量的变量对象得不到释放,过度占用内存。

关于循环和闭包

当循环和闭包结合在一起时,经常会产生让初学者觉得匪夷所思的问题。
来看一段Nicolas C.Zakas 在《JavaScript高级程序设计》中的代码:

function createFunction() {
    var result = [];
    for (var i = 0; i < 10; i++) {
        result[i] = function() {
            return i;
        };
    }
    return result;
}

这个函数执行后,会创建一个由十个函数组成的数组并且产生十个互不相干的函数作用域,表面上看调用第几个函数就会输出几,但是结果并不是这样

var result = createFunction();
result[0]();  // 10
result[9]();  // 10

产生这种奇怪的现象的原因就是之前说的,createFunction的变量对象因为闭包的存在没有被释放,注意闭包保存的是整个变量对象,而不是只保存只被引用的变量,在createFunction执行后,创建了十个函数,同时变量 i 没有被释放,依然保存在内存中,所以此时它的值保留为停止循环后的10。

当我们在外部调用函数时,函数沿着它的作用域链开始搜索所需要的变量,前面说过,JavaScript的作用域链是基于定义时的作用域嵌套,所以当我们调用某个函数比如 result[0] 它就会首先在自己的作用域里通过RSH搜索 i ,显然 i 不存在这个作用域中,于是它又沿着作用域链向上一级作用域中搜索 i ,然后找到了 i ,但是此时createFunction函数已经执行,循环也已经执行完毕了, i 的值为10,所以获取到的i,值就为10,同理,其他的函数执行时,查找的i 也会是10, 所以每个函数执行结果都是输出10。
关键所在就是尽管循环中的十个函数是在各自的迭代中分别定义的,但是它们都处于一个共享的上一级作用域中,所以它们获取到的都是一个 i

所以解决此类问题的关键就是让函数查找i时,不找到createFunction的变量对象那一级 ,因为一旦向上搜索到createFunction那里,得到的就是10。所以我们可以通过一些方法在中间来截断本该搜索到createFunction变量对象的一次查找。

首先我们可以这样:

function createFunction() {
    var result = [];
    for (var i = 0; i < 10; i++) {
    (function (){
        result[i] = function() {
            return i;
        };})();
    }
    return result;
}

我们通过定义一个立即执行函数表达式,在result[i]函数上一级创建了一个块级作用域,如果我们把这个块级作用域叫做a,那么它查找i时是这样一条链 result[i]->a->createFunction,之所以还会查找到createFunction中,是因为a中没有i这个变量,所以我们需要做些什么,让它搜索到a时就停下

function createFunctions() {
    var result = new Array();
    for (var i = 0; i < 10; i++) {
        (function(i){
        result[i] = function() {
            return i;
        };})(i);
        }
    
    return result;
}

现在a这个块级作用域里定义了一个变量 i ,这个 i 与上级的 i 不会互相影响,因为它们存在各自的作用域里, 同时我们将该次迭代时的 i 值赋给了 a这个块级作用域里的 i ,即a中的 i 保存了当次迭代的 i ,result[i]在外部执行时,是这样的调用链result i -> a在a中就能找到需要的变量,不需要再向上搜索,也不会查找到值为10的 i ,所以调用哪个result[i]函数,就会输出哪个 i 。

ES6 中我们还可以使用 let 来解决此类问题

function createFunction() {
    var result = [];
    for (var i = 0; i < 10; i++) {
        let j = i;
        result[i] = function() {
            return j;
        };
    }
    return result;
}
//输出一下
console.log(createFunction()[2]());  //2

let会创建一个块级作用域,并在这个作用域中声明一个变量。所以我们相当于在result[i]上套了一层块级作用域

function createFunction() {
    var result = [];
    for (var i = 0; i < 10; i++) {
        //块的开始
        let j = i;
        result[i] = function() {
            return j;
        };
        //块的结束
    }
    return result;
}

这种方式解决此类问题,与前面没有多大分别,总之就是为了不让函数调用时去查找到最上级的那个 i 。

其实,如果在for循环头部来进行let声明还会有一个有趣的行为:

function createFunction() {
    var result = [];
    for (let i = 0; i < 10; i++) {    //每次迭代,都会声明一次i,总共声明10次
        result[i] = function() {
            return i;
        };
    }
    return result;
}
console.log(createFunction()[2]());  //2

这样在for头部使用let声明, 每次迭代都会进行声明,随后每次迭代都会使用上一个迭代结束时的值来初始化这个变量。

事实上当函数当做值类型并到处传递时, 基本都会使用闭包,如定时器,跨窗口通信,事件监听,ajax等等 基本只要使用了回调函数, 实际上就是在使用闭包。

闭包是一把双刃剑 是JavaScript比较难以理解和掌握的部分, 它十分强大,却也有很大的缺陷,如何使用它完全取决于你自己。

以上皆为个人观点 如若有误 还望指正

参考书籍

《JavaScript高级程序设计》

《你不知道的JavaScript 上卷》

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

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

相关文章

  • 谈对CSRF认识,以及一些应对措施

    摘要:了解了攻击者利用的一些原理,就对应的可以找到一些对应措施在服务端验证的字段。因此,从某些方面来说,是相对安全的。个人觉得相对安全的做法就是既验证,同时也校验。整个过程虽然比较难,但这让自己对于有了更深刻的认识。 CSRF CSRF(Cross Site Request Forgery, 跨站域请求伪造)的定义,相信大家都不陌生。它是指攻击者通过诱导用户,打开已精心设计好的页面后,发送请...

    isaced 评论0 收藏0
  • 浅谈JavaScript闭包

    摘要:但是函数返回了内部函数,内部函数会随时访问变量所以垃圾回收机制是不会回收函数的内部作用域的,这就是闭包的含义。也就是函数在定义的词法作用域以外的地方被调用,闭包使得函数可以继续访问定义时的词法作用域。   初学JavaScript闭包时,闭包这个概念在我眼里及其的神秘,也不知道这个东西在讲什么,尤其某些地方的闭包概念定义的非常抽象,属于那种本来你可能明白这个概念,看了反而又把你给绕糊涂...

    hsluoyz 评论0 收藏0
  • 浅谈Javascript闭包和匿名函数【1】

    摘要:我们可以用普通函数内部嵌套匿名函数,形成一个闭包来使变量驻留在内存中。局部变量闭包为什么要将赋值给变量呢这里我们就要谈到匿名函数调用问题匿名函数如何调用还是上面的例子会将整个函数体打印出来这样才调用了函数内部的匿名函数看到这里。 闭包含义: 闭包是指有权访问另一个函数作用域中的变量的函数,创建闭包的常见的方式,就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量。 这...

    cyqian 评论0 收藏0
  • 浅谈JavaScript闭包

    摘要:在内部,理所当然能访问到局部变量,但当作为的返回值赋给外的全局变量时,神奇的事情发生了在全局作用域中访问到了,这就是闭包。而闭包最神奇的地方就是能在一个函数外访问函数中的局部变量,把这些变量用闭包的形式放在函数中便能避免污染。 一、闭包是什么? 《JavaScript高级程序设计》中写道:闭包是指有权访问另一个函数作用域中的变量的函数,如果用下定义的观点看,这句话就是说闭包是函数,我...

    Riddler 评论0 收藏0
  • 浅谈Javascript闭包中作用域及内存泄漏问题

    摘要:将作用域赋值给变量这里的作用域是,而不是将作用域赋值给一个变量闭包返回浏览器中内存泄漏问题大家都知道,闭包会使变量驻留在内存中,这也就导致了内存泄漏。 上一章我们讲了匿名函数和闭包,这次我们来谈谈闭包中作用域this的问题。 大家都知道,this对象是在运行时基于函数的执行环境绑定的,如果this在全局就是[object window],如果在对象内部就是指向这个对象,而闭包却是在运行...

    source 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<