JavaScript 运行机制 —— 串联一堆散装概念

微信扫一扫,分享到朋友圈

JavaScript 运行机制 —— 串联一堆散装概念

javascript运行机制

写在前面

看下面两段代码,控制台上会输出什么?

function foo() {
var a = 2;
this.bar();
}
function bar() {
console.log('this.a', this.a);
console.log('a', a);
}
foo();
function foo() {
var a = 2;
bar();
}
function bar() {
console.log('this.a', this.a);
console.log('a', a);
}
foo();

答案是:

两段代码结果相同

this.a undefined
ReferenceError: a is not defined

​ 如果你答对了,恭喜你已经对作用域、this 有一定认识,如果你想更深入了解代码执行过程中发生了什么,请往下看。

阅读本文,你将搞清楚以下概念:

  1. this 到底是什么
  2. 执行上下文 Execution Context
  3. 调用栈 Context Stack
  4. 作用域链 Scope Chain
  5. 变量对象 Virable Object(VO) 和 活动对象 Active Object(AO)
  6. 词法环境 Lexical Environment 和 变量环境 Variable Environment

阅读本文前,你需要以下知识储备

  1. var函数声明 具有提升的特性,而 const let 函数表达式 没有
  2. js 中作用域的只有 全局作用域函数作用域 ,ES6 中新增了 块级作用域
  3. 每个函数在执行时会创建一个活动对象,记录函数调用位置、变量等等

1. 什么是执行上下文

​ 当一个函数被调用时,会创建一个 活动记录 。这个记录会包 含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。这个 活动记录 又称为执行上下文、执行环境

小结:执行上下文和执行环境是一个概念,记录了很多信息

1.1 执行上下文 / 执行环境的分类

  • 全局执行上下文 / 全局执行环境
  • 函数执行上下文 / 函数执行环境

1.2 执行栈

​ 在分析执行上下文内容之前,还需要了解执行栈

​ 在我们的代码执行之前,引擎初始化一个 执行栈 ,初始化完毕后,将 全局执行环境 压入执行栈,当每当一个函数开始执行,就创建一个 函数执行环境 压入栈,函数执行完毕后,将该 函数执行环境 弹出,关闭浏览器时,弹出 全局执行环境

function foo(i) {
if (i < 0) return;
console.log('begin:' + i);
foo(i - 1);
console.log('end:' + i);
}
foo(2);
/*
begin:2
begin:1
begin:0
end:0
end:1
end:2
*/

图片及代码来自
https://juejin.im/post/5c2052…

想有更多理解,请访问 https://www.cnblogs.com/wangf…

2. 执行环境的创建与激活

执行环境有两个阶段

  1. 创建阶段
  2. 激活 / 执行阶段

ES3 执行环境生成规范

  • 创建阶段

    • 创建作用域链 Scope Chain
    • 创建变量对象 Variable Object
    • 为 this 赋值
  • 激活 / 执行阶段

    • 完成变量分配,变 VO 为 AO,执行代码

ES6 执行环境生成规范

  • 创建阶段

    • 为 this 赋值
    • 创建词法环境 Lexical Environment
    • 创建变量环境 Variable Environment
  • 执行阶段

    • 完成变量分配,执行代码

3. ES3 中的 Execution Context

3.1 作用域链 Scope Chain

我的理解是,生成 Scope Chain 时,会扫描函数作用域,注意要与执行上下文区分,函数中访问父级作用域的操作,就是顺着 Scope Chain 实现的。举个例子

var a = 1;
function foo() {
var a = 2;
bar();
}
function bar() {
console.log('a', a);
}
foo();

打印结果如何?

为什么是这个结果?

在执行 bar() 时,生成的执行上下文中没有变量 a 存在,于是,顺着 scope chain 向上寻找父级作用域,于是, 找到了 bar 父级作用域 window 的变量 a,而不是 foo 作用域中的变量 a

现在你大概明白作用域是如何在函数执行时起作用的了吧

也许你对作用域的理解产生动摇,请访问 深入理解javascript原型和闭包(12)——简介【作用域】

Scope Chain 连接的是作用域,而不是执行上下文!

PS:这里的作用域在《你不知道的js》中被叙述为词法作用域,对以上打印结果有质疑的同学,可以检索下 动态作用域 。也可以翻阅《你不知道的js 上卷》第58 59页

