作用域（scope）

1. 什么是作用域

作用域是在运行代码中某些特定部分中变量、函数和对象的可访问性。也就是说，作用域决定了代码区块中变量和其他的可访问性。
ES6之前JavaScript没有块级作用域，只有全局作用域和局部作用域。ES6的到来，为我们提供了块级作用域，可通过命令let和const来体现。

• 所有未定义直接赋值的变量自动声明为全局变量

2. 什么是作用域链

如果想得到在当前的作用域里没有定义的变量（即自由变量）的值，需要向父级作用域（下文有解释）寻找，如果父级没有，会接着向上寻找，如果直到在全局作用域里没有找到，就宣布放弃。这种一层层的关系，就是作用域链。

3. 自由变量取值的理解

无论fn函数在哪里调用，都要到创建fn这个函数的哪个作用域（即静态作用域）里取值。

var a = 10
function fn() {
  var b = 20
  function bar() {
    console.log(a + b)
  }
  return bar
}
var x = fn(),
  b = 200
x() //30

原因是JavaScript是解释型语言，他的执行分为解释和执行两个阶段：

解释阶段：

• 词法分析
• 语法分析
• 作用域规则确定

执行阶段：

• 创建执行上下文
• 执行函数代码
• 垃圾回收

也就是说：

• 作用域在函数定义的时候就确定的，不会改变。
• 执行上下文时this的指向是执行时确定的，可随时改变。

目录

1、作用域

2、作用域链

3、自由变量

4、执行环境

5、执行流程

6、执行栈

1、作用域

    <script>
        var a = 1;
        var b = 2;

        function fn(x) {
            var a = 10;

            function bar(x) {
                var a = 100;
                b = x + a;
                return b;
            }
            bar(20);
            bar(200);
        }
        fn(0);
    </script>

2、作用域链

各个作用域的嵌套关系组成一条作用域链。例子中 bar 函数的作用域链式 bar -> fn -> 全局， fn函数保存在作用域链式 fn -> 全局

作用域链主要是进行标识符（变量和函数）的查询，标识符解析就是沿着作用域链一级一级的搜索标识符的过程，而作用域链就是保证对变量和函数的有序访问。

（1）如果自身作用域中声明该变量，则无需使用作用域链

在上面的例子中，如果要在 bar 函数中查询变量 a ，则直接使用 LHS 查询，赋值为 100 即可。

（2）如果自身作用域中未声明该变量，则需要使用作用域链进行查找

3、自由变量

在当前作用域中存在但未在当前作用域中声明的变量叫自由变量 。如 bar 函数中的变量 b 就是一个自由变量。

注意：在程序中如果存在自由变量，那么一定存在作用域链。

4、执行环境

执行环境（ execution context ）也叫上下文、执行上下文环境。每个执行环境都有一个与之关联的变量对象（variable object ），环境中定义的所有变量和函数都保存在这个对象中。

JavaScript 代码执行的环境非常重要，而执行环境可以归纳为以下三种：

（1）全局代码（ Global Code ）  ： 代码首次执行时的默认环境

（2）函数代码（ Function Code ）  ： 程序执行到函数体内时

（3）Eval 函数代码（ Eval Code ）  ： 内置 Eval 函数计算的字符串

    <script>
        var a = 1;
        var b = 2;
 
        function fn(x) {
            var a = 10;
 
            function bar(x) {
                var a = 100;
                b = x + a;
                return b;
            }
            bar(20);
            bar(200);
        }
        fn(0);
    </script>

以上述代码为例来说明：在 fn 这个函数中保存有 x、a、bar 环境变量，另外还保存了this、arguments 环境变量。

5、执行流程

所谓执行流，就是程序执行的顺序。

它的执行顺序为：

先执行 var a = 1 ，然后再执行 var b = 2 ，接下来执行 fn(0) ，再执行 var a = 10 ，再执行 bar(20)，再执行 var a = 100 ，再执行 b = x + a ，再执行 return b ，再执行 bar(200) ，再执行 var a = 100，再执行 b = x + a ，再执行 return b ，最后程序结束。

JavaScript 的运行时流程图如下：

6、执行栈

当打开网页或浏览器时， 宿主环境 会将代码传递给 引擎 去执行，引擎首先会创建一个全局执行环境。全局环境中的代码自上而下有顺序的执行，当遇到一个函数时，函数的环境被创建，函数中

的代码开始执行；而在函数执行之后，控制权又返还给之前的环境。 ES 这种类似于 " 栈 " 的控制

机制，称为 执行栈 。简单的说，执行环境栈就是一个压栈和出栈的过程。

