不积跬步之我们谈闭包的时候在谈什么?

钢铁侠.jpg

当我们谈到闭包的时候,我们在谈什么呢?我们会想闭包是什么?闭包会有什么副作用呢?它是用来解决什么问题的呢?带着这些问题,我们去学习一下它把。

什么是闭包呢?

闭包是指有权访问另一个函数作用域中的变量的函数。而创建闭包的常见方式,就是在一个函数的内部创建另一个函数。

例如下面的代码:

function createComparisonFunction(propertyName){
    return function (object1,object2){
        var value1 = object1[propertyName];//这两行代码
        var value2 = object2[propertyName];//这两行代码
        
        if(value1 < value2){
            return -1;
        }else if(value1 > value2){
            return 1;
        }else{
            return 0;
        }
    }
}

在上面的例子中,被注释的那两行代码是内部函数(匿名函数)中的代码,这两行代码访问了外部函数中的变量propertyName即使这个内部函数被返回了,而且是在其他的地方调用了,但是它仍然可以访问变量propertyName。之所以能够访问这个变量,就是因为内部函数的作用域链中包含了外部函数createComparisonFunction的作用域。而我们如果想要搞清楚为什么会这样,就必须理解函数被调用的时候都发生了来入手。而要理解函数被调用的时候发生了什么,我们就要知道执行环境和作用域链。

执行环境和作用域链

执行环境定义了变量和函数有权访问的其他的数据,决定了他们各自的行为。每一个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。

而全局执行环境就是最外围的一个执行环境。

每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境就会进去一个环境栈中。而在函数执行之后,栈将其环境弹出,将控制权返回之前的执行环境。

执行环境就是调用栈的栈帧。

我们看一下下面的例子深入理解一下:

var color = "blue";
function changeColor(){
    var anotherColor = "red";
    function swapColors(){
        var tempColor = anotherColor;
        anotherColor = color;
        color = tempColor;
        //这里可以访问color,anotherColor和tempColor
    }
    //这里可以访问color,anotherColor,但是不能访问tempColor
    swapColors();
}
//这里只能访问color
changeColor();

上面的例子中,我们其实有三个执行环境:全局执行环境,包含了变量color和函数changeColorchangeColor函数的执行环境,它里面包含了变量anotherColor和函数swapColors,但是它可以访问外部的colorswapColor执行环境,它包含了变量tempColor,但是它可以访问外面的两个变量anotherColor,color.

他们的作用域也是逐级向上搜索,内部函数继承外部函数的作用域链,当我们访问color变量的时候会先从当前作用域中查找,如果没有,就去外面的找,如果还没有就去全局环境中找,知道找到为止,如果找不到就会报错。

下面的简图可以更加直观的看出来。

window
|
|----color
|
|----changeColor()
        |
        |----anotherColor
        |
        |----swapColor()
            |
            |----tempColor

每一个执行环境都可以向上搜索作用域链,以查询变量和函数名;但任何环境都不能通过向下搜索作用而进入另一个执行环境。

当函数被调用时,会创建一个执行环境及相应的作用域链(execution context)。然后使用arguments和其他命名参数的值来初始化函数的活动对象(activation object)。但在作用域链中,当前函数的活动对象是第一位,外部函数活动对象始终处于第二位,外部函数的外部函数是第三位,直到最后的全局执行环境。

当我们在函数中访问一个变量时,就会从作用域链中搜索具有相应名字的变量。一般来讲,当函数执行完毕后,局部活动对象就会被销毁,而内存中只保存的全局作用域。

但是闭包的情况却不一样。

在另一个函数内部定义的函数会将包含外部函数的活动对象添加到它的作用域链中。

因此我们在最开始的例子中,createComparisonFunction()函数内部定义的匿名函数的作用域链中,包含了外部函数createComparisonFunction()的活动对象。也就是包含了,arguments,propertyName等。

所以这个匿名函数在被返回以后,同样可以调用访问外部函数中的变量。

var compare = createComparisonFunction("name");
var result = compare({name:"zhangsan"},{name:"lisi"});