3.2 变量对象 VO,活动对象 AO

  • 变量对象:存储 js 执行上下文中的函数标志符、形参 argument、变量声明,这个对象在 js 环境下是不可访问的。
  • 活动对象:存储变量对象 VO 中的声明、形参 argument、函数标识符,与 VO 不同的是,AO 是“激活版”的 VO,其存储的内容是可以被访问到的

对于二者区别,下面将中伪代码展示

创建 VO 分三步

提升
// 以上可以理解
function foo(){ console.log('foo声明第一次') }
function foo(){ console.log('foo声明第二次') }
foo()
// 'foo声明第二次'

ES3 时期变量声明只有 var,还没有 const let

3.3 this

其实 this 的绑定规则很简单, this指向调用该函数的对象 ,如

var a = 1;
var obj = {
a: 2,
foo: foo
}
function foo() {
console.log(this.a);
}
obj.foo(); // 2
foo();

按规则,执行 obj.foo() 时,this 指向obj。执行 foo() 等价于 window.foo() ,所以 this 指向 window

​ 当然,bind apply call 可以改变函数内部的 this 指向,本文不做讨论。我想表明的是,this 很简单,只是执行函数时,生成执行上下文中的一个步骤。this 赋值很有规律, this指向调用该函数的对象 ,并不是什么牛鬼蛇神,只是一个小步骤

3.4 实战演习一波

function foo(param1, param2) {
var name = 'cregskin';
var age = 20;
function bar() {
var name = 'jellyFish'
var age = 20;
}
bar();
}
foo();
// 1. 初始化,创建全局执行上下文
GlobalExecutionContext = {
ScopeChain: null,
VariableObject: { // 创建(js 不可访问)
foo: pointer to foo
},
this: window
}
GlobalExecutionContext = {
ScopeChain: null,
ActiveObject: { // 激活(js 可以访问)
foo: pointer to foo
},
this: window
}
// 2. 执行foo() ,创建 foo() 执行上下文
fooExecutionContext = {
ScopeChain: Global{},
VariableObject: { // 创建(js 不可访问)
name: undefined,
age: undefined,
bar: pointer to bar
}
}
fooExecutionContext = {
ScopeChain: Global{},
ActiveObject: { // 激活(js 可以访问)
name: undefined,
age: undefined,
bar: pointer to bar
}
}
// 3. 执行 bar(),创建 bar() 执行上下文
barExecutionContext = {
ScopeChain: foo{},
VariableObject: { // 创建(js 不可访问)
name: undefined,
age: undefined
},
this: window
}
barExecutionContext = {
ScopeChain: foo{},
ActiveObject: { // 激活(js 可以访问)
name: undefined,
age: undefined
},
this: window
}

怎么样!是不是很通透了,我再插一句话

ES3 中只有全局作用域和函数作用域,执行上下文是函数执行时才生成的。请再次回忆一下,执行上下文的 VO AO 包含的内容,不就是
函数作用域自身中的变量声明和函数声明 吗!Scope Chain 连接的作用域,不就是
函数定义时的作用域嵌套关系

吗!

执行上下文和作用域竟然有如此高度的一致性!妙不可言

3.5 小结一下

列一下 ES3 中执行上下文的结构

  • Scope Chain
  • Variable Object / Active Object

    • var 变量声明
    • 函数声明
  • this

结构简单。下面我将介绍 ES5 中的执行上下文,大同小异

4. ES6 中的 Execution Context

4.1 词法环境 Lexical Environment

4.1.1 概念

官方 给出的概念是:词法环境是一种规范类型,基于 ECMAScript 代码的词法嵌套结构来定义标识符与特定变量和函数的关联关系。词法环境由环境记录(environment record)和可能为空引用(null)的外部词法环境组成。

词法环境在 js 中也有很多别称:词法作用域、作用域

是不是能串起来了!相比 ES3, ES6 中的 词法环境作用域 在命名上有更深的羁绊!

4.1.2 组成

  • Laxical Environment 词法环境

    • Environment Record 环境记录器

      • 变量声明
      • 函数声明
    • Outer 外部环境引用

类比一下之前讲到的 ES3 版本的执行上下文,你的脑中可能有大致的对应关系了

ES3 ES6
Scope Chain Outer
Viriable Object / Active Object Environment Record

哈哈好厉害,我第一看的时候都缕了好久

下面我将介绍Environment Record ,本质上与 VO AO 还是有一些区别的

