JS查漏补缺——执行上下文、作用域

阿皮想当小怪兽
105 阅读4分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情

简单代码

🤔我们先来看一段代码，思考一下他是怎么运行的？

console.log(a);   //undefined
var a = 1;
var b = 2;
var result = a + b;
console.log(result);  //3

😅为什么a是undefined呢？下面不是已经定义了a=1了吗？
😁 这时候我们就要了解一下JS在执行代码前做了什么导致 a = undefined。

解析过程

在代码被执行之前有一个解析的过程，而在这个过程中JS引擎会创建一个对象（Global Object）下面简称GO

Global Object

  • Global Object里面一般包含当前浏览器环境或node环境所拥有的全局变量
  • 还有一个window指向自己
var globalObject = {
  Date、Array、String、Number、setTimeout、setInterval、window：globalObject....
}

而在开头那段代码里创建的GO是什么样的呢？

var globalObject = {
  Data
  Array
  String
  window: globalObject,
  //自己定义的变量
  a: undefined,
  b: undefined,
  result: undefined
}

运行代码前的工作

为了有层次的运行代码，就要依靠JS引擎内部的执行上下文栈（Execution Context Stack，简称ECS）用来执行全局代码块的调用栈

而ECS这个栈里面会有全局执行上下文（Global Execution Context，简称GEC）（全局代码需要执行时才创建）被放进里面，如图：（图中的VO指的是变量对象，在全局执行上下文中VO是GO）

Snipaste_2022-08-17_16-25-00.png

执行代码

从上到下依次执行代码，往GO里面的变量赋值

Snipaste_2022-08-17_16-35-31.png 所以开头console.log(a) 执行的结果才会是 undefined

有函数的代码

🤔当遇到有函数的代码怎么办呢？

var a = 1;
foo();
function foo(){
  var b = 2;
  console.log("foo"); // foo
}
console.log(a)

解析过程

var globalObject = {
  ...
  //自己定义的变量
  a: undefined,
  foo: 0xa00  //表示JS引擎为foo函数开辟的空间的地址
}

运行代码前的工作

ECS这个栈里面会有全局执行上下文（Global Execution Context，简称GEC）（全局代码需要执行时才创建）被放进里面，如图：（图中的VO指的是变量对象，在全局执行上下文中VO是GO）

Snipaste_2022-08-17_17-11-12.png

执行代码

从上到下依次执行代码，往GO里面的变量赋值

给 a 赋值之后，我们遇到了foo()

函数的执行不是在全局执行上下文中执行，而是在函数执行上下文（Functional Execution Context， 简称FEC）中执行（FEC由 JS引擎 遇到函数自行创建）

函数执行上下文中也有一个VO，不同于全局上下文中的VO，函数中的VO执行完是会被销毁的，所以函数执行上下文中的VO不对应GO，而是对应AO（Activation Object）

如图（还未执行函数里面的内容）： Snipaste_2022-08-17_17-36-20.png 接着就是执行函数里面的内容（赋值，console.log("foo")）执行完毕就被弹出执行上下文栈并且销毁，接着执行GEC剩下的内容

作用域

简单来说，作用域 指程序中定义变量的区域，它决定了当前执行代码对变量的访问权限。

🤔如果在函数中我们找不到变量怎么办？

var a = 1;
function foo() {
  console.log(a)
}
​
function bar() {
  var a = 2
  foo()
}
​
bar()

这段代码中console.log(a)输出的会是什么？
首先我们要知道在AO中找不到要输出的变量就要到父级作用域去找。
如果答案是 2 的话就说明你混淆了作用域和执行上下文的概念，正确答案是 1

在这段代码中，函数foo的父级作用域是全局作用域

函数能够访问到的上层作用域，是在函数声明时候就已经确定了的，函数声明在哪里，上层作用域就在哪里，和拿到哪里执行没有关系。

而对于执行上下文，从上面就可以知道，遇到一个函数就创建一个函数执行上下文，所以执行上下文是不确定的

扩：变量环境、词法环境

上面的讲解是基于ES3版本规范， ES5 规范又对 ES3 中执行上下文的部分概念做了调整，最主要的调整，就是去除了 ES3 中AO和VO，以 词法环境组件（LexicalEnvironment component） 和 变量环境组件（VariableEnvironment component） 替代。

Snipaste_2022-08-17_19-14-11.png

变更前后的本质其实差不多，变更前的只适用于var变量，而变更后则可以适用于let、const和var变量


在 ES6 中，词法环境组件和变量环境的一个不同就是前者被用来存储函数声明和变量（let 和 const）绑定，而后者只用来存储 var 变量绑定。

参考文章：
juejin.cn/post/684490… www.cnblogs.com/MomentYY/p/…

avatar
文章
阅读
粉丝