JS 作用域链

之前学习JS函数部分时，提到了作用域这一节，但是因为使用材料书不同，今天在读博客的时候发现其实还有一个知识点即作用域链，所以来写一些个人理解和认识加深记忆。

引用：

• JavaScript中的作用域链和闭包

• JS的作用域和作用域链

• 结合代码图文讲解JavaScript中的作用域与作用域链（主要）

---

先上考试代码：

/==========例1==========
  
var scope='global';
function fn(){
  alert(scope);
  var scope='local';
  alert(scope);
}
fn();    //输出结果？
alert(scope);//输出结果？
  
//===========例2==========
  
var scope='global';
function fn(){
  alert(scope);
  scope='local';
  alert(scope);
}
fn();    //输出结果？
alert(scope);//输出结果？
  
//===========例3=========
  
var scope='global';
function fn(scope){
  alert(scope);
  scope='local';
  alert(scope);
}
fn();    //输出结果？
alert(scope);//输出结果？

我当时做时候，卡在了第三题，后面明白了。

• 例1：只要记得变量声明提升，例1应该没什么问题，由于var变量声明提前，所以当调用fn()时，第一个alert应该弹出undefined，之后赋值，再alert出"local"。而函数外的alert之前调用全局变量scope，弹出"global"。

    var scope = "global";
    function fn() {
        var scope;    
        alert(scope);            // undefined
        scope = "local";
        alert(scope);            // local
    };
    fn();
    alert(scope);                // global

---

• 例2：由于函数内没有var声明变量，所以函数内的scope指向的是全局变量scope,那alert当然是全局变量的值啦——"global",之后赋值，再次alert，弹出"local"。此时全局变量scope已经被重新赋值，所以函数外的alert弹出"local"。

---

• 例3：这里先不提，后面就OK了。当时我不知道如果传入实参在函数内是以什么方式存在，不传入值为多少等。

---

板书ing

作用域链：

作用域链（Scope Chain）是javascript内部中一种变量、函数查找机制，它决定了变量和函数的作用范围，即作用域，理解作用域链的作用原理，上一篇文章的三个例子也就能理解了，从而知其然也知其所以然。
作用域链是ECMAScript-262说明文档中的概念，javascript引擎是按ECMAScript-262说明文档去实现的，了解javascript引擎的工作原理有利于我们理解javascript的特性，但绝大多数js程序员不会去了解非常底层的技术，所以阅读ECMAScript-262说明文档，我们可以有一个直观的方式去模拟javascript引擎的工作原理。
本文将通过1999年的ECMAScript-262-3th第三版来说明作用域链的形成原理，将会介绍执行环境，变量对象和活动对象，arguments对象，作用域链等几个概念。2009年发布了ECMAScript-262-5th第五版，不同的是取消了变量对象和活动对象等概念，引入了词法环境（Lexical Environments）、环境记录（EnviromentRecord）等新的概念，所以两个版本的概念不要混淆了。

重点来了！

1. 执行环境（Execution Contexts）

执行环境(Execution Contexts)也被翻译为执行上下文，当解析器进入ECMAScript的可执行代码，解析器就进入一个执行环境，活动的执行环境组成一个逻辑上的栈，在这个逻辑栈顶部的执行环境是当前运行的执行环境。
注：ECMAScript中有三种可执行代码，Global、Function和Eval，全局环境即是Global可执行代码，函数即是Function可执行代码。逻辑栈是一种特殊的数据存储格式，特点是‘先进后出，后进先出'，添加数据会先压入逻辑栈顶部，删除数据必须先从顶部开始删除。

变量对象(Variable Object)、活动对象(Activation Object)和Arguments对象(Arguments Object)
（上面这句话很重要哦）

• 每个执行环境都有一个与之关联的变量对象，当解析器进入执行环境时，就会创建一个变量对象，变量对象保存着在当前执行环境中声明的变量和函数的引用。
• 变量对象是一个抽象的概念，在不同的执行环境中，变量对象有不同的身份，在解析器进入任何执行环境之前，就已经创建了一个Global对象，当解析器进入全局执行环境时，Global对象就充当变量对象，当解析器进入一个函数时，就会创建一个活动对象充当变量对象。

我的理解是：解析器在执行代码时，会遇到不同的执行环境，此时，会创建一个变量对象，里面存放了环境内的变量和对象（函数）引用。

• 当执行环境是变量，则会生成一个Global对象，此时变量对象就是Global对象
• 当执行环境是函数，则会生成一个活动对象（Activation Object）

---

2.解析器处理代码时的两个阶段

我们都知道javascript解析器是一段一段解析处理代码的，为毛？这就要涉及解析器处理代码时的两个阶段，解析代码和执行代码。
当解析器进入执行环境时，变量对象就会添加执行环境中声明的变量和函数作为它的属性，这就意味着变量和函数在声明之前已经可用，变量值为undefined，这就是变量和函数声明提升(Hoisting)的原因，与此同时作用域链和this确定，此过程为解析阶段，俗称预解析。接着解析器开始执行代码，为变量添加相应值的引用，得到执行结果，此过程为执行阶段。

我们还是用栗子谈吧

---

var a=123;
var b="abc";
function c(){
  alert('11');
}

