资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/变量对象+作用域链+闭包

变量对象+作用域链+闭包

ygyooo / 3158人阅读

摘要：传入值现在结果是正确的了创建了一个匿名函数，通过把变量作为参数传进去，这样在执行的时候，由于内部的形参能够访问到变量，所以无需到父级作用域链上进行寻找，因此最后输出达到预期目的。

下文根据汤姆大叔的深入javascript系列文章删改，如果想深入理解请阅读汤姆大叔的系列文章。
http://www.cnblogs.com/TomXu/...
变量对象 初步介绍 
变量对象(缩写为VO)是一个与执行上下文相关的特殊对象，它存储着在上下文中声明的以下内容：
    变量 (var, 变量声明);
    函数声明 (FunctionDeclaration, 缩写为FD);
    函数的形参

我们可以用普通的ECMAScript对象来表示一个变量对象：

VO = {};

VO是执行上下文的属性(property)，所以：

activeExecutionContext = {
  VO: {
    // 上下文数据（var, FD, function arguments)
  }
};

只有全局上下文的变量对象允许通过VO的属性名称来间接访问(因为在全局上下文里，全局对象自身就是变量对象)，在其它上下文中是不能直接访问VO对象的，因为它只是内部机制的一个实现。

全局上下文中的变量对象

只有全局上下文的变量对象允许通过VO的属性名称来间接访问

在全局上下文中，有

VO(globalContext) === global;

因为我们在全局上下文中声明的变量等都是存在全局的变量对象中，而在全局上下文中的全局变量对象又是全局对象本身。所以我们可以通过VO的属性名称间接访问

var a = new String("test");
 
alert(a); // 直接访问，在VO(globalContext)里找到："test"
 
alert(window["a"]); // 间接通过global访问：global === VO(globalContext): "test"
alert(a === this.a); // true
 
var aKey = "a";
alert(window[aKey]); // 间接通过动态属性名称访问："test"
函数上下文中的变量对象

在函数执行上下文中，VO是不能直接访问的，此时由活动对象(activation object,缩写为AO)扮演VO的角色。

VO(functionContext) === AO;

在理解函数上下文中的变量对象时，我们通过处理上下文代码的2个阶段来进行理解

1.进入执行上下文
2.执行代码
进入执行上下文

进入执行上文文的时候，也即是代码执行之前，此时VO包含了下列属性

函数形参
函数声明
变量声明

其中，函数声明的等级最高，然后是函数形参，最后才是变量声明。越高等级的声明可以覆盖低等级的声明。

执行代码

这个周期内，AO/VO已经拥有了属性(不过，并不是所有的属性都有值，大部分属性的值还是系统默认的初始值undefined )。这个时候会进行赋值操作以及执行代码。

alert(x); // function
 
var x = 10;
alert(x); // 10
 
x = 20;
 
function x() {};
 
alert(x); // 20

在进入上下文阶段，由于函数具有最高的级别，所以第一次alert(x)输出的是函数。之后进行变量赋值，分别alert 10 20。

function bar (x){
    alert(x);
    var x = 2;
}
bar(3); //3

由于形参声明比变量声明级别高，所以alert(3)，因为在进入执行上下文时变量无法覆盖形参声明，所以输出的是3而不是undefined。

不使用var可以声明一个全局变量，这句话是错误的。 
alert(a); // undefined
alert(b); // "b" 没有声明，报错
 
b = 10;
var a = 20;
作用域链

函数上下文的作用域链在函数调用时创建的，包含活动对象和这个函数内部的[[scope]]属性。函数上下文包括以下内容：

activeExecutionContext = {
    VO: {...}, // or AO
    this: thisValue,
    Scope: [ // Scope chain
      // 所有变量对象的列表
      // for identifiers lookup
    ]
};

其scope定义如下：

Scope = AO + [[Scope]]

[[scope]]是所有父变量对象的层级链，处于当前函数上下文之上，在函数创建时存于其中。

注意这重要的一点－－[[scope]]在函数创建时被存储－－静态（不变的），永远永远，直至函数销毁。即：函数可以永不调用，但[[scope]]属性已经写入，并存储在函数对象中。

另外一个需要考虑的是－－与作用域链对比，[[scope]]是函数的一个属性而不是上下文。

因此我个人的理解是作用域链应该是函数本身的活动对象+父级的变量对象。其中函数本身的活动对象总是排在第一位，在寻找标识符的时候，如果在当前活动对象找不到，那么会遍历作用域链上的父级变量对象。其中[[scope]]在函数创建时被存储，与函数共存亡。

var x = 10;
 
function foo() {
  alert(x);
}
 
(function () {
  var x = 20;
  foo(); // 10, but not 20
})();

说明函数的作用域链在函数创建的时候就已经定义好了，是静态的，不因为调用的时候而改变。

闭包 作用域链的加深理解 
var firstClosure;
var secondClosure;

function foo() {

  var x = 1;

  firstClosure = function () { return ++x; };
  secondClosure = function () { return --x; };

  x = 2; // 影响 AO["x"], 在2个闭包公有的[[Scope]]中

  alert(firstClosure()); // 3, 通过第一个闭包的[[Scope]]
}

foo();

