详解作用域链

前言

在本文中，我们将着重讨论作用域链。首先我们会了解作用域、块级作用域、相关的一些重要概念等前置基础知识，接着我们会通过几个例子来对作用域链进行详细讲解，最后我们还会涉及作用域链延长的问题。在了解完上述知识之后，在本文主要内容的最后，我们还精选了网上几个作用域链相关的题目供小伙伴思考。

作用域详解

作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在Javascript中，变量的作用域有全局作用域和局部作用域两种，局部作用域又称为函数作用域。

那什么又是全局作用域和局部作用域呢？

• 在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域

• 程序最外层定义的函数或者变量

var name = "xinzhuoyue";
function hello(){
 alert(name);
}
function sayHello(){
 hello();
}
alert(name);     //能访问到name
hello();      //能访问到name
sayHello();   //能访问到hello函数，然后也能访问到name

• 所有末定义直接赋值的变量（不推荐）

function hello(){
 name = "xinzhuoyue";
 var word = "helloworld";
}
alert(a);  //能访问到name
alert(b);  //error 不能访问

• 所有window对象的属性和方法    
  
一般情况下，window对象的内置属性都拥有全局作用域， 例如 window.name 、 window.location 、 window.top 等等。

• 局部作用域（函数作用域）

局部作用域在函数内创建，在函数内可访问，函数外不可访问。

function hello(){
      var name = "xinzhuoyue";
      alert(name);
  }
hello(); //函数内可访问到name
alert(name); //error not defined

块级作用域

Javascript没有块级作用域，在其他类C的语言中，由花括号封闭的代码块都有自己的作用域（如果用ECMAScript的话来讲，就是它们自己的执行环境）。对于有块级作用域的语言来说，for语句初始化变量的表达式所定义的变量，只会存在于循环的环境中。而对于Javascript来说，由for语句创建的变量 i 即使在for循环执行结束后，也依旧会存在于循环外部的执行环境中。

• 声明变量

使用var声明的变量会被自动添加到最接近的环境中，在函数内部，最接近的环境就是函数的局部环境；在with语句中，最接近的环境是函数环境。如果初始化变量时没有使用var声明，该变量会被自动添加到全局环境。

function add(num1,num2){
    var sum = num1+num2;
    return sum;
}
var result = add(10,20);//30
alert(sum);//error

编写代码时，不声明而直接初始化变量是一个常见的错误做法，因为这样可能会导致错误。我们建议在初始化变量之前一定要先声明，这样就可以避免类似问题。在严格模式下，初始化未经声明的变量会导致错误。

不规范代码展示：

function add(num1,num2){
    sum = num1+num2;
    return sum;
}
var result = add(10,20);//30
alert(sum);//30

• 查询标识符

当在某个环境中为了读取或写入而引用一个标识符时，必须通过搜索来确定该标识符实际代表什么。搜索过程从作用域链的前端开始，向上逐级查询与给定名字匹配的标识符。如果在局部环境中找到该标识符，搜索过程停止，变量就绪。如果在局部环境中没有找到该变量名，则继续沿作用域链向上搜索。搜索过程将一直追溯到全局环境的变量对象。如果在全局环境中也没有找到这个标识符，则意味着该变量尚未声明。

var name = "xinzhuoyue";
function getName(){
  return color;
}
alert(getName());//xinzhuoyue

调用本例中的函数getName()时会引用变量name。为了确定变量name的值，将开始一个两步的搜索过程。首先getColor()的变量对象，查找其中是否包含一个名为color的标识符。在没有找到的情况下，搜索继续到下一个变量对象（全局环境的变量对象），然后在那里找到了名为name的标识符。因为搜索到了定义这个变量的变量对象，搜索过程宣告结束。在这个搜索过程中，如果存在一个局部的变量的定义，则搜索过程会自动停止，不再进入另一个变量对象。换句话说，如果局部环境中存在着同名标识符，就不会使用位于父环境中的标识符，如下例子：