在匿名函数从createComparisonFunction()返回后,它的作用域链初始化为包含createComparisonFunction()函数的活动对象和全局变量对象。这样匿名函数就可以访问createComparisonFunction()函数中定义的所有变量,如它的参数变量propertyName。而且更加重要的是:
createComparisonFunction()函数执行完毕后,它的活动对象并不会被销毁,因为匿名函数的作用域链仍然引用的这个活动对象。也就是说,当createComparisonFunction()函数执行完毕后,其执行环境的作用域链会被销毁,但是它的活动对象不会,仍然存在于内存中,知道匿名函数被销毁后,createComparisonFunction的活动对象才会被销毁,这也是闭包容器出现内存泄露的原因。

那么我们应该怎么避免这种情况呢?就是即使的把它置空就可以了

//创建函数
var compare = createComparisonFunction("name");
//调用函数
var result = compare({name:"zhangsan"},{name:"lisi"});
//解除匿名函数的引用,
compare = null;

当我们把匿名函数引用交给compare以后,只要把compare = null;就可以了,解除了匿名函数引用,就会把它的变量对象中引用的外部变量对象和全局变量对象释放出来,通知垃圾回收机制,把他们回收。

看到这里,大家应该明白了,什么是闭包?

闭包的副作用:变量和this对象

变量的问题

由于闭包引用的是外层对象的变量对象。如果我们遍历产生很多内部函数时,它们会引用统一变量对象。所以如下面的代码:

function createFunctionsVar(){
    var result = new Array();
    for(var i = 0;i<10;i++){
        result[i] = function() {
            return i;
        }
    }
    return result;
}
//调用
createFunctionsVar().forEach((item)=>{
    console.log(item())
})
//
10
10
...

这个函数返回一个数组,数组里包含了10个匿名函数,匿名函数的内部都返回外部函数的变量i。表面上看应该返回1,2,3,4,5...,但是不要忘了匿名函数保存的是外部函数的活动对象,而不是单个变量。所以在遍历的最后的时候,实际上那个变量值就变成了10,他们都是一个活动对象,所以值也相同。所以就全部打印的是10.如何解决呢?用原来的方法是,里面再给它套一层匿名函数。


function createFunctionsVar2() {
    var result = new Array();
    for(var i = 0;i<10;i++){
        result[i] = function(num) {
            return function() {
                return num
            };
        }(i);
    }
    return result;
}
//1,2,3,4,...

我们在匿名函数的内部又定义了一个匿名函数,在匿名函数的第一层我们定义了一个变量num。然后再它内部返回的匿名函数中返回外部函数的num。然后我们把第一层匿名函数直接调用。把i值给它传入进去,这样i值就会变成匿名函数的一个参数变量num,同时被立即执行而只有一个变量对象对应于它内部的匿名函数。这样就实现了我们想要的效果。

这也是为啥我们需要letconst.同样的代码。只需要替换var就可以了。

function createFunctionsLet(){
    const result = new Array();
    for(let i = 0;i<10;i++){
        result[i] = function() {
            return i;
        }
    }
    return result;
}

this对象的问题

我们都知道this对象是在运行时基于函数的执行环境绑定的;在全局函数中,this等于window,当函数被作为某个对象的方法调用时,this等于那个对象。但是,匿名函数的执行环境具有全局性,因此其this对象通常指向window。我们看下面的例子:

var name = "The window";
var object = {
    name:"My object",
    getNameFunc:function(){
        return function(){
            return this.name;
        }
    }
}
console.log(object.getNameFunc()());//The window (在非严格模式下)

上面的代码首先在全局中定义了一个变量name,定义了一个对象object,对象中定义了自己的name变量和一个返回匿名函数的函数getNameFunc,而匿名函数里则调用了this.name
在上面的代码中,object.getNameFunc()()这个函数返回一个匿名函数,所以我们直接调用了它,结果打印出来的是The window,为什么呢?

每一个函数在调用时,其活动对象都会自动取得两个特殊变量:thisarguments
内部函数在搜索这两个变量时,只会搜索到其活动对象为止。因此永远不可能直接访问到外部函数中的这两边变量。解决办法是,我们把外部作用域中的this对象保存在一个闭包能够访问到的的变量里。就可以让闭包访问到改对象了。

var name = "The window";
var object = {
    name:"My object",
    getNameFunc:function(){
        var that = this;
        return function(){
            return that.name;
        }
    }
}
console.log(object.getNameFunc()());//My object (在非严格模式下)

