日常在群里讨论一些概念性的问题,比如变量提升,作用域和闭包相关问题的时候,经常会听一些大佬们给别人解释的时候说执行上下文,调用上下文巴拉巴拉,总有点似懂非懂,不明觉厉的感觉。今天,就对这两个概念梳理一下,加深对js基础核心的理解。
当js引擎遇到这三种类型的代码的时候,都会进行一些准备工作,这些准备工作,专业的说法就叫执行上下文。或者说js引擎遇到这三种类型的代码的时候,就会进入到一个执行上下文。
简而言之,执行上下文是评估和执行javascript代码的环境的抽象概念。每当javascript代码在运行的时候,它都是在执行上下文中运行。执行上下文可以理解为当前代码的执行环境,它会形成一个作用域(╭(╯^╰)╮,作用域就作用域嘛,说得这么拗口,非要搞个什么执行上下文的概念)。
其实没必要刻意去区分可执行代码与执行上下文。个人理解,当别人跟你聊一些概念性的东西,聊到可执行代码,可执行上下文,执行环境的时候,其实他们可能是想说作用域,只不过表述方式不同罢了。
在一个javascript程序中,必定会产生多个执行上下文,javascript引擎会以栈的方式来处理它们,也就是执行上下文栈(很多文章可能会称它为执行栈,执行上下文堆栈,函数调用栈,其实都是差不多的意思)。
关于栈的概念和特性在上一篇博客:已有介绍。
为了模拟执行上下文栈的行为,可以把它定义为一个数组:
ecstack = [];
现在 javascript遇到下面这段代码了
let a = 'hello world'; function first () { console.log('进入 first 函数执行上下文'); second(); console.log('再次进入 first 函数执行上下文'); } function second () { console.log('进入 second 函数执行上下文'); } first(); console.log('进入 全局执行上下文(global execution context)')
当上述代码在浏览器加载时,javascipt引擎创建了一个全局执行上下文并把它压入了执行上下文栈,用 globalcontext表示它,并且只有当整个应用程序结束的时候(浏览器关闭),ecstack才会被清空,所以程序结束之前,ecstack最底部永远有个 globalcontext:
ecstack = [ globalcontext ];
当执行到一个函数的时候,就会创建一个执行上下文,并且压入执行上下文栈,当函数执行完毕的时候,就会将函数的执行上下文从栈中弹出。知道了这样的工作原理,就可以分析出 ecstack的变化过程:
// 伪代码 // first() ecstack.push(<first> functioncontext); // first中调用了second,继续创建second的执行上下文 ecstack.push(<second> functioncontext); // second执行完毕 ecstack.pop(); // first执行完毕 ecstack.pop(); // javascript接着执行下面的代码,但是ecstack底层永远有个globalcontext;
注意:函数中,遇到return能终止可执行代码的执行,因此会直接将当前上下文弹出栈。
例如,看以下这个闭包例子:
function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999
因为f1中的函数f2在f1的可执行代码中,并没有被调用执行,因此执行f1时,f2不会创建新的上下文,而直到result执行时,才创建了一个新的。具体演变过程如下:
// 伪代码: // 全局上下文入栈: ecstack = [ globalcontext ]; // f1 ec入栈: ecstack.push(<f1> functioncontext); // f1 ec出栈: ecstack.pop(); // result ec入栈: ecstack.push(<result> functioncontext); // result ec出栈: ecstack.pop();
在接下来的文章中将梳理创建阶段的这三个步骤。
如对本文有疑问, 点击进行留言回复!!
2020-07-21 html5如何监听veido的全屏 + css的字体间距 + JS的window.open() + 软技能svn与git
html+css+js适合前端小白的实战全解(超详细)——2048小游戏(二)
在使用@angular/cli创建的angular项目上添加postcss等一系列移动端自适应插件
网友评论