javascript 作用域链
最近想整理一下js执行代码的一些知识,如果有出错的地方还请指正。
执行环境(Execution Context)
所有的javascript代码都是在一个执行环境中被执行的。它只是一种机制,用来完成运行时作用域、生存期等方面的处理。
代码分为三种类型:
- Global Code
- Eval Code
- Function Code
这是一个EC结构

可以理解如下:
activeExecutionContext = {
VO: {...}, // or AO
this: thisValue,
Scope: [ // Scope chain
// 所有变量对象的列表
// for identifiers lookup
]
};
当一段程序开始时,会先进入到全局执行上下文环境。此时如果调用了某些函数,就会进入他们的上下文环境,执行完之后再退出该上下文环境。
假设激活了一个EC1的上下文,图解如下

变量对象(VO)和活动对象(AO)
变量对象是一个与上下文相关的数据作用域,用于存储被定义在上下文中的变量和函数声明(不包括函数表达式)。在global全局上下文中,变量对象即使全局对象自身。
copy一个例子
var foo = ;
function bar() {} // // 函数声明
(function baz() {}); // 函数表达式
console.log(
this.foo == foo, // true
window.bar == bar // true
);
console.log(baz); // 引用错误,baz没有被定义
全局上下文中的变量对象(VO)会有如下属性:

在一个函数的上下文中,变量对象被表示为活动对象
活动对象在进入上下文中初始化成了
AO = {
arguments: <ArgO>
};
arguments属性值就是Arguments对象
之后就是存储当前上下文的变量与函数声明
作用域链
作用域链是一个 对象列表,用于检索上下文中出现的 标识符(变量名称、函数声明,普通参数)。
在函数创建的时候,当前的作用域链被存储到了函数的[[scope]]属性中。当进入上下文创建AO/VO之后,上下文(EC)的Scope属性作了如下处理:
Scope = AO|VO + [[Scope]]
知识点就是这些,现在我们来一段代码,把过程给串联起来。在这之前,我们要知道另一个知识,就是执行上下文的代码被分成两个基本的阶段来处理
- 进入执行上下文
- 执行代码
var x = ;
function foo(m) {
var y = ;
function bar() {
var z = ;
alert(x + y + z + m);
}
bar();
}
foo(10); //
首先先进入全局上下文环境
全局上下文的变量对象(代码执行时,x才被赋值)是:
globalContext.VO === Global = {
x:
foo: <reference to function>
};
globalContext.Scope = globalContext.VO;
当"foo"创建时,
foo.[[Scope]] = [
globalContext.Scope
];
//也就是
foo.[[Scope]] = [
globalContext.VO
];
在"foo"激活时,进入了foo的上下文,foo上下文中的活动对象(代码执行时,y才被赋值)是:
fooContext.AO = {
arguments:<Arg>,
m: 10,
y: ,
bar: <reference to function>
};
此时foo上下文中的作用域链为:
fooContext.Scope = fooContext.AO + foo.[[Scope]] // i.e.: fooContext.Scope = [
fooContext.AO,
globalContext.VO
];
函数"bar"创建时,其[[scope]]为:
bar.[[Scope]] = fooContext.Scope;
//也就是
bar.[[Scope]] = [
fooContext.AO,
globalContext.VO
];
同理,bar就不写了。最后bar上下文的作用域链为:
barContext.Scope = barContext.AO + bar.[[Scope]] barContext.Scope = [
barContext.AO,
fooContext.AO,
globalContext.VO
];
在alert执行时,作用域链中查找标示符如下
查找 x, barContext.AO 无 ----> fooContext.AO 无 ---->globalContext.VO 有
查找 Z, barContext.AO 有
其他的就自己看了。
局部变量、全局变量
在作用域链中查找标识符是需要花时间的,所以就明白为什么需要尽量使用局部变量(将频繁使用的全局变量缓存下来),全局变量尽量少用了。并且with会破坏作用域链,它会将指定的VO/AO加入到作用域链的顶端,这样在标识符查找时,需要查找更长的作用域链。
闭包
理解了上面的概念,闭包就很容易理解了。闭包是代码块和创建该代码块的上下文中数据的结合。
javascript 作用域链的更多相关文章
- JavaScript作用域链的理解
前言 作用域是JavaScript一个很重要的概念,想要学好JavaScript就需要理解javascript作用域和作用域链的工作原理.这篇文章对JavaScript作用域链和作用域链做一个简单的介 ...
- JavaScript 作用域链图具体解释
<script type="text/javascript"> /** * 作用域链: */ var a = "a"; function hao94 ...
- JavaScript作用域链
之前写过一篇JavaScript 闭包究竟是什么的文章理解闭包,觉得写得很清晰,可以简单理解闭包产生原因,但看评论都在说了解了作用域链和活动对象才能真正理解闭包,起初不以为然,后来在跟公司同事交流的时 ...
- 个人理解的javascript作用域链与闭包
闭包引入的前提个人理解是为从外部读取局部变量,正常情况下,这是办不到的.简单的闭包举例如下: function f1(){ n=100; function f2(){ alert(n); } retu ...
- javascript作用域链学习笔记
作用域链 "JavaScript中的函数运行在它们被定义的作用域里,而不是它们被执行的作用域里." --权威指南 在JavaScript中,一切皆对象,包括函数.函数对象和其它对象 ...
- (好文推荐)一篇文章看懂JavaScript作用域链
闭包和作用域链是JavaScript中比较重要的概念,首先,看看几段简单的代码. 代码1: var name = "stephenchan"; var age = 23; func ...
- 深入javascript作用域链到闭包
我之前用过闭包,用过this,虽然很多时候知道是这么一回事,但是确实理解上还不够深入.再一次看javascript高级程序设计这本书时,发现一起很多疑难问题竟然都懂了,所以总结一下一些理解,难免有错, ...
- 图解 javascript 作用域链
还是之前那一段简单的javascript代码: window.onload=function(){ function sub(a,b){ return a-b; } var result=sub(10 ...
- JavaScript作用域(链)学习笔记
作用域是javascript老生常谈的问题,在面试题中也经常出现.此文记录本人对js作用域的理解.从以下三个方面深入探讨js作用域和js作用域链. 1.什么是作用域? 2.什么是作用域链? 3.常见面 ...
- JavaScript作用域链详解
JavaScript的作用域链还是很有味道的,搞懂了这个知识点,闭包的问题也就迎刃而解咯 1.JavaScript的全局变量和局部变量 首先,先来看看js的全局变量和局部变量,js不是块级作用域,所以 ...
随机推荐
- python socket理论知识
一.socket理论: 发现一个很好的文章,一个高手写的,我也就不再做搬运工了,直接连接吧,对理论感兴趣的可以去看看! http://www.cnblogs.com/dolphinX/p/346054 ...
- Effective Objective-C 读书笔记
一本不错的书,给出了52条建议来优化程序的性能,对初学者有不错的指导作用,但是对高级阶段的程序员可能帮助不是很大.这里贴出部分笔记: 第2条: 使用#improt导入头文件会把头文件的内容全部暴露到目 ...
- new、delete与malloc、free的详解
内容清单: 1. C语言中的函数malloc和free 2. C++中的运算符new和delete 3. new/delete与malloc/free之间的联系和区别 4. C/C++程序的内 ...
- asp.net 向后台提交 html 代码段 包括 <> 标签
首先 在默认情况向标签类的东西是不会让你提交的 这是出于.net 的默认安全机制 我们要先在 <%@ page %> 里边加上 ValidateRequest="false&q ...
- ios不同版本下的UILabel自动换行问题
@interface ThreadPreviewCell : UITableViewCell @property (nonatomic, strong) UILabel *titleLabel; @e ...
- 浅谈Spring(三)
一.基础Spring的标准测试 1.导入spring与junit继承的jar 2.引入注解 @RunWith(SpringJUnit4ClassRunner.class) @ContextConfig ...
- C++学习之引用
C++学习之引用 临时变量.引用参数和const 现在,当参数为const引用的时候,如果实参与引用参数不匹配,C++将生成临时变量.C++将在下面两种情况下生成临时变 ...
- VUE中的v-if与v-show
1.共同点 都是动态显示DOM元素 2.区别 (1)手段:v-if是动态的向DOM树内添加或者删除DOM元素:v-show是通过设置DOM元素的display样式属性控制显隐: (2)编译过程:v-i ...
- javascript笔记—面向对象
什么是对象: 对象是一个整体,对外提供一些操作. 什么是面向对象: 使用对象时,只关注对象提供的功能,不关注其内部细节,例如jquery 面向对象是一种通用思想,并非只有编程中能用,任何事情都可以用. ...
- 排序算法——交换排序(冒泡排序、快速排序)(java)
一.冒泡排序 时间复杂度:O(n^2) 公认最慢的排序,每次把最大/最小的放一边,原理: [57,68,59,52] [57,68,59,52] [57,59,68,52] [57,59,52,68] ...