alert(firstClosure()); // 4
alert(secondClosure()); // 3

firstClosure和secondClosure两个函数创建的时候，内部的变量x都是从父级函数foo的变量对象x中引用，所以其实两个函数都是共享一个作用域，因此导致x变量共通了。

经典闭包 
var data = [];

for (var k = 0; k < 3; k++) {
  data[k] = function () {
    alert(k);
  };
}

data[0](); // 3, 而不是0
data[1](); // 3, 而不是1
data[2](); // 3, 而不是2

解释跟上面类似。function在创建的时候，内部的变量k通过访问作用域链即是父级的变量对象k拿到，而当函数被调用的时候，for循环早已执行完毕，此时的K是3，所以三个函数调用的时候输出的值都为3。

var data = [];

for (var k = 0; k < 3; k++) {
  data[k] = (function _helper(x) {
    return function () {
      alert(x);
    };
  })(k); // 传入"k"值
}

// 现在结果是正确的了
data[0](); // 0
data[1](); // 1
data[2](); // 2

创建了一个匿名函数，通过把k变量作为参数传进去，这样在执行function的时候，由于内部的形参能够访问到k变量，所以无需到父级作用域链上进行寻找，因此最后输出达到预期目的。

闭包的理论定义

这里说明一下，开发人员经常错误将闭包简化理解成从父上下文中返回内部函数，甚至理解成只有匿名函数才能是闭包。

ECMAScript中，闭包指的是：

1.从理论角度：所有的函数。因为它们都在创建的时候就将上层上下文的数据保存起来了。哪怕是简单的全局变量也是如此，因为函数中访问全局变量就相当于是在访问自由变量，这个时候使用最外层的作用域。

2.从实践角度：以下函数才算是闭包：
    1.即使创建它的上下文已经销毁，它仍然存在（比如，内部函数从父函数中返回）
    2.在代码中引用了自由变量
GPU服务器 海外云主机 作用域链 javascript作用域链 变量作用范围 php变量作用域

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

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

相关文章

  • 前端基础进阶（四）：详细图解作用域链与闭包

    摘要：之前一篇文章我们详细说明了变量对象，而这里，我们将详细说明作用域链。而的作用域链，则同时包含了这三个变量对象，所以的执行上下文可如下表示。下图展示了闭包的作用域链。其中为当前的函数调用栈，为当前正在被执行的函数的作用域链，为当前的局部变量。 showImg(https://segmentfault.com/img/remote/1460000008329355);初学JavaScrip...

    aikin 评论0 收藏0

  • 谈js中的作用域链和闭包

    摘要：所以，当在函数中使用全局变量的时候，所产生的代价是最大的，因为全局对象一直处于作用域链的最末位置，读取局部变量是最快的。 什么是作用域 在编程语言中，作用域控制着变量与参数的可见性及生命周期，它能减少名称冲突，而且提供了自动内存管理(javascript 语言精粹) 静态作用域 再者，js不像其他的编程语言一样，拥有着块级作用域，就像下面一段代码。 function afunction...

    LucasTwilight 评论0 收藏0

  • 还是不明白JavaScript - 执行环境、作用域、作用域链、闭包吗？

    摘要：所以，全局执行环境的变量对象始终都是作用域链中的最后一个对象。讲到这里，可能你已经对执行环境执行环境对象变量对象作用域作用域链的理解已经他们之间的关系有了一个较清晰的认识。 JavaScript中的执行环境、作用域、作用域链、闭包一直是一个非常有意思的话题，很多博主和大神都分享过相关的文章。这些知识点不仅比较抽象，不易理解，更重要的是与这些知识点相关的问题在面试中高频出现。之前我也看过...

    jlanglang 评论0 收藏0

  • [ JS 进阶 ] 闭包，作用域链，垃圾回收，内存泄露

    摘要：执行返回的内部函数，依然能访问变量输出闭包中的作用域链理解作用域链对理解闭包也很有帮助。早期的版本里采用是计数的垃圾回收机制，闭包导致内存泄露的一个原因就是这个算法的一个缺陷。 关于闭包，我翻了几遍书，看了几遍视频，查了一些资料，可是还是迷迷糊糊的，干脆自己动手来个总结吧 ！欢迎指正... (～ o ～)~zZ 1. 什么是闭包？ 来看一些关于闭包的定义： 闭包是指有权...

    clasnake 评论0 收藏0

  • JS基础知识：变量对象、作用域链和闭包

    摘要：前言这段时间一直在消化作用域链和闭包的相关知识。而作用域链则是这套规则这套规则的具体运行。是变量对象的缩写那这样放有什么好处呢我们知道作用域链保证了当前执行环境对符合访问权限的变量和函数的有序访问。 前言：这段时间一直在消化作用域链和闭包的相关知识。之前看《JS高程》和一些技术博客，对于这些概念的论述多多少少不太清楚或者不太完整，包括一些大神的技术文章。这也给我的学习上造成了一些困惑，...

    Keven 评论0 收藏0

  • 温故js系列（14）-闭包&垃圾回收&内存泄露&闭包应用&作用域链&

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

    Amio 评论0 收藏0

发表评论

登陆后可评论

0条评论

ygyooo

男|高级讲师
我要私信

TA的文章

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