cover_image

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

景朝霞 朝霞的光影笔记
2020年02月16日 16:04
图片
文 / 景朝霞
来源公号 / 朝霞的光影笔记
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() {
         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. 请画这个图:原型和原型链

图片

图片


前端笔记 · 目录
上一篇图解 | 作用域和作用域链下一篇图解 | 理解闭包
修改于2020年02月17日
继续滑动看下一个
朝霞的光影笔记
向上滑动看下一个