稳扎稳打JavaScript(四)——闭包

闭包是JS语言的又一大核心,如果要从内存角度充分理解闭包的话,建议大家先预习下先前的几篇讲博客: 稳扎稳打JavaScript(一)——作用域链 稳扎稳打JavaScript(二)——图解对象内存模型 稳扎稳打JavaScript(三)——创建对象的几种方式

什么是闭包

定义

闭包是一个能够访问其他函数作用域的函数。

这句话看似拗口,如果读过先前的几篇博客,那理解起来应该不难。下面来解析一下这句话:

  • 首先,闭包是一个函数;
  • 其次,这个函数不仅能访问自己的作用域,更为关键的是它还能访问其他函数的作用域。

换句话说,如果一个函数能访问其他函数作用域中的变量,那么这个函数就叫做“闭包”。

如何创建闭包?

只要在一个函数中再定义一个函数,这个内部函数就是一个闭包。

注意:只要满足一个函数在另一个函数的内部的条件,这个内部函数就是闭包,不管这个内部函数是以怎样的形式存在于外层函数中的。下面举几个例子:

  • 形式一:
function father () {
    function son () {
    }
}
  • 形式二:
function father () {
    var object = new Object();
    object.son = function () {
    }
}
  • 形式三:
function father () {
    var object = {
        son : function(){}
    };
}

以上三种形式定义的内部函数都是闭包。

  • 形式一:在一个函数中又定义了个函数,这完全符合闭包的定义,不用多说。
  • 形式二:在一个函数中先创建了一个对象,然后在对象内部定义了函数,这也是闭包。
  • 形式三:本质上和形式二一样,也是先在函数内部定义了一个对象,再在对象内部定义了个闭包。只不过定义对象的方式和形式二有所区别。

闭包有何用?

前面闭包的定义中说“闭包能访问其他函数作用域中的变量”。“其他函数”指的是闭包所在的外层函数。 也就是说,闭包能访问它所在外层函数全部变量,即使外层函数已经执行结束。 闭包的这种特性有助于我们在JavaScript这门非面向对象的语言中实现面向对象的一些特性。这个后面会详细介绍。

闭包的原理

闭包的原理涉及到作用域链的内存模型,这里带大家回顾下作用域链,更为详细的内容请看:稳扎稳打JavaScript(一)——作用域链

以下列代码为例:

function father () {
    var name = "爸爸";
    var company = "Google";
    function son () {
        var name = "儿子";
        var school = "启东中学";
        alert(name);
        alert(school);
    }
    return son;
}

这段代码在window作用域中定义了函数father; father中有两个局部变量:name、company; father中定义了一个闭包; 闭包中定义了两个局部变量:name、school。

  • 当JS初始化完成后: 内存中出现与全局环境相关的四个东西:
    1. 全局环境的变量对象(用于存储全局环境的变量,比如:father函数)
    2. 全局环境的作用域 和 作用域链(作用域链是一个链表,由多个作用域构成,全局环境的作用域链中只有一个全局环境的作用域,它指向全局环境的变量对象)
    3. 全局环境的执行环境 和 执行环境栈(执行环境栈里面存放着一个个执行环境,栈顶的那个表示正在执行的环境。执行环境中有一个指针指向它的作用域链)
    4. father函数的作用域链(此时father函数的作用域链中只包含全局环境的作用域,并没有father函数自己的作用域) 注意:每个函数自己的作用域是在函数执行时才创建的,而函数的作用域链则是在函数所在的环境被执行是创建的。当函数被执行时,它自己的作用域才会被添加到已经创建的作用域链的头部。
  • 当执行father函数时: JS引擎也会为它创建上述四样东西:
    1. 一个属于它的变量对象(里面存着name、company、son)
    2. 一个属于它的作用域链 此时,这个作用域链中包含两个作用域,分别是:全局作用域 和 father函数的作用域,他们分别指向各自的变量对象;
    3. 一个属于他的执行环境,并将执行环境压入执行环境栈的栈顶;
    4. son函数的作用域链(其中包含father和全局环境的作用域) 此时,内存图如下:
  • 当father函数执行结束: 当函数执行结束后,它的执行环境 和 作用域链 将会被销毁,而它的变量对象就取决于是否有引用指向它。 由于son函数的作用域链指向了father的变量对象,因此它仍然驻留在内存中。
  • 当执行son函数时: 同样的,JS引擎也会为son函数依次创建这些东西,并将新建的son函数作用域压入作用域链的头部,此时内存图如下:
  • 当执行alert(company)时: JS引擎会沿着son函数的作用域链依次查找变量对象中的值。 查找首先从son变量对象中开始,若该变量对象中没有,则沿着作用域链继续查找father变量对象,一旦找到,就停止。 因此,若查找name,首先就在son变量对象中找到,查找停止,因为无法访问到father中的name,除非在son函数中是否delete name将son中的name删除。

闭包的原理总结

综上所述,闭包之所以能访问其外层函数作用域中的变量,是因为闭包的作用域链中存在外层函数的变量对象。即使外层函数之行结束,但由于其变量对象仍然被内层函数的作用域引用,因此不会被内存回收,直到闭包执行结束后,外层函数的变量对象才会被回收。

闭包的特点

闭包访问外层函数变量的特点

若闭包在外层函数执行结束后执行,那么它只能获取到外层函数中所有变量的最终状态。

  • 例1:
function father(){
    var array = [];
    for (var i=0; i<10; i++) {
        array[i] = function(){
            return i;
        }
    }
    return array;
}

