阅读 573

JavaScript 执行上下文和执行栈

执行上下文是什么和为什么要了解

execution context,是 Javascript 代码被解析和执行所在环境的抽像概念。作为一个前端工程师,除了码代码,还得要知道代码是如何运行的,比如 Javascript 引擎和执行上下文以及调出堆栈之间是怎么工作的;

类型分类

全局执行上下文

可以这么理解,不在函数中的代码都在全局执行上下文中。在此期间,共发生两件事:

  • 创建一个全局对象,这个全局对象就是浏览器中 window;
  • this 指针指向这个对象;

注:一个程序中只有一个全局执行上下文对象,不然就乱套了。

函数执行上下文

在函数调用时创建。想想一个程序可以有多少个函数,没人定义,所以函数上下文是没个数限制的。

Eval 函数执行上下文

运行 Eval 函数中的代码,由于此函数不被 Javascript 开发人员待见,所以接下来的内容就不带它玩了。

总结下,不在函数里的就是全局上下文,其他都是函数执行上下文(因为我们不带 Eval 函数执行上下文)。

执行上下文栈(Execution Context Stack)

栈,具有后进先出结构(LIFO, Last In First Out),具有 push 和 pop 功能。代码执行期间所创建的执行上下文就是它存储的。这么一说,它的作用就提现出来了。那存储执行上下文就是执行上下文栈咯。

问题来了,全局执行上下文和函数执行上下文是什么时候进入执行栈中的呢?

  • 全局执行上下文:当 Javascript 引擎首次读取脚本时创建并推入当前栈;
  • 函数执行上下文:当函数被调用时,Javascript 引擎会创建一个新的执行上下文(因为会有无数个)并推入当前栈;

接下来,Javascript 引擎会执行栈顶端的函数,函数执行完成后就会从栈中弹出,然后执行下一个。

// context-stack-01.js
let name = 'pr';

const firstFunction = () => {
    console.log('first function');
    secondFunction();
    console.log('first function again');
}

const secondFunction = () => {
    console.log('second function');
}

firstFunction();

console.log(name);

// first function
// second function
// first function again
// pr
复制代码

从代码和流程图可见

  • 代码在浏览器加载时,引擎创建一个全局执行上下文,入栈;
  • firstFunction 函数调用时(此时函数内部代码还未执行),引擎创建一个新的函数执行上下文,然后入栈;
  • 接着 secondFunction 函数调用时(此时函数内部代码还未执行),引擎创建一个新的函数执行上下文,然后入栈;
  • secondFunction 函数执行完后,函数执行上下文出栈(销毁);
  • 接着 firstFunction 函数执行完后,函数执行上下文出栈(销毁);
  • 最后全部代码执行完后,全局执行上下文出栈(浏览器关闭时);

为了便于理解,用数组模拟下执行上下文栈的行为

// ESC = execution context stack
ESC = [ globalContext ];
ESC.push(functionContext<firstFunction>);
ESC.push(functionContext<secondFunction>);
ESC.pop();  // secondFunction();
ESC.pop();  // firstFunction();
// globalContext, 直到程序结束才被移除
复制代码

总结

  • 执行栈就这样在拥有和失去中度过(感觉好可怜);
  • 执行栈和 Javascript 引擎是好兄弟(姐妹);

上下文的属性

变量对象

简称 VO(Variable object),是与执行上下文相关的数据域,存储了在上下文中定义的变量和函数声明。

我们已经知道执行上下文分全局执行上下文和函数执行上下文,既然执行上下文都有变量对象,那对应就有全局执行上下文变量对象和函数执行上下文变量对象

全局执行上下文变量对象

这个名字有点长,但是如果叫全局对象,你肯定就觉得熟悉,其实两者是一回事,可以使用 this 来访问(浏览器环境)。

浏览器环境 this 指向 window,node 环境 this 指向 global。

函数执行上下文变量对象

变量对象我们知道是 VO,函数执行上下文变量对象可以叫活动对象(activation object,这里简称 AO),这么称呼的原因是当进入函数执行上下文中,这个执行上下文才被激活,此刻属性才能被访问。

作用域链

我们知道代码是一段一段执行的,这里一段代码指的是执行上下文,而一个程序中有一个全局执行上下文和无数个函数执行上下文(Eval 函数执行上下文我们不带它玩)。所以,通常在函数中,查找变量会先从当前执行上下文的 VO 中查找,如果没有就到其父级执行上下文的 VO 查找,直至全局执行上下文的 VO。这流程所形成的链表就是作用域链(Scope Chain)(是不是有点像原型链,毕竟都是链嘛)。

this 指向

Javascript 特有的一套玩法,不同场景下,指向的对象就不同。

  • 全局范围 this - 全局对象;
  • 函数调用 this - 全局对象;
  • 对象中的方法调用 this - 该方法所在的对象(函数别名除外);
  • 构造函数调用 this - 新创建的对象;
  • 显式设置 apply/call/bind this - 函数第一个参数(即所绑定对象);

第3点中有个函数别名除外,这里解释下

var name = 'I am window';
let obj = {
    name: 'I am obj',
    fn: function(str) {
        console.log(str, this.name);
    }
}
const fn = obj.fn;
obj.fn('obj.fn =>'); // obj.fn => I am obj
fn('fn =>');  // fn => I am window
复制代码

一个字,谁调用了,this 就指向谁(谁动我打谁,哈哈)。

你可以

上一篇:Javascript 堆、栈和队列

下一篇:Javascript 函数节流

关注下面的标签,发现更多相似文章
评论