我们今天先从概念入手，然后在通过一道例题，完完整整的了解代码执行的过程，在这个过程中会用到作用域和作用域链查找机制；我们在根据概念的带入详细梳理；

思维导图

一、作用域的概念

在某一个上下文中创建函数，除了开辟内存和赋值之外，还会给当前函数设置一个作用域属性[[scope]] ：

当前函数[[scope]] = 当前函数创建时候所在的上下文；

简单来说：当前函数的作用域取决于当前函数创建时候的上下文，它在哪个上下文创建的，那它的作用域就是谁

二、全局变量 VS 私有变量

全局变量：在全局上下文EC(G)中的全局变量对象VO(G)中，存储的变量
私有变量：在函数执行形成的私有上下文EC(XXX)中的变量对象AO(XXX)中，存储的变量；

都有哪些是私有变量呢：

当前函数执行形成的上下文中：声明过的变量或者函数，都会存储到AO(XXX)中，

函数定义的形参变量，也会存储到当前上下文的AO(XXX)中；

三、作用域链查找机制

1、作用域链`scopeChain`的概念

作用域链scopeChain里面包含了：

当前形成的上下文，
以及当前函数所对应的scope作用域;

scopeChain:<当前EC，函数[[scope]]>;

以此来建立链式关系，之后我们在查找变量的时候，就按照这个链式关系找（先找自己上下文的，自己没有，按照作用域链向上级作用域找）

2、作用域链的形成

作用域链是在函数执行的时候形成的；执行函数的具体步骤为：

创建私有上下文EC（有存放私有变量的变量对象AO）

进栈执行（时会把全局上下文压缩到底部）

初始化作用域链 scopeChain:<当前EC，函数[[scope]]>

初始化THIS指向

形参赋值（包含初始化ARGUMENTS）

变量提升

......这里我们省略了一些

代码执行

执行完可能会出栈（也可能不出栈）

当函数执行的时候除了按照我们上面的，还有很多很多操作；

3、作用域链的查找机制

在当前上下文中，代码执行的过程中遇到一个变量时：

首先看它是否是私有的

1.如果是私有的，接下来的所有操作，都是操作自己的，和别人没有关系；

2.如果不是私有的，则按照scopeChain作用域链进行查找，在哪个上下文中找到，当前变量就是谁的

......一直找到全局上下文为止

如果找到EC(G)都找不到：

是获取变量值就会报错，

是设置值，相当于给GO加属性

四、以题为例：详细解析

1、一个小知识点：`var a = b = 12 ;` 和 `var a = 12, b = 12 ;`的区别

在此之前我们先了解一个零散的小知识点：

var a = b = 12 ; 和 var a = 12, b = 12 ;的区别

var a = b = 12;
//=> 相当于：var a = 12; b = 12;  只有第一个带VAR，第二个不带VAR

var a=12, b=12;
//=> 相当于var a = 12;  var b = 12; 连续创建多个变量，可以使用逗号分隔；

2、例题按步骤详解

好了，接下来开始我们的正式内容；

console.log(a, b);
var a = 12,
	b = 12;
function fn() {
	console.log(a, b);
	var a = b = 13;
	console.log(a, b);
}
fn();
console.log(a, b);

此题的操作过程：

第一步：形成执行环境栈ECStack
第二步：形成一个全局上下文EC(G)
第三步：形成全局变量对象VO(G)
第四步：进栈执行
......：这里我们省略一些我们暂时用不到的内容
第五步：变量提升；
- var a ;
- var b ;
- function fn(){...} ； (这里声明+定义fn )
  - 开辟堆内存，生成一个空间地址（这里我们假设堆的地址为AAAFFF000），把函数当作字符串存进堆中；
  - 与此同时，在创建函数的时候还会给函数加一个scope作用域属性
    - 作用域属性是指：当前函数是在哪个上下文中创建的，那它的作用域就是哪个上下文
    - 所以本题的fn[[scope]] = EC(G) ;
  - 把堆的地址AAAFFF000，当作值与 fn 变量关联在一起；
