从头开始学JavaScript (九)——执行环境和作用域

原文:从头开始学JavaScript (九)——执行环境和作用域


一、执行环境：定义了变量或者函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有与之关联的变量对象。

变量对象：保存着环境中定义的变量和函数。

作用域链：保证对执行环境有权访问的所有变量和函数的有序访问。

[b]标识符解析：沿着作用域链一级一级地搜索标识符的过程。[/b]

通过例子来说明执行环境、变量对象以及作用域链：

<script type="text/javascript">
var color = "blue";
function changeColor(){
var anotherColor = "red";
function swapColors(){
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
//color, anotherColor, tempColor
}
//color and anotherColor
swapColors();
}
changeColor();
// color
alert("Color is now " + color);
</script>

上述例子中的执行环境、执行流程：



画的不好，请各位看官见谅。。。。。。。

作用域链：



执行环境就像一个盒子，全局环境是最外面的盒子，里面包含着很多函数的盒子，每个函数的盒子里面又包含着它自己的子函数盒子，打开的时候是从外而内依次线性打开的，如果只打开了全局环境的盒子，那么只能看到全局环境里那些盒子以外的东西，比如全局盒子有两个子盒子（第一个盒子里面有饼干，第二个盒子里面有蛋糕）和一个小玩具，那么你只能拿到玩具，但是拿不到饼干和蛋糕。如果再继续打开了全局盒子的第一个子盒子，那么既能拿到全局变量里的玩具又能拿到饼干，但是没办法拿到蛋糕。

二、作用域

2.1延长作用域链

虽然执行环境只有两种——全局作用域和函数作用域，但是还是可以通过某种方式来延长作用域链。因为有些语句可以在作用域链的顶部增加一个临时的变量对象。
有两种情况会发生这种现象：
1、try-catch语句的catch块；创建一个新的变量对象，其中包含的是被抛出的错误对象的声明。
2、with语句；将指定的对象添加到作用域链中。

<script type="text/javascript">
function buildUrl() {
var qs = "?debug=true";
with(location){
var url = href + qs;
}
return url;
}
var result = buildUrl();
alert(result);
</script>

with会把location对象的所有属性和方法包含到变量对象中，并加入到作用域链的顶部。此时访问href实际上就是location.href。

with语句详解：

function initUI(){
with(document){
var bd = body,
links =  getElementsByTagName("a"),
i = 0,
len = links.length;
while(i<len){
update(links[i++]);
}
getElementById("go-btn").onclick = function(){
start();
};
bd.className = "active"
}
}

这里使用with语句来避免多次书写document，看上去更高效，实际上产生了性能问题。

当代码流执行到一个with表达式时，执行环境的作用域链会被临时改变，此时with的变量对象会被创建添加到作用域链的前端，这就意味着此时函数的所有局部变量都被推入到第二个作用域链中的变量对象，因此访问代价更高了。

所以，在程序中应避免使用with语句，在这个例子中，只要简单的把document存储在一个局部变量中就可以提升性能。

function initUI(){
var doc=document
var bd = doc.body,
links =  doc.getElementsByTagName("a"),
i = 0,
len = links.length;
while(i<len){
update(links[i++]);
}
doc.getElementById("go-btn").onclick = function(){
start();
};
bd.className = "active"

}

catch语句详解：

当try代码块中发生错误时，执行过程会跳转到catch语句，然后把异常对象推入一个可变对象并置于作用域的头部。在catch代码块内部，函数的所有局部变量将会被放在第二个作用域链对象中。

try{
doSomething();
}catch(ex){
alert(ex.message);
//作用域链在此处改变
}

请注意，一旦catch语句执行完毕，作用域链机会返回到之前的状态。try-catch语句在代码调试和异常处理中非常有用，因此不建议完全避免。你可以通过优化代码来减少catch语句对性能的影响。一个很好的模式是将错误委托给一个函数处理，例如：

try{
doSomething();
}catch(ex){
handleError(ex); //委托给处理器方法
}

优化后的代码，handleError方法是catch子句中唯一执行的代码。该函数接收异常对象作为参数，这样你可以更加灵活和统一的处理错误。由于只执行一条语句，且没有局部变量的访问，作用域链的临时改变就不会影响代码性能了。

2.2没有块级作用域

Javscript没有块级作用域。看下面代码：

if(true){
var myvar = "jack";
}
alert(myvar);// jack

根据上面我们讨论的，如果有块级作用域，外部是访问不到myvar的。再看下面

for (var i=0;i<5;i++){
console.log(i)
}

alert(i); // 5

对于有块级作用域的语言来说，i做为for初始化的变量，在for之外是访问不到的，这允分证明了，javascript是没有块级作用域的。