father函数执行后会返回一个包含闭包的数组,每个闭包都会返回i。 由于这里的闭包调用时,外层函数早就执行结束了,外层函数变量对象中i值已经变成了9,此时不管执行array中的哪个闭包,返回的结果都是9。 但是,如果在闭包外层函数执行过程中立即执行闭包,那么结果就不一样了,请看例2.

  • 例2:
function father(){
    var array = [];
    for (var i=0; i<10; i++) {
        array[i] = (function(){
            return i;
        })();
    }
    return array;
}

此时的闭包在外层函数执行时就立即执行,在那个时刻,闭包中i的值就是外层函数当前i的值,因此返回的array中存储的将是0-9. 但是,例子1中array存放的明明是闭包,而这里的array存放的却是闭包执行的结果,那么若仍想让array存储闭包,我们还需要稍稍改造,请看例3。

  • 例3:
function father(){
    var array = [];
    for (var i=0; i<10; i++) {
        array[i] = (function(){
            var curI = i;
            return function(){
                return curI;
            }
        })();
    }
    return array;
}

我们让立即执行的闭包再返回一个闭包,并且将for循环中的i值赋给立即执行函数的局部变量,此时array中存储的将是闭包,并且每个闭包都拥有正确的值。

闭包中的this指向window

闭包的内存问题

闭包占用内存比普通函数大

因为如果一个函数内部有闭包存在,那么函数之行结束后不会释放自己的变量对象,只有当闭包执行结束后才会释放,因此闭包将会占用更大的内存空间,用于存储外层函数的变量兑现。 因此,能避免的情况下就不要使用闭包。

闭包中涉及DOM对象可能会出现内存泄漏

我们知道,JavaScript由ECMAScript、BOM、DOM组成,在某些浏览器中他们使用不同的语言实现,因此他们具有不同的垃圾回收机制。 ECMAScript对象采用标记清除算法回收内存,而某些浏览器的DOM对象采用引用计数算法回收内存。引用计数有个致命的缺点——无法回收循环引用的对象。 举个例子:如果一个DOM对象A中的属性a指向另一个DOM对象B,而B中有属性b指向对象A,那么这两个对象存在循环引用,垃圾回收机制就无法回收他们,这就造成了内存泄漏。 退一步将,只要循环引用的两个对象中存在一个DOM对象,就会导致内存泄漏,请看下面的例子:

function func () {
    var dom = document.getElementById("xx");
    dom.onclick = function(){
        alert(dom.id);
    }
}

这段代码获取了一个DOM对象,并且让这个对象的onclick属性指向了一个JS函数对象;而这个函数对象又指向了DOM对象的id属性,从而出现了循环引用,即使func函数执行完成,这个函数中定义的。由于这两个对象中存在一个DOM对象,因此就会出现内存泄漏。

如何避免?

要解决内存泄漏,我们只要破坏两个对象的相互引用即可。 上述代码要为dom添加一个点击事件,因此dom.onclick属性必须要指向一个JS函数对象,因此这个引用不能切断。 而第二个引用是由JS函数对象指向DOM对象的,目的是为了获取dom的id,我们可以通过如下代码切断这个引用:

function func () {
    var dom = document.getElementById("xx");
    var id = dom.id;
    dom.onclick = function(){
        alert(id);
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ml

杂记(编程style)----google code style!

1.文件名 使用小写字母和下划线组合。头文件以.h结尾,定义文件用.cc结尾。例如:my_useful_class.cc 2.类型名 使用大写字母开头,多个单词...

2897
来自专栏python读书笔记

python 数据分析基础 day2-数值及字符串数值字符串

今天说一下python 的内置的数据类型以及相应的操作方法 数值 数值类型主要有整数(int)、浮点数(flooat)、长整数(long)、复数(complex...

29910
来自专栏强仔仔

Java基础知识-if条件语句的使用介绍

这章节给大家介绍一下Java中经常使用的if条件语句是如何使用的和在项目开发过程中if语句的注意事项。 1.首先就是最基础的写法if(boolean类型) 和i...

2285
来自专栏liulun

Nim教程【八】

有序类型 值连续的枚举类型、整型、字符类型、布尔类型(还有这些类型的变种), 都可以称之为有序类型,Nim为有序类型提供了一系列特殊的方法 方法签名 方法...

1996
来自专栏前端知识分享

第164天:js方法调用的四种模式

函数名提升: script中脚本,在执行之前,会先把脚本中的所有的函数先进行编译解析,然后执行普通的js代码。

822
来自专栏深度学习思考者

一文搞懂C/C++中指针那些事(上篇)

一 指针变量 1.间接存取        指针变量的值为地址;普通变量的值为数据;其中“*”为指针运算符。&是地址操作符,用来引用一个内存地址。通过在变量名...

19810
来自专栏黑泽君的专栏

接口中可以包含的组成部分

    1.接口中的抽象方法,修饰符如果自己写必须是:public abstract

3891
来自专栏Python攻城狮

python高级编程1.==,is的使用 2.深拷贝、浅拷贝 3.属性property

@property成为属性函数,可以对属性赋值时做必要的检查,并保证代码的清晰短小,主要有2个作用

892
来自专栏郭耀华‘s Blog

排序算法

冒泡排序法 比较相邻的元素。如果第一个比第二个大,就交换他们两个。 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对。在这一点,最后的元素应该会是最大...

2796
来自专栏我和PYTHON有个约会

24. 企业级开发基础5:面向对象特征(封装)

在我们程序开发过程中,定义好类型之后就可以通过类型来创建对象 如:我们定义一个中华人民共和国公民的类型

801

扫码关注云+社区