前端入门16-JavaScript进阶之EC和VO

声明

本系列文章内容全部梳理自以下几个来源:

作为一个前端小白,入门跟着这几个来源学习,感谢作者的分享,在其基础上,通过自己的理解,梳理出的知识点,或许有遗漏,或许有些理解是错误的,如有发现,欢迎指点下。

PS:梳理的内容以《JavaScript权威指南》这本书中的内容为主,因此接下去跟 JavaScript 语法相关的系列文章基本只介绍 ES5 标准规范的内容、ES6 等这系列梳理完再单独来讲讲。

正文-执行上下文EC和变量对象VO

EC:Execution Context,中文翻译执行上下文,也有翻译成执行环境的。

VO:Variable object,中文翻译变量对象。

这两个概念很重要,涉及到作用域以及作用域链的原理。

执行上下文 EC

先说说Android中的上下文:

  • Android

Android 中也有上下文:Context,四大组件都是上下文,还有一个全局的 Application上下文。在 Android 中基本是以四大组件为界限,每创建一个四大组件,都会产生一个上下文,比如每个 Activity 都是独立的上下文。

在 Android 中,上下文 Context 的作用大体上用于标识各种资源的所属,要加载一张图片、创建一个 View、弹一个 Dialog 等等,你需要告诉系统,这些是谁发出的指令,要挂载到哪个上下文,这些资源依赖于上下文的生命周期。

所以才会出现,有时弹 Dialog 或者更新某个 View 时抛异常说 Context 已销毁,因为它需要挂载的上下文已经销毁了,那么就没有上下文来统筹管理这些资源了,自然会抛异常。

  • JavaScript

在 JavaScript 中,上下文是指执行上下文,通俗点理解,代码执行的上下文,所以也有翻译成执行环境,可以通俗的把它理解成一个对象,对象名 EC,表示代码的执行上下文。

既然理解成一个对象,那么就有它创建的时机,在 JavaScript 中,每当要执行不同类型的代码时,就会创建一个执行上下文 EC。

而代码的类型分三种:

  • 全局代码
  • 函数代码
  • eval()执行的代码

最后一种不讨论,全局代码就是指写在函数外的代码,在前端里,当 HTML 加载一个 js 文件时,全局代码就会被执行,那么在全局代码执行前就会先创建一个全局的执行上下文 EC,之后每调用一次函数,要执行函数内的代码时,会再创建一个函数执行上下文 EC。

也就是说,不讨论 eval 的话,那么在 JavaScript 有两种执行上下文,一种是全局执行上下文,一种是函数执行上下文。

而每次创建一个执行上下文时,都会将其放入一个栈结构,这个栈就称为执行上下文栈(ECS),也有翻译成执行环境栈。

所以执行 js 文件代码期间,这个栈底一直是全局执行上下文,直到 js 文件代码执行结束。全局代码执行过程中,每调用一次函数,新创建一个函数执行上下文,就放入栈内。

因此,栈顶就表示当前执行的代码,如果栈顶是全局执行上下文,表示正在执行全局代码;如果栈顶是函数执行上下文,表示正在执行函数内的代码。当函数执行结束时,这个函数执行上下文就从栈中移出。

那么执行上下文(EC)有什么用呢?

用途可多了,跟 Android 不一样,Android 里由于是各种资源的组合使用,但在 JavaScript 中更多的是嵌套函数的变量使用。所以,用途之一就是保存各个变量。

将 EC 理解成一个对象的话,它有两个属性,一个是变量对象(VO),另一个是作用域链(Scope Chain)。对于全局执行上下文,当 HTML 加载一个 js 文件时,就会创建一个全局 EC,此时会创建它的两个属性:变量对象和作用域链。之后,每调用一次函数,创建这次函数执行的上下文,函数内部的变量的使用就依赖于这个函数执行上下文中的变量对象和作用域链。

也就是说,内部函数之所以可以使用外部函数内的变量,之所以可以使用全局变量,都是依赖于当前这个内部函数的执行上下文。

而且,变量之所以会提前声明也是因为执行上下文的因素。这些当讲解了执行上下文 EC 的创建过程就清楚了。

变量对象 VO

变量对象只是一个抽象的概念,可以通俗的理解成保存当前上下文所有变量的对象。

在不同的执行上下文中,它有不同的具体表现。

在全局执行上下文中,变量对象 VO 的具体表现就是全局对象,因为所有的全局变量其实都是全局对象的属性,而变量对象 VO 的作用是要保存当前上下文中的所有变量,所以此时的变量对象 VO 实际上是指向的全局对象。

尤其在前端中,全局对象就是 window,所以全局执行上下文的变量对象 VO = window。

在函数执行上下文中,因为变量对象 VO 是要保存当前上下文中所有的变量,一个函数内的变量包括:形参变量、局部变量、自身函数对象引用变量、arguments、this。

针对函数执行上下文,为了保存这些变量,特意创建了一个对象,称它为活动对象 AO,函数内所需的变量就都保存在 AO 中,所以在函数执行上下文中,变量对象 VO 的具体表现也就是 AO。

小结:变量对象 VO 是一个抽象概念,用于保存当前执行上下文中所有的变量。所以在全局执行上下文中,因为全局对象已经保存着当前上下文所有的变量,所以 VO 在这里的具体实现就是全局对象。在函数执行上下文中,由于要保存函数形参、局部变量、自身函数对象引用变量、arguments、this,所以新创建了一个叫活动对象 AO 来保存,此时 VO 的具体实现就是 AO。

作用域链

每次函数调用时,都会创建一个函数执行上下文 EC,但其中的变量对象 VO 只保存着当前上下文中的变量而已,那么函数内如果需要使用到外部函数的变量,甚至是使用全局的变量时,此时就需要依赖于执行上下文的另一个属性:作用域链。

作用域链本质上,其实是将有嵌套层次关系的执行上下文的 VO 拼接起来。

所以大部分场景作用域链只有两个节点:当前函数执行上下文的 VO –> 全局执行上下文的 VO。所以函数内才可以根据作用域链访问全局内的变量。

当出现函数内再嵌套函数时,此时作用域链就会比较长:

内层函数执行上下文的 VO –> 外层函数执行上下文的 VO –> 全局执行上下文 VO。

至于作用域链是如何将有嵌套层次的执行上下文的 VO 拼接起来,需要借助函数对象的内部属性 [[Scope]],[[]]表示执行引擎为对象创建的内部属性,我们访问不了,也操作不了。具体原理在作用域链一节中讲解。


大家好,我是 dasu,欢迎关注我的公众号(dasuAndroidTv),公众号中有我的联系方式,欢迎有事没事来唠嗑一下,如果你觉得本篇内容有帮助到你,可以转载但记得要关注,要标明原文哦,谢谢支持~


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

推荐阅读更多精彩内容