记得之前那句话吗？在解析器进入任何执行环境之前，就已经创建了一个Global对象，当解析器进入全局执行环境时，Global对象就充当变量对象。一开始，JavaScript解析器就已经生成了一个Global Object来充当变量对象，里面存放了全局环境里的变量，对象（函数）等。就如上图所示了，所以这也是为什么我们在函数内部声明变量时，声名会提前，赋值undefined的原因了。到现在为止，执行到这就是预解析的过程也叫解析代码。

然后开始执行赋值等操作，此过程就叫执行过程。

---

再看这个：

function testFn(a){
  var b="123";
  function c(){
    alert("abc");
  }
}
  
testFn(10);

解析器进入函数执行环境时，则会创建一个活动对象作为变量对象，活动对象还会创建一个Arguments对象，arguments对象是一个参数集合，用来保存参数，这就是我们写函数时可以使用arguments[0]等来使用参数的原因。

var a='123';
function testFn(b){
  var c='abc';
  
  function testFn2(){
    var d='efg';
    alert(a);
  }
  
  testFn2();
}
  
testFn(10);

首先，在创建函数testFn时，作用域链内（[[scope]]）就会先填入Global Object对象，图片只例举了全部变量中的一部分。
当解析器进入到testFn的执行环境（执行上下文）时，在将函数的活动对象添加到Global对象之前，注意是之前，形成一个作用域链。

---

然后，解释器进入testFn2函数的执行环境，同样的，首先填入父级的作用域链，就是testFn的[[scope]]]，包括了Global对象、testFn活动对象。之后再把testFn2的活动对象填入到作用域链最顶部，这就是testFn2的作用域链了。

testFn2调用变量a时，首先在当前的testFn2活动对象中查找，如果没有找到就顺着作用域链向上，在testFn活动对象中查找变量a，如果没有找到再顺着作用域链向上查找，直到在最后Global对象中找到为止，否则报错。所以函数内部可以调用外部环境的变量，外部环境不能调用函数内部的变量，这就是作用域特性的原理。

---

大概总结一下：

• 执行环境：(Execution Contexts)也被翻译为执行上下文，当解析器进入ECMAScript的可执行代码，解析器就进入一个执行环境，活动的执行环境组成一个逻辑上的栈，在这个逻辑栈顶部的执行环境是当前运行的执行环境。
• ECMAScript中有三种可执行代码，Global、Function和Eval，全局环境即是Global可执行代码，函数即是Function可执行代码。逻辑栈是一种特殊的数据存储格式，特点是‘先进后出，后进先出'，添加数据会先压入逻辑栈顶部，删除数据必须先从顶部开始删除。
• 变量对象(Variable Object)、活动对象(Activation Object)和Arguments对象(Arguments Object)
• 每个执行环境都有一个与之关联的变量对象，当解析器进入执行环境时，就会创建一个变量对象，变量对象保存着在当前执行环境中声明的变量和函数的引用。
• 变量对象是一个抽象的概念，在不同的执行环境中，变量对象有不同的身份，在解析器进入任何执行环境之前，就已经创建了一个Global对象，当解析器进入全局执行环境时，Global对象就充当变量对象，当解析器进入一个函数时，就会创建一个活动对象(Activation Object)充当变量对象。

---

大致过程：

1. 自动创建Global对象

（当解析器进入全局执行环境时，调用变量和函数时只在Global对象中查找。）

2. 解释器进入执行环境（执行上下文）

（也可理解为执行函数时等等。）

3.生成变量对象

（每个执行环境都有一个与之关联的变量对象，当解析器进入执行环境时，就会创建一个变量对象，变量对象保存着在当前执行环境中声明的变量和函数的引用。）

（变量对象是一个抽象的概念，在不同的执行环境中，变量对象有不同的身身份。）

4. 创建作用域链（执行过程中的预解析、执行阶段）

（每个执行环境都有一个与之关联的作用域链，当解析器进入执行环境时被定义，作用域链是一个对象列表，用来检索各个变量对象中的变量和函数，这样可以保证执行环境有权访问哪些变量和函数）

（解析阶段：当解析器进入执行环境时，变量对象就会添加执行环境中声明的变量和函数作为它的属性，这就意味着变量和函数在声明之前已经可用，变量值为undefined，这就是变量和函数声明提升(Hoisting)的原因，与此同时作用域链和this确定，此过程为解析阶段，俗称预解析。
执行阶段：接着解析器开始执行代码，为变量添加相应值的引用，得到执行结果，此过程为执行阶段。）

这里也就是说，变量对象先于作用域链创建前就以生成完毕？

5.按优先级填入Global对象、活动对象等

6. 整个作用域链创建完成

---

我们回到最初的题目，最后的例3中，调用fn时，并没有传参，所以fn函数的活动对象中没有相关的键值（注意只是没有值，但存在这个属性），第一个alert弹出undefined，之后为其赋值,这时fn函数的活动对象中的scope就有值了，之后alert调用，搜索时自然先从优先级最高的fn活动对象中寻找，然后弹出"local"。
而函数外的alert，依旧只有Global对象，其中的值未曾改变，所以弹出"global"

// undefined local  global

了解作用域和作用域链都更好的帮助了解闭包噢。