JavaScript 执行环境及作用域-搜云库技术团队

执行环境

###

执行环境（execution context）定义了变量或函数有权访问的其他数据，决定了它们各自的行为。每个执行环境都有一个与之关联的变量对象（variable object），环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象，但解析器在处理数据时会在后台使用它

一般来说js里面存在两种执行环境：全局执行环境和函数执行环境（局部环境），下面我来依次说一下这两种执行环境

全局环境

全局环境是最外围的一个执行环境，哈哈我觉得有一点像武侠小说里各种帮派帮主，如青龙帮，丐帮等不同的帮派，帮主不一样的，组成成员也不一样，（我不知道这里是不是比喻恰当）自然，对于js来说，随着ECMAScript实现的宿主不一样，执行环境的对象也不会一样，在WEB环境中，全局执行环境被认为是window对象,全局函数只有直到应用程序退出，如关闭网页或者浏览器时才会被销毁

函数环境

每一个函数都有自己的执行环境，当 JavaScript 代码执行一段可执行代码(全局代码、函数代码、eval代码)时，会创建对应的执行上下文(execution context)。我们知道在js中代码并不是一行一行的执行的，而是一段一段的执行的，所以当执行流进入一个函数时，函数的环境就会被push进去一个环境栈，执行之后再pop出去

作用域链

在上面的函数环境中我们知道，当JavaScript代码执行一段可执行代码时，会创建对应的执行上下文，对于每一个执行上下文，一般有三种属性即，变量对象（VO），作用域链和this，这篇文章中我对VO,this不做过多介绍,主要是作用域链作用域链的作用是保证执行环境对于它可以访问的变量或者函数进行有序的访问，函数拥有一个内部属性 [[scope]]，当函数创建的时候，就会保存所有父变量对象到其中

一个栗子：


function foo() {
    function bar() {
        ...
    }
}

函数创建时，他们的[[scope]]为：

foo.[[scope]] = [
  globalContext.VO
];

bar.[[scope]] = [
    fooContext.AO, # 这foo是函数，则将活动对象做为变量对象
    globalContext.VO
];

作用域的前端，始终都是当前执行的代码所在环境的变量对象，如果这一个环境是函数，则将活动对象做为变量对象，标识符解析一般是沿着作用域链一级一级的向外冒泡寻找的，也就是在当前作用域没有找到它就去找当前作用域的父级作用域

var color = "blue"; 

function changeColor(){     
if (color === "blue"){    
     color = "red";    
} else
{   
     color = "blue";
    }
} 

changeColor(); 

alert( color); # red

我们可以看出，我们并没有在changeColor里面显示的定义color，但是在changeColor却可以引用color，并且改变颜色为red,这是因为在函数changeColor中包含了两个作用域链即


changeColor.[[scope]] = [
    changeColor.VO,   # 自己的变量对象
    globalContext.VO # 全局变量对象
];

值得我们注意的是，内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。这些环境之间的联系是线性、有次序的。每个环境都可以向上搜索作用域链，以查询变量和函数名；但任何环境都不能通过向下搜索作用域链而进入另一个执行环境

延长作用域链

我们可以通过在作用域链的前端临时加一个变量对象来延长作用域链，如try-catch 语句中的catch（会创建一个新的变量对象），with语句（会将指定的对象添加到作用域链）

with
目的：为了简化多次编写访问同一对象的工作

var qs = location.search.substring(1);
var hostName = location.hostname;
var url = location.href;

使用with之后

with (location){
    var qs = search.substring(1);
    var hostName = hostname;
    var url = href;
}

感觉是不是有一点像vue里面的mapState，mapAction系列

注意！：严格模式下不能使用with语句。

结束！

参考资料

如有错误欢迎各位指出，我会及时更正的，最后十分感谢( ఠൠఠ )ﾉ！！

文章永久链接：https://tech.souyunku.com/19693

JavaScript 执行环境及作用域