var name = "xinzhuoyue";
function getName(){
  var name = "weilaoshi";
  return name;
}
alert(getName());//"weilaoshi"

修改后的代码在getName()函数中声明了一个名为name的局部变量。调用函数时，该变量就会被声明。而当函数中的第二行代码执行时，意味着必须找到并返回变量name的值。搜索过程首先从局部环境中开始，而且在这里发现了一个名为name的变量，其值为 weilaoshi 。因为变量已经找到了，所以搜索即行停止，return语句就使用这个局部变量，并为函数会返回 weilaoshi 。也就是说，任何位于局部变量name的声明之后的代码，如果不使用window.color都无法访问全局name变量。如果有一个操作数是对象，而另一个不是，就会在对象上调用valueOf()方法以取得基本类型的值，以便根据前面的规则进行比较。

重要概念

• 某个执行环境中的所有代码执行完毕后，该环境被销毁，保存在其中的所有变量和函数定义也随之销毁（全局执行环境知道应用程序退出–例如关闭网页或浏览器时才会销毁）
• 每个函数都有自己的执行环境。当执行流进入一个函数时函数的环境就会被推入一个环境栈中。而在函数执行之后，栈将其环境弹出，将控制权返回给之前的执行环境。
• 当代码在一个环境中执行时，会创建变量对象的一个作用域链。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端，始终都是当前执行的代码所在环境的变量对象。如果这个环境是函数，则将其活动对象作为变量对象。活动对象在最开始时只包含一个变量，即arguments对象（这个对象在全局环境中是不存在的）。作用域链中的下一个变量对象来自包含（外部）环境，而再下一个变量对象则来自下一个包含环境。这样，一直延续到全局执行环境；全局执行环境的变量对象始终都是作用域链中的最后一个对象。
• 标识符解析是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始，然后逐级地向后回溯，直到找到标识符为止（如果找不到标识符,通常会导致错误发生）

变量和函数的声明

01 - 变量声明

在JavaScript引擎解析JavaScript代码的时候，首先，JavaScript引擎会把变量和函数的声明提前进行预解析，然后再去执行其他代码。

变量的声明只有一种方式，那就是用var关键字声明，直接赋值不是一种声明方式。这仅仅是在全局对象上创建了新的属性(而不是变量)。它们有以下区别：

• 因为它只是一种赋值，所以不会声明提前

alert(a); // undefined
alert(b); // error "b" is not defined
b = 10;
var a = 20;

• 直接赋值形式是在执行阶段创建

alert(a); // undefined, 这个大家都知道
b = 10;
alert(b); // 10, 代码执行阶段创建
var a = 20;
alert(a); // 20, 代码执行阶段修改

• 变量不能删除(delete)，属性可以删除

a = 10;
alert(window.a); // 10
alert(delete a); // true
alert(window.a); // undefined
var b = 20;
alert(window.b); // 20
alert(delete b); // false
alert(window.b); // 仍然为 20，因为变量是不能够删除的。

• 但是，这里有一个意外情况，就是在 eval 的上下文中，变量是可以删除的。
• 有些debug工具也是可以删除的，因为它们使用了 eval()方法来执行代码的。

eval('var a = 10;');
alert(window.a); // 10
alert(delete a); // true
alert(window.a); // undefined

02 - 函数声明

函数的声明有三种方式：

• function name( ){ }直接创建方式
  

function add(a,b){
  return a+b;
}
add(5,4);

• new Funtion构建函数创建

var add=newFunction("a", "b", "return a+b;");
add(4,5);

• 给变量赋值匿名函数方法创建
  

var add = function(a,b){
  return a+b;
}
add(4,5);

后面两种方法，在声明前访问时，返回的都是一个undefined的变量。当然，在声明后访问它们都是一个function的函数。

注意：如果变量名和函数名声明时相同，函数优先声明。

alert(x); // function
var x = 10;
alert(x); // 10
x = 20;
function x() {};
alert(x); // 20

03 - 生命周期

函数的的生命周期分为创建和执行两个阶段。

