javascript中的执行环境和作用域详解

首先,我们要知道执行环境和作用域是两个完全不同的概念

函数的每次调用都有与之紧密相关的作用域和执行环境;从根本上来说,作用域是基于函数的,而执行环境是基于对象的(例如:全局执行环境即window对象);换句话说,作用域涉及到被调用函数中的变量访问,且不同的调用场景是不一样的;执行环境始终是this关键字的值,它是拥有当前所执行代码的对象的引用;每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中;虽然我们编写的代码无法访问这个对象,但解析器在处理数据时会在后台使用它

我有几张阿里云幸运券分享给你，用券购买或者升级阿里云相应产品会有特惠惊喜哦！把想要买的产品的幸运券都领走吧！快下手，马上就要抢光了。

执行环境(也称执行上下文–execution context)

执行环境(execution context)是js中最为重要的一个概念,执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为;全局执行环境是最外围的一个执行环境,在web浏览器中,全局执行环境被认为是window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的

当JavaScript解释器初始化执行代码时,它首先默认进入全局执行环境;从此刻开始,函数的每次调用都会创建一个新的执行环境;每个函数都有自己的执行环境,当执行流进入一个函数时,函数的环境就会被推入一个环境栈中(execution stack);在函数执行完后栈将其环境弹出,保存在其中的所有变量和函数定义也随之销毁(全局执行环境直到应用程序退出也随之销毁,把控制权返回给之前的执行环境;ECMAScript程序中的执行流正是由这个便利的机制控制着;执行环境可以分为创建和执行两个阶段;在创建阶段,解析器首先会创建一个变量对象(variable
object,也称为活动对象activation object),它由定义在执行环境中的变量/函数声明/参数组成;在这个阶段,作用域链会被初始化,this的值也会被最终确定;在执行阶段,代码被解释执行

function Fn1(){
function Fn2(){
alert(document.body.tagName);//BODY
//other code...
}
Fn2();
}
Fn1();

执行环境栈:



全局执行环境

执行环境特点:

单线程

同步执行

唯一的全局执行环境

局部执行环境的个数没有限制

每次某个函数被调用,就会有个新的局部执行环境为其创建,即使是多次调用的自身函数(即一个函数被调用多次,也会创建多个不同的局部执行环境)

作用域

当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain),作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问;作用域链包含了执行环境栈中的每个执行环境对应的变量对象;通过作用域链,可以决定变量的访问和标识符的解析;作用域链的前端始终都是当前执行的代码所在环境的变量对象,如果这个环境是函数则将其活动对象作为变量对象,活动对象在一开始时只包含一个变量即arguments对象(这个对象在全局环境中是不存在的);作用域链中的下一个变量对象来自包含(外部)

作用域分为局部作用域和全局作用域;有如下几种情况可归纳为全局作用域:

1.最外层函数和在最外层函数外面定义的变量拥有全局作用域

2.所有末定义直接赋值的变量自动声明为拥有全局作用域

3.所有window对象的属性拥有全局作用域

而局部作用域:是函数内部的作用域,一般只在固定的代码片段内可访问到,有时候也成为函数作用域;这里引申一下变量的搜索机制:先搜索局部变量,如果没找到,往上一层查找,直到搜索全部变量,如果都没找到,返回undefined

在每个执行环境中,内部环境可以通过作用域链访问所有的外部环境,但外部环境不能访问内部环境中的任何变量和函数

注意:全局执行环境的变量对象始终都是作用域链的最后一个对象



作用域链图,清楚的表达了执行环境与作用域的关系(一一对应的关系),作用域与作用域之间的关系(链表结构,由上至下的关系)

var color = "blue";
function changeColor(){
var anotherColor = "red";
function swapColors(){
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
// 这里可以访问color, anotherColor, 和 tempColor
}
// 这里可以访问color 和 anotherColor，但是不能访问 tempColor
swapColors();
}
changeColor();
// 这里只能访问color
console.log("Color is now " + color);

上述代码一共包括三个执行环境:全局执行环境/changeColor()的局部执行环境/swapColors()的局部执行环境

全局环境有一个变量color和一个函数changecolor();changecolor()函数的局部环境中具有一个anothercolor属性和一个swapcolors函数;当然,changecolor函数中可以访问自身以及它外围(即全局环境)中的变量;swapcolor()函数的局部环境中具有一个变量tempcolor,在该函数内部可以访问上面的两个环境(changecolor和window)中的所有变量,因为那两个环境都是它的父执行环境

上述代码的作用域链如下图所示： 



标识符解析(变量名或函数名搜索)是沿着作用域链一级一级地搜索标识符的过程;搜索过程始终从作用域链的前端开始,然后逐级地向后(全局执行环境)回溯,直到找到标识符为止

延长作用域链

执行环境的类型总共有两种-全局和局部(函数),有些语句可以在作用域链的前端临时增加一个变量对象,该变量对象会在代码执行后被移除;有两种情况可以延长作用域链try-catch的catch块和with语句

try{
null.name
}catch(e) {
console.log(e.message);
}

在IE9+版本的浏览器环境下，此处的catch块中临时增加了一个变量对象，延长了作用域链

function buildUrl() {
var qs = "?debug=true";
with(location) {
var url = href + qs;
}
return url;
}
console.log(buildUrl());

with语句接收的是location对象,因此其变量对象中就包含了location对象的所有属性和方法,这个变量对象被添加到作用域链的前端;而with内部,定义了一个url变量,因此这个url就成了函数执行环境的一部分,可以作为函数值被返回

没有块级作用域

为什么说js没有块级作用域呢?我们来看下面的代码:

if(true) {
var haha = 'haha';
}
console.log(haha); // haha 没在if 块中也可以访问

咦,为什么haha在if语句执行完毕后被销毁呢?如果在C/C++/Java中,color确实会被销毁;但在JavaScript中,if语句中的变量声明会将变量添加到当前的执行环境中(在这里是全局环境)中;特别地,在for语句时要牢记这一差异,例如:

for(var i = 0;ｉ< 10; i++){
doSomething(i);
}
alert(i);    //10

在JavaScript中,由for语句创建的变量i即使在for循环执行结束之后,也依然会存在于循环外部的执行环境中

执行环境与作用域的区别与联系

作用域链是基于执行环境的变量对象的,由所有执行环境的变量对象(对于函数而言是活动对象,因为在函数执行环境中,变量对象是不能直接访问的,此时由活动对象(activation object,缩写为AO)扮演VO(变量对象)的角色)共同组成

当代码在一个环境中执行时会创建变量对象的一个作用域链,作用域链的用途:是保证对执行环境有权访问的所有变量和函数的有序访问;作用域链的前端,始终都是当前执行的代码所在环境的变量对象

(function(){
a= 5;
console.log(window.a);//undefined
var a = 1;//这里会发生变量声明提升
console.log(a);//1
})();

window.a之所以是undefined,是因为var a = 1;发生了变量声明提升;相当于如下代码:

(function(){
var a;//a是局部变量
a = 5;//这里局部环境中有a，就不会找全局中的
console.log(window.a);//undefined
a = 1;//这里会发生变量声明提升
console.log(a);//1
})();

建议：

1.尽量使用局部变量,这不仅仅是涉及到私有属性的问题,局部的变量从以上过程中可以看到,能够减少搜索的时间(注:在一般的情况下,不包括浏览器的优化行为)

2.避免使用with语句,因为它会修改执行上下文(Execution Context)的作用域链,在最前面添加一个对象(Variable Object);同理,对于try-catch语句中的catch语句块也类似

阅读原文http://click.aliyun.com/m/34540/