练习题 | JavaScript的作用域和作用域链

文 / 景朝霞
来源公号 / 朝霞的光影笔记
ID / zhaoxiajingjing
图 / 自己画

❥❥❥❥点个赞，让我知道你来过~❥❥❥❥

---

【前情提要：点击蓝色字可查看】

1. 题目 | let和var的区别（一、二）
2. 图解 | let和var的区别（一、二）
3. 题目 | 带VAR和不带VAR的区别
4. 图解 | 带VAR和不带VAR的区别
5. 总结 | LET和VAR区别（三、四）
6. 图解 | 作用域和作用域链

0 / 作用域和作用域链

先来念叨几遍的

首先，浏览器在执行代码时，会开辟出一块专门执行代码的栈内存空间：执行栈（Execution Context Stack ）。

然后，进栈把执行上下文（EC）压入执行栈里进行代码执行；执行完以后，没有用了，离开执行栈：出栈。

再来，在全局的执行上下文（EC(G)）会有一个全局对象Global Object在浏览器中会指向window。

再来，在EC(G)中有一个变量存储对象VO；在函数执行上下文EC(某函数)中是活动对象AO存储变量。

函数创建和执行时会发生什么呢？

function fn(){
     
    console.log('公号ID:zhaoxiajingjing');
}
fn(); // ①
fn(); // ②

函数创建时，会初始化它的户口所在地——当前函数的作用域：FN[scope]:VO(G)。即：函数FN的作用域是全局的变量存储对象。

函数执行时，每一次一个函数执行都会创建一个全新的函数执行上下文EC(FN)①、EC(FN)②，AO里面存着函数里面需要的东西：

• 初始化THIS指向
• 初始化作用域链（寻根）：scopeChain:<当前执行上下文的变量对象, 户口所在地执行上下文的变量对象>
• arguments实参集合
• 形参赋值、变量提升…

把EC(G)压缩到ECStack的栈底后，函数进栈执行，当EC(FN)①中代码执行完了，它没有被外界占用的东西，就会出栈等着销毁了。EC(FN)②也执行完出栈后，EC(G)会重新调回来继续执行。

1 / 上题目

1. 请问输出结果是？请画完整的图。

   var n = 1;
   function fn() {
          
       var n = 2;
       function f() {
          
           n--;
           console.log(n);
       }
       f();
       return f;
   }
   var x = fn();
   x();
   console.log(n);
   

2. 请问输出结果是？请画完整的图。

   let x = 1;
   function fn(x) {
          
       return function(y) {
          
           console.log(y + (++x));
       }
   }
   let f = fn(2);
   f(3);
   fn(4)(5);
   f(6);
   console.log(x);
   

3. 请问输出结果是？画出完整的图。

   let x = 1;
   function fn(x) {
          
       return function(y) {
          
           console.log(y + (++x));
       }
   }
   let f = fn(2);
   f(3);
   fn(4)(5);
   f(6);
   console.log(x);
   

2 / 画图画图

输出结果：

1

0

1

【一定要画全了，每画一次就是加深一次印象，后面两道题交给你了~加油呀！】

在当前执行上下文的AO(xxxx)中没有找到变量时，会沿着作用域链查找到上级作用域，如果没有会再向上查找，一直找到VO(G)全局的变量对象上，这种查找机制叫做作用域链查找。

3 / 预告

1. 什么是闭包？闭包有什么作用？

2. 请画这个图：原型和原型链