关于javascript:JavaScript-运行机制-串联一堆散装概念

6次阅读

共计 6072 个字符，预计需要花费 16 分钟才能阅读完成。

看上面两段代码，管制台上会输入什么？

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 有肯定意识，如果你想更深刻理解代码执行过程中产生了什么，请往下看。

浏览本文，你将搞清楚以下概念：

this 到底是什么
执行上下文 Execution Context
调用栈 Context Stack
作用域链 Scope Chain
变量对象 Virable Object（VO）和流动对象 Active Object（AO）
词法环境 Lexical Environment 和变量环境 Variable Environment

浏览本文前，你须要以下常识储备

var 和 函数申明 具备晋升的个性，而 const let 函数表达式 没有
js 中作用域的只有 全局作用域 、 函数作用域 ，ES6 中新增了 块级作用域
每个函数在执行时会创立一个流动对象，记录函数调用地位、变量等等

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

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

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

在剖析执行上下文内容之前，还须要理解执行栈

在咱们的代码执行之前，引擎初始化一个 执行栈 ，初始化结束后，将 全局执行环境 压入执行栈，当每当一个函数开始执行，就创立一个 函数执行环境 压入栈，函数执行结束后，将该 函数执行环境 弹出，敞开浏览器时，弹出 全局执行环境

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…

执行环境有两个阶段

创立阶段
激活 / 执行阶段

创立阶段
- 创立作用域链 Scope Chain
- 创立变量对象 Variable Object
- 为 this 赋值
激活 / 执行阶段
- 实现变量调配，变 VO 为 AO，执行代码

创立阶段
- 为 this 赋值
- 创立词法环境 Lexical Environment
- 创立变量环境 Variable Environment
执行阶段
- 实现变量调配，执行代码

我的了解是，生成 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 页

变量对象：存储 js 执行上下文中的函数标志符、形参 argument、变量申明，这个对象在 js 环境下是不可拜访的。
流动对象：存储变量对象 VO 中的申明、形参 argument、函数标识符，与 VO 不同的是，AO 是“激活版”的 VO，其存储的内容是能够被拜访到的

对于二者区别，上面将中伪代码展现

创立 VO 分三步

创立 argument 对象
扫描上下文中的函数申明，以函数名为 key，在堆中对应的地址为 value，记录在 VO 中（波及概念 晋升、堆栈模型）。如果有两个同名函数，当前呈现的为准，VO 中后呈现的函数笼罩先呈现的函数
扫描上下文中 var 变量申明，在以变量名为 key，并初始化 value 为 undefined。若同 var 变量呈现第二个申明，则疏忽并持续扫描

// 以上能够了解
function foo(){ console.log('foo 申明第一次') }
function foo(){ console.log('foo 申明第二次') }
foo()
// 'foo 申明第二次'

ES3 期间变量申明只有 var，还没有 const let

其实 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 指向调用该函数的对象，并不是什么牛鬼蛇神，只是一个小步骤

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 连贯的作用域，不就是 函数定义时的作用域嵌套关系 吗！

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

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

Scope Chain
Variable Object / Active Object
- var 变量申明
- 函数申明
this

构造简略。上面我将介绍 ES5 中的执行上下文，大同小异

官网给出的概念是：词法环境是一种标准类型，基于 ECMAScript 代码的词法嵌套构造来定义标识符与特定变量和函数的关联关系。词法环境由环境记录（environment record）和可能为空援用（null）的内部词法环境组成。

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

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

Laxical Environment 词法环境
- Environment Record 环境记录器
  - 变量申明
  - 函数申明
- Outer 外部环境援用

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

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

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

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

留神 ES6 引入了块级作用域，const let 没有 晋升，在这里是要有体现的

对应两种执行环境（全局执行环境、函数执行环境），环境记录器也有两种，

申明式环境记录器（在函数执行环境中应用）
- 贮存 const let 变量
- 贮存 argument 参数
- 贮存函数申明
对象环境记录器（在全局执行环境中应用）
- 变量申明
- 函数申明

var 申明呢？有不少 var const let 混用的场景啊。

别急，下文中会介绍

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

作用是拜访父级作用域

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

Variable Environment 变量环境
- Environment Record 环境记录器（在函数执行环境中应用）
  - 存储 var 变量申明
- Object environment records 对象环境记录器（在全局执行环境中应用）
  - 变量申明
  - 函数申明

在 ES6 中，词法环境 和变量环境 的一个不同就是前者被用来存储函数申明和变量（let 和 const）绑定，而后者只用来存储 var 变量绑定。

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();

创立全局执行环境
执行 foo()，创立 foo 函数执行环境
执行 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 的词法作用域*

通透！

别忘点赞！???? 非常感谢

转载请表明出处！

傻傻分不清的 javascript 运行机制 – 掘金翻译打算

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

深刻了解 javascript 原型和闭包（完结）- 王福朋

正文完

javascript

发表至： javascript

2020-07-26

0

vue 源码学习笔记三 vue中如何生成虚拟DOM

汉吉斯特Hanjst模板语言及引擎在线文档DocAPI首发

如何查看一个 js, ts 文件模块的依赖树

关于javascript:说说我对-TypeScript-索引签名-理解

关于springboot:搞事情Spring-Boot今天一口气发布三个版本

关于javascript:JavaScript-运行机制-串联一堆散装概念

javascript 运行机制

写在后面

1. 什么是执行上下文

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

1.2 执行栈

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

ES3 执行环境生成标准

ES6 执行环境生成标准

3. ES3 中的 Execution Context

3.1 作用域链 Scope Chain

3.2 变量对象 VO，流动对象 AO

3.3 this

3.4 实战演习一波

3.5 小结一下

4. ES6 中的 Execution Context

4.1 词法环境 Lexical Environment

4.1.1 概念

4.1.2 组成

4.1.3 Environment Record 环境记录器

4.1.4 Outer 外部环境援用

4.2 Variable Environment 变量环境

4.2.1 组成

4.3 实战演练

Reference

站内搜索