JS学习系列 05 - 执行上下文

在我们前面理解了作用域之后,“作用域链”这个概念就产生了。那么作用域链是什么意思,它又是怎么形成的,跟哪些概念有关系,这就是我接下来几章想和大家探讨的内容:执行上下文、变量对象和作用域链。根据顺序我们也可以看出来,想要理解作用域链,执行上下文是我们碰到的第一个坎。

这一章我们就来讨论一下到底什么是执行上下文

1. 定义

当 JS 引擎开始执行预编译生成的代码时,就会进入到一个执行上下文(Executable Code - 简称 EC)。

在 ECMA 标准规范里并没有从技术角度去定义 EC 的具体类型和结构,这个是在实现 ECMAScript 引擎时需要考虑的问题。

但是在逻辑上,我们可以将活动的执行上下文看成一个栈结构。栈底部永远是全局上下文(global context),而顶部就是当前活动的执行上下文。执行到当前代码时,上下文入栈,执行完毕后,上下文出栈。

2. 可执行代码有几种

前面说到当引擎执行到可执行代码的时候,就会将当前上下文压入上下文栈中。那么可执行的代码又分为几种?

在这里,我们先假设定义执行上下文栈是一个数组:

EC = [];

第一种可执行代码 -- 全局代码:
全局类型代码是在加载外部的 js 文件或者本地 <script></script> 标签中的代码。
注意,在全局代码中,并不包含定义在全局环境 function 内的代码

程序启动后进入初始化全局环境:

EC = [
    globalContext
];

第二种可执行代码 -- 函数代码:
当定义的函数被执行时,就进入了函数代码,当前函数上下文被压入 EC 栈中。
注意,在函数代码中,也不包含定义在该函数内部环境 function 内的代码。

例如:

var a = 10;

function foo () {
  var b = 20;
  
  foo();
}

foo();

这个例子中的 EC 是什么样子的呢?

// 初始化
EC = [
  globalContext
];

// 第一次调用 foo 函数
EC = [
  <foo> functionContext,
  globalContext
];

// 在 foo 内递归调用自己
EC = [
  <foo> functionContext - recursively,
  <foo> functionContext,
  globalContext
];

// 继续递归调用自己
EC = [
  ......
  <foo> functionContext - recursively2,
  <foo> functionContext - recursively,
  <foo> functionContext,
  globalContext
];

// 递归会不断调用下去,因为没有结束条件,所以这是一个死循环
// 所以,EC 只会不断增加新的上下文,但是却不会退出

只有每次 return 的时候,才会退出当前执行上下文,相应上下文会从栈中弹出,栈指针会自动移动位置。

注意,当函数没有明确指明 return 什么的时候,默认 return undefined

如果有抛出的异常没有被截获的话,也有可能从一个或多个执行上下文中退出。当所有代码执行完以后,EC 中只会包含全局上下文(global context),当程序退出以后,全局上下文也会退出。

第三种可执行代码 -- eval 代码:
eval 函数在调用的时候会产生上下文。
例如:

eval('var a = 10');

(function foo () {
  eval('var b = 20');
}());

alert(a);    // 10
alert(b);    // ReferenceError,b is not defined 

这个例子中 EC 的变化如下:

// 初始化
EC = [
  globalContext
];

// eval('var a = 10');
EC = [
  evalContext,
  globalContext
];

// eval 执行完毕
EC = [
  globalContext
];

// 立即执行函数 foo
EC = [
  <foo> functionContext,
  globalContext
];

// eval('var b = 20');
EC = [
  evalContext,
  <foo> functionContext,
  globalContext
];

// eval 执行完毕
EC = [
  <foo> functionContext,
  globalContext
];

// foo 执行完毕
EC = [
  globalContext
];

这就是一个典型的逻辑调用上下文栈

在 setTimeout 和 setInterval 函数中的第一个参数也可以传入代码字符串,但是这个一般不会这么去用,所以这里也就不讨论了。

3. 结论

执行上下文环境是我们了解变量对象作用域链的基础,大家一定要好好理解(其实也并不难),下一节我们来讨论变量对象,相信会让大家有一定的收获。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,425评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,058评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,186评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,848评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,249评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,554评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,830评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,536评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,239评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,505评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,004评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,346评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,999评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,060评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,821评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,574评论 2 271
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,480评论 2 267

推荐阅读更多精彩内容