（1） 宿主环境：浏览器或者 Node 环境。

（2）引擎：从头到尾负责整个 JavaScript 代码的编译及执行过程。

（3）栈：一种遵循 " 后进先出 " 原则的有序数据集合，可以简单理解为使用 push() 和 pop() 操作数组。

下面以示例来进行说明：

    <script>
        console.log(1);

        function pFn() {
            console.log(2);
            (function cFn() {
                console.log(3);
            }());
            console.log(4);
        }
        pFn();
        console.log(5); 
        // 输出：1 2 3 4 5
    </script>

示意图：

 

一、原型链

每一个构造函数都有一个prototype属性，这个属性就叫原型对象。

每一个构造函数new出来的对象都有一个–proto–属性，这个属性指向原型对象。

<script>
   function Car(){
           //实例属性：
          //this.produce = ‘chevrolet‘,
          this.price = 8800000;
       }
          //原型属性：
       Car.prototype.produce = "BMW";
       var chevrolet = new Car();
       console.log(chevrolet.produce,chevrolet.price);//BMW 8800000  
       console.log(chevrolet==Car.prototype);//false;  构造函数new出来的对象和构造函数的原型对象不是同一个对象。
       console.log(chevrolet.produce==Car.prototype.produce);//true;
       /*构造函数new出来的对象和构造函数的原型对象不是同一个对象,为什么构造函数new出来的对象能获取到构造函数原型对象的
       属性：因为每一个构造函数new出来的对象都有一个--protot--原型链，该原型链可以把new出来的对象和原型对象连接在一起。
       */
</script>

<script>
//    function Car(){
//        //实例属性：
//       this.produce = ‘chevrolet‘,
//       this.price = 8800000;
//    }
//    var chevrolet = new Car();
//    console.log(chevrolet.produce,chevrolet.price);//chevrolet 8800000


//    function Car(){
//        //实例属性：
//      // this.produce = ‘chevrolet‘,
//       this.price = 8800000;
//    }
//    //原型属性：
//    Car.prototype.produce = "BMW";//prototype相对于构造函数而言，写法：构造函数名.prototype.属性
//    var chevrolet = new Car();
//    console.log(chevrolet.produce,chevrolet.price);//BMW 8800000

//    function Car(){
//        //实例属性：
//       this.produce = ‘chevrolet‘,
//       this.price = 8800000;
//    }
//    //原型属性：
//    Car.prototype.produce = "BMW";
//    var chevrolet = new Car();
//    console.log(chevrolet.produce,chevrolet.price);//chevrolet 8800000  原型链的解析过程：先找实例属性，再找原型属性。

   function Car(){
       //实例属性：
      //this.produce = ‘chevrolet‘,
      this.price = 8800000;
   }
   //原型属性：
  // Car.prototype.produce = "BMW";
   var chevrolet = new Car();
   Object.prototype.produce = ‘Audi‘;
   console.log(chevrolet.produce,chevrolet.price);//Audi 8800000  
   //原型链的解析过程：先找实例属性，再找原型属性,若实例属性和原型属性都不存在，则找Object的原型属性。

</script>

二、作用域链

全局作用域、局部作用域。

<script>
   var num = 10;
   function fn(num){
       num = 20;
   }
   fn();
   console.log(num);//10
   //向上查找，在函数体内找到同样的变量，操作的就是局部，否则是全局。
   //题解：1.找var,fn-->2.逐行解析代码：全局变量num;遇到函数跳过；调用函数，解析函数体：变量num向上查找，在函数体内
   //找到形参num,所以此处num是局部变量，因此输出结果为全局变量num=10。
</script>

<script>
   var num = 10;
   function fn(){
       num = 20;
   }
   fn();
   console.log(num);//20
   //题解：1.找var,fn——>2.逐行解析代码：全局变量num;遇到函数跳过；调用函数，解析函数体：变量num向上查找，在函数体内
   //没有找到num,继续在全局范围内找，找到全局变量num,并将num=20赋值于全局变量，因此输出结果为全局变量num=20。
</script>

<script>
    var num = 10;
   function fn(){
     var num = 20;//在函数体内部使用var明确定义的变量是私有变量。
   }
   fn();
   console.log(num);//10
   //题解：函数调用后，函数体内的变量会被销毁，所以输出结果10。
</script>

三、原型链和作用域链的区别：

原型链：原型链作用在构造函数上，原型链操作的是构造函数的属性：实例属性和原型属性；

作用域链：作用域链作用域普通函数上，操作的是全局变量和局部变量。

总结