注意 ES6 引入了块级作用域,const let 没有 提升 ,在这里是要有体现的

4.1.3 Environment Record 环境记录器

对应两种执行环境(全局执行环境、函数执行环境),环境记录器也有两种,

  • 声明式环境记录器(在函数执行环境中使用)

    • 储存 const let 变量
    • 储存 argument 参数
    • 储存函数声明
  • 对象环境记录器(在全局执行环境中使用)

    • 变量声明
    • 函数声明

别急,下文中会介绍

4.1.4 Outer 外部环境引用

这个就不多介绍了,与 ES3 中 Scope Chain 一样。

作用是访问父级作用域

4.2 Variable Environment 变量环境

还记得我们之前埋的坑吗——var 变量存储在哪里?

4.2.1 组成

  • Variable Environment 变量环境

    • Environment Record 环境记录器(在函数执行环境中使用)

      • 存储 var 变量声明
    • Object environment records 对象环境记录器(在全局执行环境中使用)

      • 变量声明
      • 函数声明

在 ES6 中, 词法环境变量环境 的一个不同就是前者被用来存储函数声明和变量( letconst )绑定,而后者只用来存储 var 变量绑定。

4.3 实战演练

function foo() {
const a = 2;
this.bar();
}
function bar() {
console.log('this.a', this.a);
console.log('a', a);
}
foo();

创建作用域链之前需要了解一下作用域

深入理解javascript原型和闭包(12)——简介【作用域】

步骤如下

看到这里,文章开头的那两道题你应该可以解了。 我先给出执行环境的内容

// 1. 初始化,创建全局执行上下文
GlobalExecutionContext = {
Outer: null,
LexicalEnvironment: { // 创建(js 不可访问)
foo: pointer to foo
arguments: []
},
this: window
}
GlobalExecutionContext = {
Outer: null,
LexicalEnvironment: { // 激活(js 可以访问)
foo: pointer to foo,
arguments: []
},
this: window
}
// 2. 执行foo() ,创建 foo() 执行上下文
fooExecutionContext = {
Outer: Global{},
LexicalEnvironment: { // 创建(js 不可访问)
a: <undefined>, // 注意 const 没有变量提升
bar: pointer to bar,
arguments: []
}
}
fooExecutionContext = {
Outer: Global{},
LexicalEnvironment: { // 激活(js 可以访问)
a: <undefined>, // 注意 const 没有变量提升
bar: pointer to bar,
arguments: []
},
this: window
}
// 3. 执行 bar(),创建 bar() 执行上下文
barExecutionContext = {
Outer: Global{},
LexicalEnvironment: { // 创建(js 不可访问)
arguments: []
},
this: window
}
barExecutionContext = {
Outer: Global{},
LexicalEnvironment: { // 激活(js 可以访问)
arguments: []
},
this: window
}

为方便阅读,我把代码拉下来

function foo() {
const a = 2;
this.bar();
}
function bar() {
console.log('this.a', this.a);
console.log('a', a);
}
foo();
  1. 创建全局执行环境
  2. 执行 foo(),创建 foo 函数执行环境
  3. 执行 bar(),创建 bar 函数执行环境

    1. 访问 this.a => window.a,打印 undefined
    2. 访问 a,bar 函数执行环境中找不到,于是顺着 Outer 向上寻找到 window 的 执行环境 ,没有 a 的声明。抛出错误 ReferenceError: a is not defined

注意,这里3中2说 顺着 Outer 向上寻找到 window 的执行环境 ,指的是window的作用域和执行环境已经高度一致了。 严格来说因该是 顺着 Outer 向上寻找到 window 的词法作用域 *

通透!

别忘点赞!:smile:非常感谢

转载请标明出处!

Reference

傻傻分不清的javascript运行机制 – 掘金翻译计划

[[译] 理解 JavaScript 中的执行上下文和执行栈 – 掘金翻译计划]( https://juejin.im/post/5ba321…

深入理解javascript原型和闭包(完结)- 王福朋

微信扫一扫,分享到朋友圈

JavaScript 运行机制 —— 串联一堆散装概念

《使命召唤:战区》开发者再收警告:操控游戏数据必被封禁

上一篇

React学习—React漫谈

下一篇

你也可能喜欢

JavaScript 运行机制 —— 串联一堆散装概念

长按储存图像,分享给朋友