在最开始的例子里,this对象是在运行时基于执行环境进行绑定的,所以object.getNameFunc()返回的匿名函数在调用时绑定的this对象实际上是window

而我们在上面的例子里,把this对象作为一个变量放在了闭包里,所以闭包的作用域链中保存了外部函数的活动对象,活动对象中保存了that作为this的值。所以我们可以通过这种方式来得到对象中name的值。

闭包的作用--模仿块级作用域

由于javaScript中没有块级作用域,所以像下面这样的例子中,

function outputNumbers(count) {
    for(var i = 0;i<count;i++){
        console.log(i)
    }

    i = 100;
    console.log(i);
}

for循环中定义的变量i应该在它遍历完成以后就销毁了,但是javaScript中并不是这样,而是还可以使用。

所以我们这里使用匿名函数来模仿块级作用域,它的语法如下:

(function(){
    //这里是块级作用域
})();

上面的代码定义并立即调用了一个匿名函数。将函数声明包含在一对圆括号中,表示它实际上是一个函数表达式,而紧随其后的另一对圆括号会立即调用这个函数。这是怎么出来的呢?
我们这里慢慢推导一下!是不是一脸懵逼?

立即执行函数的推理

首先看一下上面的代码的调用:

var count = 5;
outputNumbers(count);

我们定义了一个变量5把它赋值给count,然后把它传递给函数outputNumbers(count).
其实没有必要这样做,我们可以使用实际的值来取代变量count.

outputNumbers(5);

为什么可以取代呢?
因为变量只是值的另一种表现形式而已。
来,记住这句话。

下面我们定义一个函数:

var someFunction = function(){
    //这里是块级作用域
}
someFunction()

上面的例子中,我们定义了一个函数表达式,然后立即执行它。定义它的方式是,首先我们创建了一个匿名函数,然后我们把这个匿名函数赋值给了变量someFunction。而调用它的方式是在变量后面加上两个圆括号。someFunction().记得我们前面的那句话吗?
变量只是值的另一种表现形式而已。
那我们是不是可以把someFunction这个函数名替换为函数呢?

function(){
    //这里是块级作用域
}();//报错

直接报错,在语法上过不去,这是因为javaScript将关键字function当做一个函数声明的开始,而函数声明后面不能更圆括号。

但是,函数声明不行,函数表达式可以呀。而要将函数声明转变为函数表达式,就只需要给它套上一层圆括号就可以。

(function(){
    //这里是块级作用域
})();

那么现在我们改写一下最开始的代码。

function outputNumbers(count) {
    (function() {
        for(var i = 0;i<count;i++){
            console.log(i)
        }
    })();
    console.log(i);//报错
}
outputNumbers(10)

我们再在外面访问变量i就会报错。这是因为我们在它的里面定义了一个块级作用域。在匿名函数中定义的任何变量都会在执行结束的时候被销毁,因此变量只能在循环中使用,使用完后就被销毁了。

而在块级作用域中我们可以访问外部的变量count,因为这个匿名函数是一个闭包,它的作用域中保存了外部函数的活动对象,活动对象中保存了count这个变量,所以可以访问。

这种技术特别适合在全局作用域中使用,它可以限制添加过多的全局变量和函数。

闭包的作用--私有变量的封装

一个简单的例子:

function add(num1,num2){
    var sum = num1+num2;
    return sum
}

JavaScript中没有私有变量的概念,但是我们可以把变量放到函数中,函数中定义的变量,只有函数内自己可以访问,而外部并不能访问。

在上面的例子中函数定义了三个变量sum、num、num2。只有函数自己内部可以访问,而外部不能访问,我们可以使用闭包的特性,在函数中封装一个特权方法来操作这些私有的变量。

function MyObject() {
    //私有变量和私有函数
    var privteVariable = 10;
    
    function privateFunction() {
        return false;
    }
    //特权方法
    this.publicMethod = function() {
        privteVariable++;
        return privteVariable();
    }
}

这个模式在构造函数中定义了所有私有变量和函数。在我们使用这个构造函数后,除了this.publicMethod方法可以访问内部的私有变量,没有了其他的途径来访问。就达到了封装私有变量的目的。

over...

参考文章:JavaScript高级程序设计

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,029评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,395评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,570评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,535评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,650评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,850评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,006评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,747评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,207评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,342评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,964评论 3 315
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2 349

推荐阅读更多精彩内容