第六步：代码执行；
- 1.console.log(a, b); => undefined / undefined;
- 2.var a = 12 ;
  - 首先创建值12;
  - (此时var a 操作已经在变量提升阶段完成，所以直接跳过)；
  - 把变量a与12关联；
- 3.var b = 12 ; => 同上面var a = 12一样;
- 4.function fn(){...}; => （变量提升阶段已经完成，直接跳过）；
- 5.fn() ; => 让fn函数执行；
  - 形成一个新的私有的执行上下文（我们把它命名为EC(fn1)）;
  - 形成一个私有变量对象AO（我们把它命名为AO(fn1)）;
  - EC(G)被压缩到ECStack底部，同时EC(fn1)进栈执行；
  - 此时是函数执行过程，也是我们真正要讲解内容的开始，我们按步骤命名 ；函数体中在代码执行之前，要做很多很多的事情，我们这里省略不需要的内容
  - 第一步：初始化作用域链：
    - scopeChain:<当前EC，函数[[scope]]> 这里的fn[[scope]]我们在函数创建时，已经知道是EC(G),所以最终的作用域链为=> scopeChain:<EC(fn1),EC(G)>；
  - ......
  - 第二步：变量提升；
    - var a ;
  - 第三步：代码执行；
    - console.log(a, b); => 此时就按照作用域链查找，
      - 此时a已经存在，只不过没有赋值，所以a是自己的私有属性，直接操作自己的即可；=> undefined
      - b不是自己的私有属性，通过作用域链查找，找到EC(G)中的b,此后操作的都是EC(G)中的b; => 12
    - var a = 13 ; => 创建值13，var a跳过,a与13关联；
    - b = 13 ; => 通过作用域链找到全局的b;给b重新赋值13;
    - console.log(a, b); => 13 / 13;
    - 此时函数体中代码以全部执行完。
  - 第四步：出栈销毁，同时全局上下文恢复到原来位置，继续执行。
- 6.console.log(a, b); => 此时打印全局下的a,b;
  - a => 12 ;
  - b => 13 ;
执行完成

3、例题图解析

五、补充几道练习题

1.写出下面代码输出的结果(本题我们画图解析)

console.log(a, b, c);//=> undefined undefined undefined
var a = 12,
    b = 13,
    c = 14;
function fn(a) {
    console.log(a, b, c);//=> 10 , 13 , 14
    a = 100;
    c = 200;
    console.log(a, b, c);//=> 100 , 13 ,200
}
b = fn(10);
console.log(a, b, c);//=> 100 undefined 200

2.写出下面代码输出的结果(本题我们画图解析)

var ary = [12, 23];
function fn(ary) {
    console.log(ary);//=> [12,23]
    ary[0] = 100;
    ary = [100];
    ary[0] = 0;
    console.log(ary);//=> [0]
}
fn(ary);
console.log(ary);//=> [100,23]

3.写出下面代码输出的结果(本题我们画图解析)

var a=1;
var obj ={
   "name":"tom"
}
function fn(){
   var a2 = a;
   obj2 = obj;
   a2 =a;
   obj2.name =”jack”;
}
fn();
console.log(a);//=> 1
console.log(obj);//=> {"name":"jack"}

4.写出下面代码输出的结果(本题我们画图解析)

var i = 20;
function fn() {
    i -= 2;
    var i = 10;
    return function (n) {
        console.log((++i) - n);
    }
}
var f = fn();
f(1);//=>10
f(2);//=>10
fn()(3);//=>8
fn()(4);//=>7
f(5);//=>8
console.log(i);//=>20

5.写出下面代码输出的结果(本题我们画图解析)

//========有形参=======
let x = 5;
function fn(x) {
    return function(y) {
        console.log(y + (++x));
    }
}
let f = fn(6);
f(7);//=>14
fn(8)(9);//=>18
f(10);//=>18
console.log(x);
//========无形参==========
let x = 5;
function fn() {
    return function(y) {
        console.log(y + (++x));
    }
}
let f = fn(6);
f(7);//=>13
fn(8)(9);//=>16
f(10);//=>18
console.log(x);

有形参x的情况
无形参的情况