前言
在说一个概念前,咱们须要确定它的前提,此文以 ECMAScript5 为根底撰写
一句话解释
词法环境就是在 JavaScript 代码编译阶段记录变量申明、函数申明、函数申明的形参的合集
JavaScript 的编译过程
在介绍词法环境前,咱们先看下在 V8 里 JavaScript 的编译执行过程,大抵分为三个阶段
第一步:V8 引擎刚拿到
执行上下文
的时候,会把代码从上到下一行一行的先做分词 / 词法剖析(Tokenizing/Lexing)。分词是指:比方var a = 2;
这段代码,会被分词为:var
a
2
和;
这样的原子符号(atomic token);词法剖析是指:注销变量申明、函数申明、函数申明的形参第二步:在分词完结当前,会做代码解析,引擎将 token 解析翻译成一个 AST(形象语法树),在这一步的时候,如果发现语法错误,就会间接报错不会再往下执行
第三步:引擎生成 CPU 能够执行的机器码
在第一步里有个词法剖析,它用来注销变量申明、函数申明、函数申明的形参,后续代码执行的时候就晓得去哪里拿变量的值和函数了,这个注销的中央就是
Lexical Environment(词法环境)
——深刻了解 JavaScript- 词法环境
总结一下:引擎会在解释 JavaScript 代码之前首先对其进行编译。编译器的一部分工作就是找到所有的申明,并用适合的作用域将它们关联起来
咱们先升到一万米低空,看一下整个 JavaScript 的执行生命周期
JavaScript 的执行生命周期分成两个阶段,编译阶段 和执行阶段
-
编译阶段由编译器实现,它将代码翻译成可执行代码,这个阶段能晓得 全副标识符 在哪里、如何申明的以及 作用域规定
- 编译阶段进行变量申明
- 编译阶段变量申明进行晋升,然而指为 undefined
- 编译阶段所有非表达式的函数申明进行晋升
-
代码执行阶段即执行可运行代码,生成执行上下文,这部分由引擎实现
- 负责
变量赋值
,函数援用
以及执行代码
- 负责
(PS:对 JavaScript 而言,大部分状况下编译产生在代码执行前的几微秒)
咱们要说的 词法环境
就是在编译阶段负责收集的”容器“
留神:JavaScript 采纳的是词法作用域(动态作用域),所以词法环境是与咱们所写的代码构造绝对应,换句话说,咱们将代码写成什么样,词法环境就是怎么样子。词法环境是在代码定义的时候决定的,跟代码在哪里调用没有关系。
词法环境由什么组成
词法环境的外部有两局部组成:环境记录器(Environment Record)、对外部环境的援用(outer)
- 环境记录器记录存储变量、函数申明以及函数申明的形参
- 外部环境的援用意味着它能够拜访其父级词法环境(作用域)
环境记录器又分为两种
- 申明式环境记录(Declarative Environment Record):用来记录间接有标识符定义的元素,比方变量、常量、let、class、module、import 以及函数申明。
- 对象式环境记录(Object Environment Record):次要用于 with 和 global 的词法环境。
其中 申明式环境记录(Declarative Environment Record),又分为两种类型:
- 函数环境记录(Function Environment Record):用于函数作用域。
- 模块环境记录(Module Environment Record):模块环境记录用于体现一个模块的内部作用域,即模块 export 所在环境。
咱们做一个分类图,更加具象地意识词法环境所蕴含的货色
环境记录器很好了解,无非就是变量汇合,那什么是 outer 呢
在之前介绍 作用域 的文章中咱们已经总结过:JavaScript 的作用域是词法作用域,它由函数在那里定义无关
而 outer 就是指向词法环境的父级词法环境(作用域)
咱们举个例子来看一下词法环境的形成元素:
var a = 1;
function foo() {console.log(a);
function bar() {
var b = 2;
console.log(a * b);
}
bar();}
function baz() {
var a = 10;
foo();}
baz();
它的词法作用域关系图如下:
更加具象的关系图如下:
咱们也能够用伪代码来模仿下面代码的词法环境:
// 全局词法环境
GlobalEnvironment = {
outer: null, // 全局环境的外部环境援用为 null
GlobalEnvironmentRecord: {
// 全局 this 绑定指向全局对象
[[GlobalThisValue]]: ObjectEnvironmentRecord[[BindingObject]],
// 申明式环境记录,除了全局函数和 var,其余申明都绑定在这里
DeclarativeEnvironmentRecord: {},
// 对象式环境记录,绑定对象为全局对象
ObjectEnvironmentRecord: {
a: 1,
foo: << function >>,
baz: << function >>,
isNaN: << function >>,
isFinite: << function>>,
parseInt: << function>>,
parseFloat: << function>>,
Array: << construct function>>,
Object: << construct function>>,
...
}
}
}
//foo 函数的词法环境
fooFunctionEnvironment = {
outer: GlobalEnvironment, // 内部词法环境援用全局环境
FunctionEnvironmentRecord: {[[ThisValue]]: GlobalEnviroment, // this 绑定指向全局环境
bar: << function >>
}
}
// bar 函数的词法环境
barFunctionEnvironment = {
outer: fooFunctionEnviroment, // 内部词法环境援用 foo 函数词法环境
FunctionEnvironmentRecord: {[[ThisValue]]: GlobalEnviroment, // this 绑定指向全局环境
b: 2
}
}
// baz 函数的词法环境
bazFunctionEnvironment = {
outer: GlobalEviroment, // 内部词法环境援用指向全局环境
FuntionEnvironmentRecord: {[[ThisValue]]: GlobalEnviroment, // this 绑定指向全局环境
a: 10
}
}
咱们能够看出词法环境的两个重要组成部分,其中 outer 由作用域决定,环境记录器记录所有的变量,当在本词法环境中找不到变量时,就会引着 outer 往父级词法环境中找变量,这就造成了作用域链
变量晋升及函数晋升
就像咱们之前所说,在编译阶段,包含变量和函数在内的所有申明都会在任何代码被执行前首先解决
当你看到 var a = 1;
时,可能会认为这是一个申明。但 JavaScript 实际上会将其看成两个意思:var a = undefined;
和 a = 2;
。第一个定义申明在编译阶段进行,第二个赋值申明会 被留在原地 期待执行阶段
举个例子:
var a = 1;
var b = true;
function foo() {console.log(a);
}
foo();
在代码执行之前,即编译阶段:
a = undefined;
b = undefined;
foo = function () {console.log(a);
};
执行阶段:
a = 1;
b = true;
foo = function () {console.log(a);
};
函数优先
函数申明和变量申明都会被晋升。然而这个值得注意的细节是函数的优先级大于变量
例如上面的代码:
foo();
var foo;
function foo() {console.log(1);
}
foo = function () {console.log(2);
};
<details>
<summary> 答案 </summary>
输入 1 而不是 undefined 或者 2
</details>
这段代码会被引起了解为如下模式:
function foo() {console.log(1);
}
// var foo 被疏忽
foo(); // 1
foo = function () {console.log(2);
};
留神,var foo 只管呈现在 function foo() … 的申明之前,但函数申明的优先级大于变量晋升,即便它写在函数后面,然而还是会以函数为根据展现(变量被疏忽)
foo();
function foo() {console.log(1);
}
var foo = function () {console.log(2);
};
function foo() {console.log(3);
}
<details>
<summary> 答案 </summary>
输入 3
</details>
说到函数申明和变量申明,咱们能够举出很多例子,例如这个例子
function bar() {console.log('bar1');
}
var bar = function () {console.log('bar2');
};
bar();
<details>
<summary> 答案 </summary>
bar2
</details>
调换程序呢:
var bar = function () {console.log('bar2');
};
function bar() {console.log('bar1');
}
bar();
<details>
<summary> 答案 </summary>
bar2
</details>
实质上这些题目绕不开之前俺们说的原理:编译阶段进行函数、变量晋升,执行阶段在原处执行代码。在编译阶段函数 bar
晋升,执行阶段,bar 赋值给 function() {…},输入后果 bar2
var、let、const、function 等都会被晋升(hoist),只是 let、const 不会被初始化,所以提前应用会报 ReferenceError
总结
咱们介绍了词法环境,从它是怎么产生,到它是什么(由什么组成),再到前面的函数、变量晋升
理解词法环境为是咱们下一节—— 执行上下文与调用栈(后续文章更新)打下了根底
参考资料
- 了解 JavaScript 中的执行上下文和执行栈
- JS:深刻了解 JavaScript- 词法环境
- 书:你不晓得的 JavaScript(上卷)
系列文章
- 深刻了解 JavaScript——开篇
- 深刻了解 JavaScript——JavaScript 是什么
- 深刻了解 JavaScript——JavaScript 由什么组成
- 深刻了解 JavaScript——所有皆对象
- 深刻了解 JavaScript——Object(对象)
- 深刻了解 JavaScript——new 做了什么
- 深刻了解 JavaScript——Object.create
- 深刻了解 JavaScript——拷贝的机密
- 深刻了解 JavaScript——原型
- 深刻了解 JavaScript——继承
- 深刻了解 JavaScript——JavaScript 中的始皇
- 深刻了解 JavaScript——instanceof——找祖籍
- 深刻了解 JavaScript——Function
- 深刻了解 JavaScript——作用域
- 深刻了解 JavaScript——this 关键字
- 深刻了解 JavaScript——call、apply、bind 三大将
- 深刻了解 JavaScript——立刻执行函数(IIFE)