JavaScript执行环境及作用域
最后更新于：2022-04-01 11:43:51
**执行环境（executin context)**是JS中最为重要的一个概念。执行环境定义了变量或函数有权访问的其他数据决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object),环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象
，但解析器在处理数据时会在后台使用它。
全局执行环境是最外围的一个执行环境。根据JS实现的宿主环境不同，表示执行环境的对象也不一样。在Web浏览器中，全局执行环境被认为是Window对象，因此所有全局变量和函数都是作为window对象的属性和方法创建的。某个执行环境中的所有代码执行完毕后，改环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境直到应用程序退出-例如关闭网页或浏览器时才会被销毁）；
每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，把控制权返回给之前的执行环境。JS程序中的执行流正是由这个方便的机制控制着。
当代码在一个环境中执行时，会创建变量对象的一个作用链域（scope chain）。作用域链的用途，是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象（activation object）作为变量对象。活动对象在最开始时只包含一个变量，即arguments对象（这个对象在全局环境变量中是不存在的）。作用域链中的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自下一个包含环境。这样,一直延续到全局执行环境；全局执行环境的变量对象始终都是作用域中的最后一个对象。
标识符解析是沿着作用域一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始，然后逐级的向后回溯，直至找到标识符为止(如果找不到标识符，通常会导致错误发生）。
~~~
var color="blue";
function changeColor(){
if(color==='blue'){
color="red"
}else
color="blue";
}
changeColor();
alert("Color is now "+color);
~~~
在这个简单的例子中，函数changeColor()的作用域链包含两个对象：它自己的变量对象（其中定义着arguments对象）和全局环境的变量对象。可以在函数内部访问变量color,就是因为可以再这个作用域链中找到它。
此外，在局部作用域中定义的变量可以再局部环境中与全局变量互换使用。
~~~
var color="blue";
function changeColor(){
var color1="red";
function swapColors(){
var color2=color1;
color1=color;
//这里可以访问所有的变量
}
//这里只能访问color1和color;
}
//这里只能访问color;
changeColor();
alert("Color is now "+color);
~~~
以上代码共涉及三个执行环境：全局环境，changeColor()的局部变量和swapColors()的局部变量环境。方法函数里面可以访问全局变量，但是无法访问比这个方法函数范围更小的局部变量，因为那两个环境都是它的父执行环境。
内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。这些环境之间的联系是线性，有次序的。每个环境都可以向上搜索作用域链，以查询变量和函数名；但任何环境不能通过向下搜索作用域链而进入另一个执行环境。在上面的这个例子中swapColors里包含三个对象：他会先从自己的变量对象中搜索变量和函数名，如果搜索不到则再搜索上一级作用域链。
**延长作用域链：**
虽然执行环境的类型只有两种-全局和局部。但还是有其他办法来延长作用域链。就是在有些语句可以再作用域链的前端临时增加一个变量对象，改变量对象会在代码执行后被移除。再两种情况下会发生这种现像。具体来说，就是当执行流进入下列任何语句的时候，作用域就会得到加长：
try-catch语句的catch块；
with语句;
这两个语句都会在作用域链的前端添加一个变量对象。对with语句来说，会将指定的对象添加到作用域链中。对catch语句来说，会创建一个新的变量对象，其中包含的是被抛出的错误对象的声明。
~~~
var add = function(a,b){
if(typeof a!="number"||typeof b!="number"){
throw{
name:"类型错误",
message:"参数需要number类型"
}
}
}
try{
add(1,"fg");
}catch(e){
alert(e.name);
}
finally{
alert("finally");
}
~~~
当我们执行到if这段代码的时候会创建异常类，我们在throw里面会指定异常的名称和异常的提示。再catch里面会创建一个新的变量对象，但是我们在这个对象里面，可以得到这个所抛出的异常，这就是创建一个新的变量对象，并且它的作用域延长了。
没有块级作用域:
JS没有块级作用域经常会导致理解上的困惑。在我比
较熟悉的Java语言里面，由花括号封闭的代码都有自己的作用域。因而支持根据条件来定义变量。
~~~
if(true){
var color="blue";
}
alert(color)
~~~
执行完这段代码，发现可以打印为blue;在Java中，color变量会在if语句执行完毕后被销毁。而在我们的JS中，if语句和for循环语句会被添加到当前的执行环境也就是全局变量中；
~~~
for(var i=0;i<=10;i++){
}
alert(i); //11
~~~
当执行完循环之后，i的值为11，有人说这里为什么不是10啦。我也很奇怪，在早起的JS里面这个i打印出来应该是10的，后来为了区分开来，在for循环结束之后又累加了一次。
**声明变量：**
使用var声明的变量会自动被添加到最近的环境中，也就是我们所谓的函数局部环境，在with语句中，最接近的环境是函数环境。如果初始化时变量没有使用var声明，该变量为自动被添加到全局环境。
~~~
function add(num1,num2){
sum=num1+num2;
return sum;
}
var result=add(1,2);
alert(sum); //3
~~~
**查询标示符：**
这个很好理解，当我们在某个环境中需要读取而引用一个标识符代表某种特定含义的时候，必须通过搜索来确定该标识符。搜索才有由近到远，由局部到全局，由小到大，如果查询到了相应的标示符将停止搜索；
~~~
var color="blue" ; //标示为黄色
function getColor(){
var color="red"; //标识为红色
return color;
}
alert(getColor()); //red
~~~