在函数创建阶段，JS解析引擎进行预解析，会将函数声明提前，同时将该函数放到全局作用域中或当前函数的上一级函数的局部作用域中。

在函数执行阶段，JS引擎会将当前函数的局部变量和内部函数进行声明提前，然后再执行业务代码，当函数执行完退出时，释放该函数的执行上下文，并注销该函数的局部变量。

04 - 什么是AO、VO

英文解释：

AO：Activetion Object（活动对象）

VO：Variable Object（变量对象）

VO对应的是函数创建阶段，JS解析引擎进行预解析时，所有的变量和函数的声明，统称为Variable Object。该变量与执行上下文相关，知道自己的数据存储在哪里，并且知道如何访问。VO是一个与执行上下文相关的特殊对象，它存储着在上下文中声明的以下内容：

• 变量 (var, 变量声明)
  
• 函数声明 (FunctionDeclaration，缩写为FD)
  
• 函数的形参
  

举个例子：

function add(a,b){
  var sum = a + b;
  function say(){
      alert(sum);
  }
  return sum;
}
// sum,say,a,b 组合的对象就是VO，不过该对象的值基本上都是undefined

AO对应的是函数执行阶段，当函数被调用执行时，会建立一个执行上下文，该执行上下文包含了函数所需的所有变量，该变量共同组成了一个新的对象就是Activetion Object。该对象包含了：

• 函数的所有局部变量
• 函数的所有命名参数
• 函数的参数集合
• 函数的this指向

举个例子：

function add(a,b){
  var sum = a + b;
  function say(){
      alert(sum);
  }
  return sum;
}
add(4,5);
//  我用JS对象来表示AO
//  AO = {
//        this : window,
//        arguments : [4,5],
//        a : 4,
//        b : 5,
//        say : ,
//        sum : undefined
//  }

作用域链

现在我们回到主题，作用域链。

当代码在一个环境中执行时，会创建变量对象的一个作用域链(scope chain)来保证对执行环境有权访问的变量和函数的有序访问。作用域第一个对象始终是当前执行代码所在环境的变量对象(VO)

function add(a,b){
    var sum = a + b;
    return sum;
}

假设函数是在全局作用域中创建的，在函数a创建的时候，它的作用域链填入全局对象,全局对象中有所有全局变量，此时的全局变量就是VO。此时的作用域链就是：

//此时作用域链（Scope Chain）只有一级,就为Global Object
scope(add) -> Global Object(VO)
VO = {
    this : window,
    add :
}

如果是函数执行阶段，那么将其activation object（AO）作为作用域链第一个对象，第二个对象是上级函数的执行上下文AO，下一个对象依次类推。

add(4,5);

例如，调用add后的作用域链是：

//此时作用域链（Scope Chain）有两级，第一级为AO，然后Global Object（VO）
scope(add) -> AO -> VO
AO = {
    this : window,
    arguments : [4,5],
    a : 4,
    b : 5,
    sum : undefined
}
VO = {
    this : window,
    add :
}

在函数运行过程中标识符的解析是沿着作用域链一级一级搜索的过程，从第一个对象开始，逐级向后回溯，直到找到同名标识符为止，找到后不再继续遍历，找不到就报错。

看过上面的内容后，可能还有人不懂，我再通熟易懂的解释一遍，先举个例子：

var x = 10;
function foo() {
    var y = 20;
    function bar() {
        var z = 30;
        console.log(x + y + z);
    };
    bar()
};
foo();

上面代码的输出结果为60，函数bar可以直接访问z，然后通过作用域链访问上层的x和y。此时的作用域链为：

//此时作用域链（Scope Chain）有三级，第一级为bar AO，第二级为foo AO,然后Global Object（VO）
scope -> bar.AO -> foo.AO -> Global Object
bar.AO = {
    z : 30,
    __parent__ : foo.AO
}
foo.AO = {
    y : 20,
    bar : ,
    __parent__ :
}
Global Object = {
    x : 10,
    foo : ,
    __parent__ : null
}

作用域链的延长

