执行环境(Execution context,EC)或执行上下文,是JS中一个极为重要的概念

EC的组成

当JavaScript代码执行的时候,会进入不同的执行上下文,这些执行上下文会构成了一个执行上下文栈(Execution context stack,ECS)。

 
EC的组成
  • 变量对象(Variable object,VO): 变量对象即包含变量的对象,除了我们无法访问它外,和普通对象没什么区别。
  • [[Scope]]属性:作用域即变量对象,作用域链是一个由变量对象组成的带头结点的单向链表,其主要作用就是用来进行变量查找。而[[Scope]]属性是一个指向这个链表头节点的指针。
  • this: 指向一个环境对象,注意是一个对象,而且是一个普通对象,而不是一个执行环境。

产生EC的两个阶段

当一段JS代码执行的时候,JS解释器会通过两个阶段去产生一个EC

  1. 创建阶段(当函数被调用,但是开始执行函数内部代码之前)
  2. 创建变量对象VO
  3. 设置[[Scope]]属性的值
  4. 设置this的值
  5. 激活/代码执行阶段
    初始化变量对象,即设置变量的值、函数的引用,然后解释/执行代码。

创建变量对象VO

  1. 根据函数的参数,创建并初始化arguments object
  2. 扫描函数内部代码,查找函数声明(function declaration)
  • 对于所有找到的函数声明,将函数名和函数引用存入VO中
  • 如果VO中已经有同名函数,那么就进行覆盖
//函数声明
function f(){}
  1. 扫描函数内部代码,查找变量声明(Variable declaration)
  • 对于所有找到的变量声明,将变量名存入VO中,并初始化为undefined
  • 如果变量名跟已经声明的形参或函数相同,则什么也不做
//变量声明,必须通过var关键字声明
var example = 'example'

注:步骤2和3也称为声明提升(declaration hoisting)

执行环境的分类

  • 全局执行环境
    在浏览器中,其指window对象,是JS代码开始运行时的默认环境。
    全局执行环境的变量对象始终都是作用域链中的最后一个对象。
  • 函数执行环境
    当某个函数被调用时,会先创建一个执行环境及相应的作用域链。然后使用arguments和其他命名参数的值来初始化执行环境的变量对象。

注:上面的分类也说明了JS中只有两种作用域(作用域即变量对象):全局作用域、函数作用域,并没有块级作用域,更没有对象作用域(见最后的例子,但是with语句是一个例外,其可以临时在作用域链的前端增加一个普通对象)

this

见文章:JS中的this

参考资料

JavaScript的执行上下文, 五星级好文
JavaScript中的this
理解JavaScript中的作用域链
Scope chain
JavaScript高级程序设计

作者:bruce_zhou
链接:https://www.jianshu.com/p/76ed896bbf91
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

理解JS的执行环境的更多相关文章

  1. 深入理解JS:执行上下文中的this(二)

    目录 序言 Function.prototype.bind() 方法 箭头函数 参考 1.序言 在 深入理解JS:执行上下文中的this(一) 中,我们主要深入分析全局环境和函数环境中函数调用的 th ...

  2. 深入理解javascript中执行环境(作用域)与作用域链

    深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...

  3. js的执行环境学习笔记

    js执行全局代码或者执行函数代码的时候,首先进行准备,然后再执行.准备阶段,就是创建执行环境的阶段. 1.执行环境 当一段js代码遇到解释器的时候,比如浏览器打开一段js代码时候,第一件事并不是马上执 ...

  4. 深入理解 JS 引擎执行机制(同步执行、异步执行以及同步中的异步执行)

    首先明确两点: 1.JS 执行机制是单线程. 2.JS的Event loop是JS的执行机制,深入了解Event loop,就等于深入了解JS引擎的执行. 单线程执行带来什么问题? 在JS执行中都是单 ...

  5. (O)JS:执行环境、变量对象、活动对象和作用域链(原创)

    var a=1; function b(x){ var c=2; console.log(x); } b(3); ·执行环境(execution context),也称为环境.执行上下文.上下文环境. ...

  6. 深入理解JS:执行上下文中的this(一)

    目录 执行上下文与执行上下文栈 this 全局环境 函数环境 总结 参考 1.执行上下文与执行上下文栈 (1)什么是执行上下文? 在 JavaScript 代码运行时,解释执行全局代码.调用函数或使用 ...

  7. JavaScript之JS的执行环境和作用域

    一.执行环境是JavaScript中最为重要的一个概念.执行环境定义了变量或函数有权访问的其他数据,决定了他们各自的行为,每个执行环境都有一个与之关联的变量对象(variable object),环境 ...

  8. js的执行环境及作用域

    主要的是执行环境和作用域链. 执行环境 执行环境定义了变量或函数有权访问的其他数据,每个函数都有一个执行环境,每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个变量对象中, ...

  9. 深入理解js立即执行函数

    看过jQuery源码的人应该知道,jQuery开篇用的就是立即执行函数.立即执行函数常用于第三方库,好处在于隔离作用域,任何一个第三方库都会存在大量的变量和函数,为了避免变量污染(命名冲突),开发者们 ...

随机推荐

  1. OO第一阶段纪实

    $ 0 写在前面 在DDL一次次的推动下,历经三个周期的更迭,一个月的时光匆匆而过.谨撰此博文,以记录这一段见证成长的心路历程. $ 0-0 JAVA“一天速成”没有修习过传说中的“OO先导课”,在学 ...

  2. HDU--5269 ZYB loves Xor I (字典树)

    题目电波: HDU--5269 ZYB loves Xor I 首先我们先解决 ai xor aj 每个数转化为二进制  我们用字典树统计 每个节点 0 和 1 的出现的个数 #include< ...

  3. js jquery 数组的合并 对象的合并

    转载自:http://www.cnblogs.com/xingxiangyi/p/6416468.html 1 数组合并 1.1 concat 方法 1 2 3 4 var a=[1,2,3],b=[ ...

  4. GNOME下让QT应用使用adwaita主题统一外观

    效果展示 使用前 使用后 步骤 Arch Linux下使用AUR安装 sudo yaourt adwaita-qt4 adwaita-qt5 sudo pacman -S qtconfig-qt4 q ...

  5. JavaScript深入之执行上下文栈

    如果要问到 javascript 代码执行顺序的话,想必写过javascript的开发者都会有个直观的印象,那就是顺序执行,例如: var foo = function(){ console.log( ...

  6. linux free命令

    Linux上的free命令详解 free命令的所有输出值都是从/proc/meminfo中读出的 total used free shared buffers cached Mem: -/+ buff ...

  7. django中实现组合搜索

    一.简介 # 组合搜索# 技术方向:自动化,测试,运维,前端# 分类:Python Linux JavaScript OpenStack Node.js GO# 级别:初级 中级 高级 骨灰级 有4张 ...

  8. 解决jQuery ajax动态新增节点无法触发点击事件的问题

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

  9. mysql常用快速查询修改操作

    mysql常用快速查询修改操作 一.查找并修改非innodb引擎为innodb引擎 # 通用操作 mysql> select concat('alter table ',table_schema ...

  10. NandFlash学习

    目录 NandFlash学习 概述 原理图(K9F2G08U0C) 启动的引脚配置 命令概述 操作概述 Uboot下操作体验 ID与地址编码 时序初始化 程序设计 忙判断 基本操作 读NAND 擦除 ...