套娃思维:
简单理解js的作用域链(scope chain),就好比一个套娃,最外面的总是当前执行的函数,第二层套娃是最外面(当前执行环境)的外部环境,第三层套娃又是第二层套娃(执行环境)的外部环境,依次类推,最里面的一般是全局执行环境,js在搜索变量时总是从套娃的最外面(当前执行环境)搜索到最里面(全局执行环境)。
当然,既然是链,其中每一个单元,都是一个作用域或者成为执行环境,js背后对每一个这个单元或称执行环境,都约定有一个和其对应的对象,用来保存在这个环境中定义的变量和函数,这个对象就叫变量对象(variable object).
通过例子来理解:
首先分析一下下面这段代码的作用域链
var color="blue";
function changeColor(){
if(color=="blue"){
color="red"
}
else{
color="blue"
}};
changeColor();
console.log("Color now is "+color);
这段代码的执行结果是
Color now is red
分析一下作用域及执行过程:
首先,这段代码有两个作用域,一个是全局作用域,另一个是函数changeColor()的作用域。
当前的执行环境是changeColor(),他处于作用域链最顶端,此时因为执行环境是一个函数,所以将其活动对象作为它的变量对象(variable object),最开始的活动对象只保存一个arguments对象(js函数参数)
全局执行环境出于最低端,它对应的**变量对象(variable object)**保存一个变量
var color="blue";
执行这段代码时,首先执行函数中的部分,由于变量color
并不在当前的执行环境中,所以js会沿着作用域链往下搜索,当在全局作用域链中找到已声明和赋值的变量color
时,继续执行函数中的判断语句,此时color
为blue
,所以将color重新赋值为red
,这次赋值以后,全局作用域中的变量color
就成了red
,所以在全局作用域中执行最后一行代码,结果为Color now is red