内部环境可以通过作用域链访问所有的外部环境，但外部环境不能访问内部环境中的任何变量和函数。但有些语句可以在作用域链的前端临时增加一个变量对象，该变量对象会在代码执行后被移除。当执行流进入下列任何一个语句时，作用域链就会得到加长：

• try-catch语句中的catch块

try中的代码捕获到错误以后，会把异常对象推入一个可变对象并置于作用域的头部，在catch代码块内部，函数的所有局部变量将会被放在第二个作用域对象中，catch中的代码执行完，会立即销毁当前作用域。

<html>
<head>
<script type="text/javascript">
    var txt="";
    function message(){
      try{
             adddlert("Welcome guest!")
         }
      catch(err){
         txt="本页中存在错误。\n\n";
         txt+="错误描述：" + err.description + "\n\n";
         txt+="点击“确定”继续。\n\n";
         alert(txt);
       }
}
</script>
</head>
<body>
    <input type="button" value="查看消息" onclick="message()" />
</body>
</html>

• with语句

这两个语句都会在作用域链的前端添加一个变量对象。对with语句来说，会将指定的对象添加到作用域链中。对catch语句来说，会创建一个新的变量对象，其中包含的是被抛出的错误对象的声明。下面看一个例子。

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

原来的作用域链如下：

• window全局对象
  
• bulidUrl的变量对象
  

加入with之后，作用域链如下：

• window全局对象
  
• bulidUrl的变量对象
  
• location对象
  

在此，with语句接收的是location 对象，因此其变量对象中就包含了location对象的所有属性和方法，而这个变量对象被添加到了作用域链的前端。buildUrl()函数中定义了一个变量qs。当在with 语句中引用变量href 时（实际引用的是location.href），可以在当前执行环境的变量对象中找到。当引用变量qs时，引用的则是在buildUrl()中定义的那个变量，而该变量位于函数环境的变量对象中。至于with语句内部，则定义了一个名为url的变量，因而url就成了函数执行环境的一部分，所以可以作为函数的值被返回。

相关题目训练

变量名和函数名一样的情况

console.log(a());// 2
var a = function(){
 console.log(1);
}
console.log(a());// 1
function a(){
 console.log(2);
}
console.log(a());// 1
console.log(b());// reference error

变量提升

function test() {
 console.log(a);// undefined
 console.log(b);// reference error
 console.log(c);// reference error
 var a = b =1;// 等价于 var a=1;b=1;
 let c = 1;
}
test();
console.log(b);// 1
console.log(a);// reference error

严格模式下：

"use strict";
function test() {
 console.log(a);// undefined
 console.log(b);// reference error
 console.log(c);// reference error
 var a = b =1;// 直接抛出语法错误
 let c = 1;
}
test();
console.log(b);// reference error
console.log(a);// reference error

进入严格模式后，b=1这种语法会直接出错，不会变成全局变量

有关闭包

要求：要间隔一秒打印出1-5的数字

解决方法：

• 使用let
  

for(let i=0;i<5;i++){
  setTimeout(function(){
     console.log(i)
  },i*1000); // 1 2  3  4
}

• 使用闭包
  

for (var i =1;i<6;i++) {
  (function(i){
      setTimeout(function(){
          console.log(i)
      },i*1000)
  })(i)
}

题目知识点总结

function、var、let、const的区别：

• function、var声明的变量依附在最近函数作用域或全局作用域，let、const声明的变量依附在最近块级作用域、函数作用域或全局作用域
• function、var声明的变量在编译阶段产生变量提升，且函数优先提升。let、const不会产生变量提升
• function、var在同一作用域重复声明变量，后者会覆盖前者（前者与后者的关系要看编译环节过后的代码）；而let、const 会直接抛出语法错误
• const 声明变量的同时需要赋值，否则抛出语法错误，且变量的指向不能变（但是变量指向的内容可以变）

本文总结

在上述文章中，我们仔细讲解了作用域链的相关知识，小伙伴们学会了吗？快来试试内容部分最后的几个题目吧~

参考资料

• Javascript高级编程设计