【呆萌の研究】JavaScriptの闭包

CHENGKANG 发布于2019-08-26 11:47 / 1378人阅读

摘要：为什么会产生闭包究其根本，是因为代表的函数包含的作用域。而在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位直到作为作用域链终点的全局执行环境。

前言

此文的内容主要是来自看书的总结+小小的实践哦~会不断更新总结。

什么是闭包

书上是这样定义闭包的：

有权访问另一个函数作用域中变量的函数。

举一个例子：

function test(){
    var a = 1;
    var b = function(){
        return a;   
    };
    return b;
}

var c = test();
console.log(c()); //1

这里c是直接得到了b这个函数表达式，但是调用c之后可以得到test的局部变量a的值1，也就是c它访问到了test作用域中的变量。
其实我初学的时候一直不清楚闭包的意思，因为我感觉这种情况是理所当然的，噗，后来才知道原来就是说这个啊。

为什么会产生闭包

究其根本，是因为b代表的函数包含test的作用域。
在某个函数被调用时会做下面这些事：

创建一个执行环境。

创建相应的作用域链（复制函数的[[Scope]]来完成）。

初始化函数的活动对象（arguments和其他命名参数），并被推入作用域最顶端。

而在作用域链中，外部函数的活动对象始终处于第二位，外部函数的外部函数的活动对象处于第三位...直到作为作用域链终点的全局执行环境。

举个栗子

function test(value1,value2){
    if(value1 < value2)
        return -1;
    return 0;
}
var result = test(5,10);

以上首先定义了test函数，又在全局作用域中调用它。
第一次调用时，会创建一个包含this、arguments、value1和value2的活动对象。
全局执行环境的变量（this、result、test）则处于test执行环境作用域链中的第二位。

每个执行环境都有一个表示变量的对象，称为变量对象。
全局环境的变量对象一直存在，test()函数局部环境的变量对象只有在执行的时候会存在。

函数的作用域链是保存在内部的[[Scope]]属性中。
作用域本质是一个指针列表，只保存引用。
以下是最初的栗子中test()的原型内容：

匿名函数执行结束后，它的执行环境被销毁了，但是返回的活动对象没有消失，所以闭包也不会消失，依旧存在内存中，如果给这个对象赋值null，就可以解除关系。

原来如此

让我们瞅瞅这段熟悉的代码：

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

这个函数的实际结果是每个函数都返回了10，因为它们实际的i都是同一个。
解决方法是用匿名函数：

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

由于中间多加上了一层，即每次把一个num值传入，所以内部的函数是形成了各自num的闭包，于是就没有像之前一样共用了。

拓展-关于this

确定this值的情况（以运行时给予函数的）主要有以下几种：

全局函数中，this等于window。

作为某个对象的方法调用时，this等于那个对象。

看看例子：

var obj = {
    name: "Bob",
    getName: function(){
        return function(){
            return this.name;
        }
    }
}

这里有一个闭包，但是闭包在形成的时候获取它的this和arguments值只会停止搜索到活动对象，所以它不会把外部包裹的function里的this保存起来。调用obj.getName()()会得到this.name是undefined，因为obj.getName()得到的就是里面return的函数，再次调用，其实是window在调用这个函数，所以this是window。
如果改成以下代码：

var obj = {
    name: "Bob",
    getName: function(){
        var that = this;
        return function(){
            return that.name;
        }
    }
}

就会按预期一样输出Bob，因为that保存了this值，而闭包的作用域包括了外部function里的变量，所以可以访问到这个值。

云服务器专线服务 javascript闭包 javascript闭包详解呆萌循环闭包

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

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

【呆萌の研究】JavaScript常见的继承方式

摘要：构造函数构造操作符调用的函数就是构造函数。其和其构造函数的指向相同。而构造函数属性指向的对象带有属性，指向函数自身。，回归构造函数继承，仔细看看诞生的嘻嘻和哈哈两位同学可以看到两个实例都拥有了和两个属性，因为方法的运行类似于执行了和。最近在看《JavaScript设计模式》，然后开篇复习了JavaScript中的几种继承方式，自己似乎也没有怎么仔细探究过，目前自己没怎么碰到过应用的场...

马永翠 2019-08-22 15:03 评论0 收藏0
【呆萌の研究】圣杯布局引发对margin负值的研究

摘要：问题起源以前一直就听说圣杯布局，但是没有怎么去用过，然后这次偶然接触到了，就学习了一下。继续试验我们可以尝试改变的值，去看看位置的变化。为了方便我们计算，另外写了一个类似的布局，内容区的宽度是，三个的宽度也都是。问题の起源以前一直就听说圣杯布局，但是没有怎么去用过，然后这次偶然接触到了，就学习了一下。这是一个我从别人写的文章中复制过来的，关于圣杯布局的比较简单的说明通过缩放页面就...

zhangke3016 2019-08-29 13:56 评论0 收藏0
【呆萌の体验】vue.js初次体验

摘要：官方默认项目是存放了一个为的打开文件夹有一个，还有一个名为组件的文件夹，里面放了一个文件。部分我们会发现这几排字就是显示在页面的几排文字部分这其中的这个文件引入了，还有上述的。结合查询其他说法，就是说它会把是的元素以形式替换。前言我很早就想来学习学习vue.js啦，终于有了那么一些空闲的时间可以拿来学习，于是从前天开始我就每天抽一个多小时来体验vue.js。当然啦，因为是小白入门，...

wdzgege 2019-08-21 17:21 评论0 收藏0