
## 令人崩溃的 JavaScript
在JavaScript风头还不盛行的时候，我的一位博学的大学老师曾经说过：“相较于Java，C#这些高级（编程）语言，JavaScript可以称得上是超级语言，最终凡是能够使用JavaScript实现的事物，都会被JavaScript所实现”。不过我想展示的是以下JavaScript代码和其运行结果。
```javascript
console.log(typeof NaN)  // 输出 'number'
console.log(typeof null) // 输出 'object'
console.log(99999999999999999999) // 输出 100000000000000000000
console.log(0.5 + 0.1 == 0.6) // 输出 true
console.log(0.1 + 0.2 == 0.3) // 输出 false
console.log(Math.max()) // 输出 -Infinity
console.log(Math.min()) // 输出 Infinity
console.log([]+[]) // 输出空字符串 ''
console.log([]+{}) // 输出 '[object Object]'
{}+[] // 运行结果为 0
console.log(true + true + true) // 输出 3
console.log(true - true) // 输出 0
console.log(true == 1) // 输出 true
console.log(true === 1) // 输出 false
console.log((!+[]+[]+![]).length) // 输出 9
console.log(9 + '1') // 输出 '91'
console.log(91 - '1') // 输出 90
console.log([] == 0) // 输出 true
console.log(010 - 03) // 输出 5
console.log([,,,].length) // 输出 3
console.log("㶷" === "𤈎") // 输出 false
console.log("㶷".length) // 输出 1, 这个"㶷"和下面的"𤈎"在编码上不是一个字
console.log("𤈎".length) // 输出 2
console.log("👩‍❤️‍💋‍👩".length) // 输出 11
console.log("👩‍❤️‍💋‍👩".split()) // 输出 ['👩‍❤️‍💋‍👩']
console.log("👩‍❤️‍💋‍👩".slice(0,2)) // 输出 '👩'
console.log([..."👩‍❤️‍💋‍👩"]) // 输出 ['👩', '‍', '❤', '️', '‍', '💋', '‍', '👩']
```
上述代码主要来源于一张“Thanks for inventing JavaScript” 的图片，图片展示了JavaScript的创造者布兰登·艾克（Brendan Eich）对JavaScript初学者意味深长的微笑。上述代码中展示的丑陋的弱类型造成的类型转换和字符编码怪异行为只是JavaScript令人崩溃的一角。布兰登·艾克仅用十天完成了，也是这十天的工作，造就了JavaScript后来难以改观以及不断在改观的一系列怪异行为。

## JavaScript 诞生
最初，在最早流行的图形接口网页浏览器上，只能加载静态形式的HTML网页，不支持网页的任何动态行为。网景公司的创始人马克·安德森认为HTML需要一种胶水语言，让网页设计师和兼职程序员可以很容易地使用它来组装图片和插件之类的组件，且代码可以直接编写在网页标记中。公司最初的计划是把Java语言或者Scheme语言嵌入到Netscape Navigator浏览器中，不过经过一系列的讨论，公司采纳了由布兰登·艾克设计的新的语言，这就是最初的JavaScript。艾克在1995年5月仅花了十天时间就把原型设计出来了。最初命名为Mocha，1995年9月在Netscape Navigator 2.0的Beta版中改名为LiveScript，同年12月在Netscape Navigator 2.0 Beta 3中部署时又被重命名为JavaScript。之所以采用JavaScript这个名字，是因为当时Java语言热度正当时，网景公司为了蹭热度将其命名为JavaScript。但从技术角度来看，JavaScript和Java是两套不相干的高级编程语言。

伴随着JavaScript的支持，Netscape Navigator浏览器在市场占有上大获全胜，随后，微软对Netscape Navigator解释器进行了逆向工程，创建了JScript，推出Internet Explorer浏览器。这时浏览器端开发语言并没有语言标准化微软在JScript中加入了不少的专属对象。1996年11月，网景正式向ECMA（欧洲计算机制造商协会）提交语言标准。1997年6月，ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262。JavaScript成为了ECMAScript最著名的实现之一。那时，除了JavaScript，ECMAScript规范还有其余的语言实现，比较知名的就是ActionScript和微软的JScript。

之后，随着行业标准协会和各大浏览器厂商的不断努力下，语言标准一代代丰富，浏览器特性一次次加强，JavaScript逐渐走向成熟，慢慢成为如今的模样。目前，我们可以暂时为JavaScript下一个如此的定义：
>JavaScript是一门基于原型，且函数作为头等公民的多范式高级“解释型”编程语言，它支持面向对象程序设计、指令式编程和函数式编程。它提供方法来操控文本、数组、日期以及正则表达式等。不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它由Ecma通过ECMAScript实现语言的标准化，被世界主流浏览器支持。

这个定义来源于维基百科。我们在这里把“解释型”三个字加上引号，因为自从谷歌在Chrome浏览器上推出V8 JavaScript引擎以来，引入了及时编译（英语：Just-in-time compilation，缩写为JIT）机制，大大提高了JavaScript引擎的运行速度。对于JavaScript的JIT机制，有机会我们再专门讨论。ECMAScript标准怎么一代代发展的呢？我们也再单开[一篇](/posts/ecmascript-history)。

一般来说，完整的JavaScript包括以下几个部分：
+ ECMAScript，描述了该语言的语法和基本对象；
+ 文档对象模型（英语：Document Object Model，缩写DOM），描述处理网页内容的方法和接口；
+ 浏览器对象模型（英语：Browser Object Model，缩写BOM），描述与浏览器进行交互的方法和接口。

正是JavaScript这样的诞生和发展的方式，以及JavaScript面对的问题场景，决定了JavaScript开发语言的设计特点，包括它的缺陷。

## JavaScript 特点
根据JavaScript面对的问题领域（Web前端脚本）、设计的历史背景以及发展脉络，造就了JavaScript具备以下一些特点。
+ 是一种“解释性”脚本语言（代码不进行预编译）。在V8 JavaScript 引擎出现后这一状况已改变；
+ 万物皆对象。JavaScript 变量中除了七种原始类型数据，其余都可视为对象，包括数组和函数。而其中原始类型亦可封箱为对象类型。所有对象类型拥有同一个原型'Object'。
+ 函数是头等公民
+ 弱类型语言及动态化
+ 主要用来向HTML页面添加交互行为；
+ 可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。
+ 事件驱动
+ 跨平台。JavaScript运行在浏览器环境下或者在服务端V8 JavaScript引擎环境下，具备平台无关性。
+ 自动化的内存分配和回收
+ 服务端的异步IO操作

这些特点大部分是设计者有意为之，它们造就了JavaScript的强大和社区的活跃，同时也带来了很多的语言设计问题。

## JavaScript 的缺陷
在最初JavaScript产生的时候，网景公司决策层希望这个网页脚本语言是面向对象的，需要“看上去与Java足够相似”。而它的作者布兰登·艾克的主要方向和兴趣是函数式编程，他一直思考的是Scheme语言作为网页脚本语言的可能性。艾克仅用10天就完成了JavaScript的初版设计并向公司交差。他的设计思路大体是这样的：
>
>（1）借鉴C语言的基本语法；\
>（2）借鉴Java语言的数据类型和内存管理；\
>（3）借鉴Scheme语言，将函数提升到"第一等公民"（first class）的地位；\
>（4）借鉴Self语言，引入原型（prototype）机制来扩展对象。
>

最终，JavaScript语言成了函数式编程和面向对象编程两种风格的混合简化物。这造成了一系列的问题，除了文前提到的弱类型造成的类型转换问题和字符编码问题，JavaScript还存在其它一些大大小小的设计问题。下面我们简述一些。

### ❗弱类型造成的变量类型隐式转换问题
+ 二元运算符`+`会把两个操作数转换为字符串，除非两个操作数都为数字类型;
+ 二元操作符`-`会把两个操作数转换为数字类型；
+ 一元操作符，包括`+`和`-`，都会把操作数转换为数字。
+ `==`运算导致的隐式转换问题
### ❗`var` 的作用域问题
`var` 声明的变量会使变量的作用域提升，这给开发人员带来困扰。
### ❗原型机制中`__proto__`性能陷阱
JavaScript使用原型机制管理引用类型，引用类型（对象）的扩展也主要是基于原型机制。原型模式有其好的一面，减少了类型的种类，提高了开发人员对不同对象的管理效率，但原型模式也有其有限制的一面。
### ❗`this` 的动态作用域问题
在JavaScript中，this指针不是函数声明时定义的，而是函数运行时绑定的，它的值取决于函数如何被调用，并且不能够被更改。JavaScript运行在严格模式或者非严格模式时，this的值也略有不同。
### ❗数组与`object`纠缠不清的关系
数组也属于对象，JavaScript中数组相比较其他语言的数组，可以说它不是真正的数组，只是一个类似于列表的高阶对象。这造成了一些问题，例如`for in`操作遍历的是数组的下标，而非数组的值，这一点很反直觉。另外数组对象的`length`属性是可修改的，并且`length`的修改回影响数组元素的值。
### ❗虚假的OO编程
ES6之前JavaScript是没有`class`的定义的，ES6中的`class`的本质也是JavaScript中的`Function`。JavaScript能够完成对象的封装，能够基于原型机制支持面向对象编程范式，原型机制和类机制在工作上的确有很大不同，说JavaScript面向对象编程是虚假的是编程是一种带着“类信仰”的偏执。在JavaScript中，`Function`也是对象，凡是对象，都可以基于原型机制进行扩展，开发人员也是基于此来实现构造`Function`的继承机制。
### ❗单线程运行模式造成的回调地狱
JavaScript一般来说是单线程的。为了解决并发和异步问题，开发人员不得不使用回调函数，但是当回调函数食用过多的时候，会极大影响代码可读性和逻辑，一不小心也会触发函数中`this`指向问题，这种情况被称为回调地狱。直到Promise对象、Generator 函数、async 函数的出现，回调地狱的问题才得到改观。
### ❗字符编码问题
在JavaScript语言出现的时候，还没有UTF-16编码，因此只能采用UCS-2这种编码方案。造成所有字符在这门语言中都是2个字节，如果是4个字节的字符，会当作两个双字节的字符处理。后续ECMAScript不得不想方设法去修复这一问题。
### ❗不支持命名空间，难以模块化
JavaScript设计之初主要用作前端脚本语言，运行时不仅包含很多全局变量，对变量作用域控制问题也不那么严肃，并没有考虑模块问题。最初，开发人员通过立即执行函数（英语：Immediately invoked function expression，缩写IIFE）和闭包机制解决JavaScript模块化问题，直到CommonJS、AMD、CMD、ES Modules 的出现。
### ❗同时拥有`null`和`undefined`
`null`属于对象（object）的一种，意思是该对象为空；undefined则是一种数据类型，表示未定义，两者非常容易混淆。`typeof null === "object"`，这是一个相当反直觉的特性。`null`可能是被错误地标记为对象，但是修复它会导致很多现有JavaScript程序崩溃，所以一直保留至今。
### ❗怪异的`NaN`
`NaN`（Not a number）是一种数字，表示超出了解释器的极限。虽然JavaScript对于`NaN`的实现完全符合IEEE 754标准的实现，但是请看下面代码及其表现。
```javascript
console.log(NaN === NaN); // 输出 false
console.log(NaN !== NaN); // 输出 true
console.log(1 + NaN); // 输出 NaN
console.log(typeof NaN); //输出 "number"
```
做`NaN`判断的时候请使用`Number.isNaN()`。
### ❗自动插入分号
对于压缩的JavaScript代码，其有一个机制就是会尝试自动插入分号来修正有缺损的程序。这个机制容易产生错误。
请看下面代码
```javascript
function foo() {
	return
  {
     value: 1
  };
}
console.log(typeof foo()); // 输出 "undefined"
```
你可能会认为它的输出结果是"object"，但是结果却是"undefined"。原因是解释器自动在return语句后面加上了分号。上面代码其实等价于如下代码。
```javascript
function foo() {
	return;
  {
     value: 1
  };
}
console.log(typeof foo()); // 输出 "undefined"
```
## 最后
这些JavaScript缺陷伴随着JavaScript特点的造就而造就，随着JavaScript的历史发展而变化，笔者在这里列举它们并非要证明JavaScript是一门糟糕的编程语言。在这里列举它们，是为了更好地理解JavaScript。JavaScript很强大，但只有开发人员更好的理解它，才能发挥出它的威力，编写更多给世界带来幸福感的代码。后续，笔者会围绕JavaScript这些特点和缺陷，展开对JavaScript的剖析和探讨，在这个过程中，期望笔者和读者一道，在前端编程上，更进一步。


介绍了JavaScript编程语言的起源、特点，以及设计问题。

JavaScript 起源


## JavaScript 之 ECMAScript 版本速览
ECMAScript自1997年正式被发布为标准后，一直持续有新版本制定。

目前来讲，ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，英文：European Computer Manufacturers Association）在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛，我们常常称ECMAScript为JavaScript或JScript，后两者是ECMA-262标准的实现和扩展。

以下是到目前为止ECMAScript已发布的版本：
|  版本   | 正式名称  | 发布时间  | 与前版本的差异  |
|  ----  | ----  | ----  | ----  |
| 1  | ECMAScript 1 | 1997年6月 | 第一版 |
| 2  | ECMAScript 2 | 1998年6月 | 格式修正，以使得其形式与ISO/IEC16262国际标准一致 |
| 3  | ECMAScript 3 | 1999年12月 | 强大的正则表达式，更好的词法作用域链处理，新的控制指令，异常处理，错误定义更加明确，数据输出的格式化及其它改变 |
| 4  | ECMAScript 4 | 被放弃 | 由于关于语言的复杂性出现分歧，第4版本被放弃，其中的部分成为了第5版本及Harmony的基础；由ActionScript实现 |
| 5  | ECMAScript 5 | 2009年12月 | 新增“严格模式（strict mode）”，一个子集用作提供更彻底的错误检查，以避免结构出错。澄清了许多第3版本的模糊规范，并适应了与规范不一致的真实世界实现的行为。增加了部分新功能，如getters及setters，支持JSON以及在对象属性上更完整的反射 |
| 5.1  | ECMAScript 5.1 | 2011年6月 | ECMAScript标5.1版形式上完全一致于国际标准ISO/IEC 16262:2011。 |
| 6  | ECMAScript 2015 | 2015年6月 | ECMAScript 2015（ES2015），第 6 版，最早被称作是 ECMAScript 6（ES6），添加了类和模块的语法，其他特性包括迭代器，Python风格的生成器和生成器表达式，箭头函数，二进制数据，静态类型数组，集合（maps，sets 和 weak maps），promise，reflection 和 proxies。作为最早的 ECMAScript Harmony 版本，也被叫做ES6 Harmony。 |
| 7  | ECMAScript 2016 | 2016年6月 | ECMAScript 2016（ES2016），第 7 版，多个新的概念和语言特性 |
| 8  | ECMAScript 2017 | 2017年6月 | ECMAScript 2017（ES2017），第 8 版，多个新的概念和语言特性 |
| 9  | ECMAScript 2018 | 2018年6月 | ECMAScript 2018 （ES2018），第 9 版，包含了异步循环，生成器，新的正则表达式特性和 rest/spread 语法 |
| 10  | ECMAScript 2019 | 2019年6月 | ECMAScript 2019 （ES2019），第 10 版 |
| 12  | ECMAScript 2020 | 2020年6月 | ECMAScript 2020 （ES2020），第 11 版 |
| 13  | ECMAScript 2021 | 2021年6月 | ECMAScript 2021 （ES2021），第 12 版 |
| 14  | ECMAScript 2022 | 2022年6月 | ECMAScript 2022 （ES2022），第 13 版 |
| 15  | ECMAScript 2023 | 2023年6月 | ECMAScript 2023 （ES2023），第 14 版 |
| 16  | ECMAScript 2024 | 2024年6月 | ECMAScript 2024 （ES2024），第 15 版 |

ECMAScript版本由每年的ECMA大会批准并作为标准发布。所有的进展都在Ecma TC39 GitHub组织上公开，该组织托管提案、官方规范文本和会议记录。在ECMAScript第6版（称为ES6）之前，规范是几年发布一次，通常用它们的主要版本号来指代，譬如我们常说的ES3、ES5。在ES6之后，规范以发布年份命名（ES2017、ES2018 等）。准确来讲ES6是ES2015的代名词，但日常工作中，工程师们习惯将6版本之后的版本统称做ES6。这是因为自2015年ES6发布起，ECMA 大会每年都会发布新版本的ECMAScript，发布频率如此频繁，累积版本也比较多，大家习惯将6版本之后的版本统称做ES6。那么什么是ESNext呢？这就不得不说到ECMAScript的发布流程了。

## ECMAScript 发布四阶段
TC39（Technical Committee 39）属于Ecma International组织，负责ECMAScript标准的制定和发布。在发布ECMAScript 6之后，TC39团队制定了新的ECMAScript发布流程，名字为TC39进程。这个发布进程的各个阶段如图所示。
![TC39 Process](/tc39-process.jpg "TC39 Process")
>
>1. Stage 0：代号“稻草人（strawman）”，草案阶段。\
>    任何讨论、想法、改变或者还没加到提案的特性都在这个阶段。只有TC39成员可以提交。
>1. Stage 1：代号“提案（proposal）”， TC39 帮助阶段
>    1. 产出一个正式的提案。
>    1. 发现潜在的问题，例如与其他特性的关系，实现难题。
>    1. 提案包括详细的API描述，使用例子，以及关于相关的语义和算法。
>1. Stage 2：代号“草案（draft）”， 本阶段很有可能成为标准
>    1. 提供一个初始的草案规范，与最终标准中包含的特性不会有太大差别。草案之后，原则上只接受增量修改。
>    1. 开始实验如何实现，实现形式包括polyfill, 实现引擎（提供草案执行本地支持），或者编译转换（例如babel）
>1. Stage 3：代号“候选（candidate）”， 已完成，需要从实现中获得反馈
>    1. 候选阶段，获得具体实现和用户的反馈。此后，只有在实现和使用过程中出现了重大问题才会修改。
>    1. 规范文档必须是完整的，评审人和ECMAScript的编辑要在规范上签字。
>    1. 至少要在一个浏览器中实现，提供polyfill或者babel插件。
>1. Stage 4：代号“结束（finished）”， 准备成为标准
>    1. 已经准备就绪，该特性会出现在下个版本的ECMAScript规范之中。
>    1. 需要通过有2个独立的实现并通过验收测试，以获取使用过程中的重要实践经验。

通常在第 3 或第 4 阶段时，JavaScript 引擎会实现这些提案，以供公众使用。有关TC39进程的更多信息，请参考[The TC39 Process](https://tc39.es/process-document/)。

ESNext是一个动态名称，指的是ECMAScript下一个版本的内容。ESNext中的特性处在Stage 1到Stage 4阶段中，因为根据定义，规范尚未最终确定。


ECMAScript 版本速览

我们在[JavaScript起源](/posts/javascript-origin)一篇中提到过，`var`声明变量的作用域问题是一个经典的JavaScript声明提升问题。在我们讨论JavaScript声明提升之前，需要讨论清楚JavaScript作用域及作用域链的概念。

## 作用域
作用域是高级编程语言中通用的概念。作用域可以看作当前执行上下文，值和表达式在执行上下文范围进行绑定以提供访问性，这个绑定我们称为变量绑定（name binding）。在作用域之外，值和表达式的绑定失效，对外部不可见。下面代码展示了作用域的隔离效果。

函数作用域外不可见：
```javascript
function exampleFunction() {
 var x = '函数内定义'; // x 只能在 exampleFunction 函数中使用
 console.log(x); // 输出 "函数内定义"
}

exampleFunction();
console.log(x); // 运行报错，x is not defined
```
函数作用域间不可见:
```javascript
function exampleFunction1() {
 const y = '函数内定义y-[exampleFunction1]'; // x 只能在 exampleFunction 函数中使用
 console.log(y); // 输出 "函数内定义y-[exampleFunction1]"，exampleFunction2 中的 y 不会造成影响
}

function exampleFunction2() {
 const y = '函数内定义y-[exampleFunction2]'; // x 只能在 exampleFunction 函数中使用
 console.log(y); // 输出 "函数内定义y-[exampleFunction2]"，exampleFunction1 中的 y 不会造成影响
}

exampleFunction1();
exampleFunction2();
```
根据值和表达式可见范围的确定方式，作用域分为静态作用域和动态作用域。作用域在代码逻辑定义时（编译时）就确定的属于静态作用域，作用域在代码逻辑运行时（运行时）确定的属于动态作用域。动态作用域在运行前难以确定，复杂度较高，所以大部分高级编程语言（诸如C, C++, Python, Java，C#）采用的是静态作用域。JavaScript采用的也是静态作用域。静态作用域又称为词法作用域。大部分时候，作用域堆叠成层次结构，子作用域可以访问父作用域，反过来则不行。
请看以下JavaScript代码。
```javascript
var word = 'Hi';
function sayHi() {
 return word;
}

function greeting() {
 var word = 'Hello';
 return sayHi();
}

console.log(greeting()); // 输出'Hi'
```
上述代码运行结果输出`Hi`，`sayHi()`中取到的`word`是函数外层定义的，它的值是`Hi`，即使`sayHi()`的调用是在`greeting()`内部并且`greeting()`内部也有个`word`定义。方法的变量值可以在函数定义的作用域中查找，但是不会在方法调用的作用域中查找，这种查找关系在我们写代码的时候就可以清晰理解，这就是静态作用域工作方式。动态作用域的工作方式却不同，请看同样的代码逻辑在Perl语言中的运行方式，如下。
```perl
$word = 'Hi';
sub sayHi
{
	return $word;
}

sub greeting
{
	local $word = 'Hello';
	return sayHi();
}

print greeting(); # 输出'Hello'
```
上述代码运行结果输出`Hello`,`sayHi()`中取到的`word`是函数调用的作用域中定义的，它的值是`Hello`。即方法中变量的作用域是沿着调用的作用域查找的，一个函数可能在多个地方调用，变量的值可能都不一样，这种运行时才能确定作用域的方式就是动态作用域。

## JavaScript 作用域
在JavaScript中，作用域主要有全局作用域、模块作用域、函数作用域、块级作用域四种，其中，块级作用域属于额外的作用域。
> 1. 全局作用域：脚本模式下运行所有代码的默认作用域。直接运行在&lt;script>标签下的代码，或者浏览器端单独的一个js文件中的代码，都运行在全局作用域下。全局作用域在页面创建时打开，在页面关闭时销毁。在浏览器端中，在全局作用域中有一个全局对象 window（代表的是一个浏览器的窗口，由浏览器创建），可以直接使用。在Node中，有一个全局对象global。
> 1. 模块作用域：模块模式中运行代码的作用域。在Node中，每一个js文件都是一个单独的作用域，Node的模块化会将每一个文件中的代码运行在一个单独的作用域中。每个js文件是独立的作用域不共享,所以Node中每一个文件中的变量都是私有的。
> 1. 函数作用域：由函数创建的作用域。调用函数时创建函数作用域，函数执行完毕之后，函数作用域销毁；每调用一次函数就会创建一个新的函数作用域，它们之间是相互独立的。
> 1. 块级作用域：用一对花括号（一个代码块）创建出来的作用域。这类代码块包括`while`，`if`，`try...catch`,`switch`,`for...in`，`for...of`，甚至匿名`{/*StatementList*/}`。代码块运行完毕后，作用域同样会销毁。块级作用域是ES6扩展的概念，在变量绑定的时候，只支持`let`，`const`，`class`声明的变量或类。使用`var`声明的变量不会绑定到块级作用域上。

下面是一些作用域的示例代码。
```javascript
var globalScope = 'global scope';

function checkScope1(){
 console.log(globalScope); // 输出 "global scope"
}
checkScope1();

function checkScope2() {
 var functionScope = 'function scope';
 console.log(functionScope); // 输出 "function scope"
}
checkScope2();

{
 var variableInBlock = 'variable in block';
 let blockScope = 'block scope';
 console.log(blockScope); // 输出 "block scope"
}
console.log(variableInBlock); // 输出"variable in block"
console.log(blockScope); // 报错 blockScope is not defined
```
这些代码演示了程序是如何访问不同作用域中变量。题外话，由于JavaScript的松散性，在非严格模式下，浏览器端的JavaScript运行时，没有使用任何声明的参数会被绑定在全局对象`window`上，对于使用`var`重复声明已经使用`var`声明的变量，会静默失败，不会报错。而使用`let`，`const`，`class`重复声明，或者使用`var`重复已经被`let`，`const`，`class`声明的变量，JavaScript程序会报错。

## JavaScript 作用域链
上面我们说过，大部分时候作用域堆叠成层次结构，子作用域可以访问父作用域，反过来则不行。这便是JavaScript作用域的查找机制。具体来说，当程序访问一个变量的时候，首先会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。如果在全局作用域里仍然找不到该变量，它就会在全局范围内隐式声明该变量(非严格模式下)或是直接报错（严格模式下）。请看以下代码示例。
```javascript
var scope = '[global] scope';
var globalScope = 'global scope';

function outerFunc() {
 var scope = '[outer function] scope';
 var outerScope = 'outer scope';

 function innerFunc() {
 var scope = '[inner function] scope';
 var innerScope = 'inner scope';
 console.log(scope); // 输出 "[inner function] scope"
 console.log(innerScope); // 输出 "inner scope"
 console.log(outerScope); // 输出 "outer scope"
 console.log(globalScope); // 输出 "global scope"
 }

 console.log(scope); // 输出 "[outer function] scope"
 console.log(outerScope); // 输出 "outer scope"
 console.log(globalScope); // 输出 "global scope"
 innerFunc();
}

console.log(scope); // 输出 "[global] scope"
console.log(globalScope); // 输出 "global scope"
outerFunc();
```
在`innerFunc()`中，访问`scope`时，首先找到的是定义在`innerFunc()`中的`scope`，所以得到"[inner function] scope"，同时，`innerFunc()`中可以访问到自身作用域中的`innerScope`，父作用域中的`outerScope`和全局作用域中的`globalScope`。在`outerFunc()`中，父作用域访问不了子作用域，`outerFunc()`访问不了`innerFunc()`中的`scope`，但是在当前作用域中访问到`scope`，得到"[outer function] scope"，同时`outerFunc()`中可以访问到自身作用域中的`outerScope`和全局作用域中的`globalScope`。在全局作用域中，可以访问到全局作用域中的`scope`和`globalScope`。观察`scope`变量的访问可以看到，程序沿着作用域链向上查找一个变量的同时，在找到第一个声明的时候会命中并停止，这个效果称为遮蔽效应。

JavaScript程序访问变量时沿着作用域链向上查找的机制，以及函数作为一等公民可以作为返回值的设定，使得在JavaScript中能够使用一种强大的编程技巧，就是**闭包**，这个后面我们单开一篇进行讨论。

## JavaScript 声明提升
理解了作用域的概念，我们就可以探讨JavaScript声明提升的问题了。

JavaScript 提升是指解释器在执行代码之前，将函数、变量、类或导入的声明移动到其作用域的顶部的过程。提升不是 ECMAScript 规范中规范定义的术语。规范确实将一组声明定义为[可提升的声明](https://tc39.es/ecma262/multipage/ecmascript-language-statements-and-declarations.html#prod-HoistableDeclaration)，但这只包括`function`、`function*`、`async function`以及`async function*`声明。提升通常也被认为是 var 声明的一个特性，尽管方式不同。用通俗的话来说，以下任何行为都可以被视为提升：
1. 能够在声明变量之前在其作用域中使用该变量的值。（“值提升”）
1. 能够在声明变量之前在其作用域中引用该变量而不抛出 ReferenceError，但值始终是 undefined。（“声明提升”）
1. 变量的声明导致在声明行之前的作用域中行为发生变化。
1. 声明的副作用在评估包含该声明的其余代码之前产生。

`function`、`function*`、`async function`以及`async function*`四种函数声明的提升表现为第1种行为；`var`声明的提升表现为第2种行为；`let`、`const`和`class`声明（也称为词法声明）的提升表现为第3种行为；`import`声明的提升表现为第1和第4种行为。

### 函数声明提升
函数声明提升也会提升到当前作用域（包括块级作用域）最前面，同时提升的，还有函数签名和函数体定义（函数值）的绑定。请看如下代码。
```javascript
console.log(sayHi); // 输出函数体定义 ƒ sayHi() { ... }
sayHi(); // 执行sayHi()，运行结果是输出 "Hi"
function sayHi() {
 console.log('Hi');
}
```
四种函数声明具备同样的提升效果。并且对于重复的函数声明，最后的（新的）函数声明会覆盖之前的（旧的）函数声明，请看下面代码。

```javascript
sayHi(); // 执行sayHi(), 运行结果输出 "Hello"
function sayHi() {
 console.log('Hi');
}
function sayHi() {
 console.log('Hello');
}
```
### `var`声明提升
ES6之前没有声明提升的概念，但是`var`声明的表现是声明提升的。不管`var`变量声明是写在哪里，最后都会被提到当前作用域(非块级作用域)的顶端，并使用`undefined`进行初始化。请看如下代码。
```javascript
console.log(x); // 输出 undefined
var x = 1;
console.log(x); // 输出 1
console.log(y); // 报错：y is not defined。对比项，因为没有任何地方声明 y，所以报错
```
上述代码等价于下面代码。
```javascript
var x;
console.log(x); // 输出 undefined
x = 1;
console.log(x); // 输出 1
console.log(y); // 报错：y is not defined。对比项，因为没有任何地方声明 y，所以报错
```
另，函数声明提升的优先级是高于`var`变量声明的，请看如下代码。
```javascript
console.log(sayHi); // 输出函数体定义 ƒ sayHi() { ... }
sayHi(); // 执行sayHi()
function sayHi() {
 console.log('Hi'); // 输出 "Hi"
}
var sayHi = 'sayHi';
console.log(sayHi); // 输出 "sayHi"
```
上述代码等价于下列代码。
```javascript
function sayHi() {
 console.log('Hi'); // 输出 "Hi"
}
console.log(sayHi); // 输出函数体定义 ƒ sayHi() { ... }
sayHi(); // 执行sayHi()
sayHi = 'sayHi';
console.log(sayHi); // 输出 "sayHi"
```

### `let`、`const`和`class`声明提升
`let`、`const`和`class`声明提升会被提升到当前作用域顶端，但是不会给声明的变量赋值，而是指派给它们uninitialized的状态，访问uninitialized状态下的变量程序会报错。示例代码如下。
```javascript
function run() {
 console.log(a); // 报错：Cannot access 'a' before initialization
 let a = 1;
}
run();
```
如果没有`let`声明，代码的表现行为是不一样的，对比代码如下。
```javascript
function run() {
 console.log(a); // 报错：a is not defined
}
run();
```

因为`var`声明无法绑定到块级作用域上，块级作用域上的`var`声明会提升到当前其他类型作用域上进行绑定，所以下列代码运行结果和预期结果不同。
```javascript
for(var i = 0; i < 3; i++) {
 setTimeout(() => {
 console.log(i); // 输出三次 3
 })
}
```

在`let`，`const`出现之前，开发人员使用立即执行函数来修复这个问题，`let`，`const`出现之后，在`for...in`和`for...of`循环语句中可以直接使用`let`，`const`解决这个问题。
```javascript
// 使用立即执行函数进行修复
for(var i = 0; i < 3; i++) {
 (function(i) {
 setTimeout(() => {
 console.log(i); // 分别输出 0, 1, 2
 })
 })(i)
}

// 使用 let/const
for(let i = 0; i < 3; i++) {
 setTimeout(() => {
 console.log(i); // 分别输出 0, 1, 2
 })
}
```

## JavaScript 为什么要有声明提升
即使V8 JavaScript引擎已经支持了即时编译（JIT），但JavaScript仍然是一门解释型高级编程语言。解释型语言在解析代码的时候是逐行的，这个特点决定了它有声明提升的必要。同时，声明提升也会提高程序运行性能。
### 声明提升的必要性
假如没有函数声明提升，会发生什么。首先我们遇到的第一个问题是我们在使用一个函数时，一定要首先声明它，这很麻烦。虽然开发人员加点小心是可以妥善解决这个先后问题，但是会给项目开发带来很多额外的工作。
我们遇到的第二个问题涉及到函数相互递归。审查以下函数相互递归调用的例子，如果函数声明没有提升，代码会怎么执行。
```javascript
function isEven(n) {
 if (n == 0) {
 return true;
 }
 return isOdd(n - 1);
}

alert(isEven(2));

function isOdd(n) {
 if (n == 0) {
 return false;
 }
 return isEven(n - 1);
}
```
当代码执行到`alert(isEven(2));`一行的时候，`isEven(2)`成功被调用，程序执行进入函数`isEven`，在函数`isEven`内调用`isOdd()`时，因为此时函数`isOdd`未声明，所以程序会报错。

解决这两种问题的方式就是函数声明提升，在程序执行模块逻辑之前，创建当前作用域执行上下文，绑定函数定义，然后执行代码逻辑内容，看上去就是作用域中的函数声明和定义提升到作用域顶端，这样，在整个作用域便可以直接调用声明的函数，也会避免函数相互递归情况下报错的问题。JavaScript程序的执行分为代码解析（预编译）和执行两个阶段，JavaScript引擎在代码解析（预编译）阶段隐式地完成了这种提升。

### 性能优化
声明提升有助于程序性能优化，我们知道，在执行程序时，声明语句会为一个变量创建堆栈，分配内存并可选地初始化变量值。思考下列代码。
```javascript
var count = 0;
while(count < 100) {
 var message = '第' + count + '次';
 console.log(message);
 count = count + 1;
}
```
如果没有声明提升，那么每次执行`message`变量声明的时候都需要为其开辟内存，并将其指针压入执行栈，同时还需要将旧的`message`变量销毁。如果应用了声明提升，`message`变量只会声明一次，为其开辟内存一次，后续都是在现有内存上更新变量值。这样，程序性能得到提升。函数声明同理。所以JavaScript引擎都会对声明进行提升以优化程序执行性能。这是JavaScript引擎在代码解析（预编译）阶段的优化之一。

## `var`声明提升的问题
`var`声明提升能够起到性能优化的作用，但是，在一些情景下，`var`声明提升很容易引入程序bug，它另程序在某些情境下的行为很“反直觉”。请看以下代码。
```javascript
var name = 'JavaScript';
function printName () {
 console.log(name);
 var name = 'ECMAScript';
}
printName();
```
但从直觉上来看，变量`name`有赋值，应该输出"JavaScript"，考虑`var`声明提升，应该输出"ECMAScript"，但实际上输出的是`undefined`。`var`声明提升并不会提升赋值语句，`name = 'ECMAScript'`被留在原地在输出语句之后。`var`重复声明时也不会报错，在维护大型程序时，这很容易引入bug，为了解决这个问题，ES6才提出了`let`和`const`声明和引入块级作用域机制。JavaScript引擎是如何实现作用域机制和这些声明提升呢？这就需要深入到JavaScript执行上下文和JavaScript执行栈了。

## `let`， `const`，`class`提升的另类说法
有关`let`， `const`，`class`有另一种说法是视它们的声明不会提升，并提出“暂时性死区”的概念，这种说法可接受，但不严谨。说其可接受，是因为“提升”一词也不是普遍认同的术语。说其不严谨，是因为程序在执行声明变量语句之前的“暂时性死区”仍然是可观察到的“声明语句的影响”，既然有实质的影响，这也是某种形式的提升。查看以下代码的不同
```javascript
const x = 1;
function func1() {
 console.log(x); // ReferenceError: Cannot access 'x' before initialization.
 // `const x = 2;`的提升造成了上面访问x报错的结果，如果视为不提升，那么是应该能够访问到全局作用域中的x。
 const x = 2;
}
func1();

const y = 3;
function func2() {
 console.log(y); // 输出 undefined. `var y = 4;`的提升造成了这个结果
 var y = 4;
}
func2();
```
如果我们深入到JavaScript程序的运行堆栈，去观察`let`， `const`，`class`这些声明的行为，我们也会发现将其视为提升是恰当的。理解JavaScript执行上下文和执行栈，对我们去理解作用域、提升、闭包这些概念都会有很大帮助，我们后面会对这个主题专门讨论。

介绍JavaScript的作用域、作用域链与声明提升特性，包括 var、let、const、class、function声明提升。

JavaScript 作用域与声明提升

介绍JavaScript运行时的执行上下文和执行栈，讨论执行上下文模型，包括词法环境和变量模型。

JavaScript 执行上下文和执行栈

介绍JavaScript语言中this绑定的动态性，以及函数在不同的调用形式下this绑定的确定，包括call、apply、bind的使用。

理解this的指向

## 闭包的定义

JavaScript中，闭包是函数中变量沿作用域链查找机制的产物。基于闭包的特性，开发人员能够完成特定的开发范式或者设计模式。JavaScript社区有很多有关闭包的讨论，当人们谈论闭包的概念的时候，大部分会从下面两个切入角度去给闭包下定义。两种方式都正确，它们给出的结果是相同的，只是切入点不同。

> 《JavaScript 权威指南》：从技术的角度讲，所有的JavaScript函数都是闭包。

### 词法作用域

目前的MDN文档采用了基于词法作用域概念的解释。词法作用域又称静态作用域，在[JavaScript 作用域与声明提升](/posts/javascript-scope-hoisting "JavaScript 作用域与声明提升")中我们介绍了静态作用域与动态作用域的区别。MDN文档上如此定义闭包：

> 闭包是由捆绑起来（封闭的）的函数和函数周围状态（词法环境）的引用组合而成。换言之，一个闭包让一个函数能访问它的外部作用域。在 JavaScript 中，闭包会随着每次函数的创建而同时创建。

由这个定义，可以称闭包中的函数为**闭包函数**，函数周围状态为**闭包词法环境**。并且，JavaScript中全局作用域、模块作用域、函数作用域、块级作用域都属于词法作用域，在这些作用域都可以形成闭包。

JavaScript中所有函数都定义在它的作用域环境中（最外层函数也运行在全局作用域），所有函数都绑定在它的作用域环境下。所以，JavaScript程序每次调用函数其实都是在创建闭包。以下结合代码以说明：
```javascript
function run() {
 var one = 1;

 function addOne(num) {
 return one + num;
 }

 function addTwo(num) {
 return num + 2;
 }

 console.log(addOne(3)); // 输出：4
 console.log(addTwo(5)); // 输出：7
}
run();
```
上述代码中，函数`aadOne()`和函数`addTwo()`均定义在函数`run()`的作用域中，绑定在函数`run()`的词法作用域下，并且函数`one()`内部访问了词法作用域中的变量`one`。每次函数`aadOne()`或函数`addTwo()`的运行均创建了一个闭包。

**注意**，闭包的词法环境和执行上下文的词法环境有联系但不是一回事。这里的词法环境是JavaScript代码中函数内的变量、函数声明情况。而我们在[JavaScript 执行上下文](/posts/javascript-excution-context "JavaScript 执行上下文和执行栈")中介绍的词法环境，是JavaScript引擎解析JavaScript代码的解析结果中对执行上下文环境变量和函数的描述。它们在很多地方上相似，在细节上不同。比较如下：

| | 闭包词法环境 | 执行上下文词法环境 |
| ---- | ---- | ---- |
| `let`、`const`、`function`、`class`声明 | `let`、`const`、`function`、`class`声明作为可访问环境变量 | 记录`let`、`const`、`function`、`class`声明以供访问 |
| 函数参数（`Arguments`） | 函数参数作为可访问环境变量 | 记录函数参数以供访问 |
| `this`绑定 | 通常，闭包函数有自己的`this`对象，不关心词法环境中的`this`。箭头函数例外 | 记录运行时`this`绑定以供访问 |
| `var`声明 | `var`声明作为可访问环境变量 | `var`声明不记录在词法环境上，而是记录在变量环境上 |

扩展：箭头函数内没有独立的`this`绑定，箭头函数中的`this`对象保留了闭合词法上下文的`this`值。这意味着箭头函数的行为就像它们是“自动绑定”的——无论如何调用，`this`都绑定到函数创建时获得的`this`的值。在函数内部创建的箭头函数的`this`是函数的`this`，在全局环境下创建的`this`值是`globalThis`（浏览器中是`window`）。

### 自由变量和约束变量

维基百科上基于自由变量和约束变量来解释闭包，这是一个计算机术语的通识解释，不针对特定编程语言。维基百科上定义：

> 闭包（英语：Closure），又称词法闭包（Lexical Closure）或函数闭包（function closures），是在支持头等函数的编程语言中实现词法绑定的一种技术。闭包在实现上是一个结构体，它存储了一个函数（通常是其入口地址）和一个关联的环境（相当于一个符号查找表）。环境里是若干对符号和值的对应关系，它既要包括**约束变量**（该函数内部绑定的符号），也要包括**自由变量**（在函数外部定义但在函数内被引用），有些函数也可能没有自由变量。

什么是自由变量和约束变量呢？在《计算机程序构造与解释》中对它们有这样的描述：“如果在一个完整的过程定义里将某个**约束变量**统一换名，这一过程定义的意义将不会有任何改变。如果一个变量不是约束的，我们就称它是自由的。一个名字的定义被约束于的那一集表达式称为这个名字的作用域”。我们可以为自由变量和约束变量定义如下：

+ **自由变量**：自由变量是指在表达式中出现，但未在该表达式的范围内定义的变量。
+ **约束变量**：约束变量是指在一个特定的作用域内定义并且有明确值的变量。它们在函数或表达式的作用域内“被约束”，其生命周期和作用范围仅限于此作用域。

请看如下代码示例：
```javascript
var one = 1;
function addOne(num) {
 var numberType = 'number';
 return typeof num === numberType ? (num + one) : NaN;
}
```
对于上述函数`addOne`来说，变量`one`在函数中使用，声明却在函数外部，就是自由变量。而参数`num`和变量`numberType`均声明在函数体中，一个是形参，一个是函数内变量，它们在函数内统一换名不影响函数意义，它们是约束变量。**对于闭包函数来说，词法作用域中的变量都属于函数外部的自由变量**。

根据这个维基百科对闭包的定义，闭包是一个存储了函数和关联环境的结构体，关联环境中存在约束变量和自由变量的绑定，自由变量可以没有。这里对函数本身没有提出什么要求。和其它将函数作为头等公民的编程语言一样，JavaScript中任一函数运行都会创建闭包。

> 维基百科对闭包的解释不针对特定编程语言，我们前端开发人员在开发应用中使用闭包，JavaScript引擎内部同样使用闭包去构建JavaScript的词法作用域实现。

### 实践中的闭包

既然所有的JavaScript函数都基于闭包结构运行，那么闭包的强大在什么地方呢？JavaScript社区通常讨论闭包的时候，通常讨论的是闭包的一种特例，这种特例有两个特征：

1. 闭包函数被保持。
1. 闭包函数捕获了闭包词法环境中的变量，即捕获了自由变量。

闭包函数被保持的常见方式是作为结果从外层函数中返回。正是因为闭包函数捕获了自由变量并且被保持，为了维护这份“保持”，JavaScript引擎不会销毁外层函数的执行上下文，哪怕在外层函数已经执行完毕之后也是如此。只有当被保持的函数也被销毁时，被保持的外层函数执行上下文才会一同销毁。正是外层函数执行完还能保持上下文地特性，让闭包在程序设计中强大而重要。

在实践中，JavaScript引擎对函数地闭包结构有针对性地优化策略。从引擎层面来看，函数如果没有捕捉自由变量，那么它其实可以被实现为一个函数指针，或者直接内联到调用点，如果它捕捉了自由变量那么它将保持为一个闭包。另外，V8 JavaScript引擎只会在闭包词法环境中保存那些被闭包函数捕获地变量。考虑这些优化策略，JavaScript引擎视这种特例闭包为闭包，平常类型地闭包结构会被优化为普通函数。

查看下列代码以及在Chrome浏览器中的执行信息：
```javascript
function getAddOne() {
 var one = 1;
 var two = 2;

 function addOne(num) {
 debugger;
 return one + num;
 }

 console.log(two); // 输出 2

 return addOne;
}

var addOneWith = getAddOne();
console.log(addOneWith(3)); // 输出：4
```
在这段代码中，`getAddOne()`函数中定义了`one`、`two`两个变量，以及`addOne()`函数。`addOne()`函数捕获了外层函数的变量`one`。并作为`getAddOne()`函数的返回值以便外部保持。外部获得`getAddOne()`函数后进行了调用，我们在`addOne()`函数设置断点以便查看函数的执行情况。执行情况如下图：
![closure optimization](/closure-optimization.png "closure optimization")

可见，Closure对象中保存了变量`one`，但是没有保存变量`two`。

## 闭包的用途

闭包能将数据（词法环境）与运算函数关联起来。这显然类似于面向对象编程。基于闭包特性进行函数柯里化，也加大JavaScript语言函数式编程地表达能力。闭包地用途还有很多，在这里我们稍作列举。

### 1. 模拟私有属性
下面的代码展示了如何使用闭包定义能访问私有函数和私有变量的公共函数。
```javascript
const makeCounter = function () {
 let privateCounter = 0;

 function changeBy(val) {
 privateCounter += val;
 }

 return {
 increment() {
 changeBy(1);
 },

 decrement() {
 changeBy(-1);
 },

 value() {
 return privateCounter;
 },
 };
};

const counter1 = makeCounter();
const counter2 = makeCounter();

console.log(counter1.value()); // 输出：0

counter1.increment();
counter1.increment();
console.log(counter1.value()); // 输出：2

counter1.decrement();
console.log(counter1.value()); // 输出：1
console.log(counter2.value()); // 输出：0
```
上述代码中，`increment()`、`decrement()`、`value()`三个闭包方法（函数）共用一个词法环境，它们每个都能访问词法环境中的`privateCounter`变量和`changeBy`函数。同时，`counter1`和`counter2`引用的闭包互不影响，各自拥有独立的词法环境。

### 2. 函数柯里化（curry）
JavaScript 中实现函数的柯里化完全有赖于闭包的特性。
```javascript
function curry(func) {
 // 获取函数的参数个数
 const funcLength = func.length;

 // 内部的柯里化函数
 function curried(...args) {
 // 如果已经传递了足够的参数，直接调用原始函数
 if (args.length >= funcLength) {
 return func(...args);
 } else {
 // 否则返回一个新的函数，继续收集参数
 return function(...nextArgs) {
 return curried(...args, ...nextArgs);
 };
 }
 }

 return curried;
}

function add(a, b, c) {
 return a + b + c;
}

const curriedAdd = curry(add);

console.log(add(1, 2, 3)); // 输出：6
console.log(curriedAdd(1)(2)(3)); // 输出：6
console.log(curriedAdd(1, 2)(3)); // 输出：6
console.log(curriedAdd(1)(2, 3)); // 输出：6
```
上述代码定义了能够将普通函数柯里化的高阶函数`curry`，它接受一个普通函数并返回一个柯里化版本的函数，调用`curry(add)`完成对普通函数`add()`的柯里化，柯里化后的函数调用和原始函数调用运行结果相同。
·
### 3. 实现备忘录（MEMENTO）模式
以下代码展示了斐波那契数列的备忘录模式。
```javascript
function memoize(func) {
 const cache = {}; // 用来存储计算结果的缓存

 return function(...args) {
 const key = JSON.stringify(args); // 将参数序列化为唯一键值

 // 如果缓存中有结果，直接返回缓存的值
 if (cache[key]) {
 console.log('从缓存中读取');
 return cache[key];
 }

 // 否则计算并缓存结果
 const result = func(...args);
 cache[key] = result; // 存入缓存
 return result;
 };
}

// 斐波那契函数
function fibonacci(n) {
 if (n <= 1) return n;
 return fibonacci(n - 1) + fibonacci(n - 2);
}

// 使用备忘录优化斐波那契函数
const memoizedFibonacci = memoize(fibonacci);

console.log(memoizedFibonacci(10)); // 第一次调用，计算并缓存结果
console.log(memoizedFibonacci(10)); // 第二次调用，直接从缓存中读取
console.log(memoizedFibonacci(5)); // 第一次计算 5
console.log(memoizedFibonacci(5)); // 从缓存读取 5
```
`memoize()`函数中有一个`cache`变量声明，他会缓存每次函数调用的结果，当同样的调用再次发生的时，会直接从缓存中取出数据，而不是真的重新调用一遍原始函数。

## 性能问题
每一个闭包都是函数（方法）和其实例所处的词法环境的组合，闭包的定义中包含着一个性能问题。闭包中引用的函数是一个具体实例，同一个外层函数创建的闭包中不共享这些闭包函数实例的引用，它们分别维持一个实例引用。这会给程序的性能和内存开销产生负面影响。这种情况和在构造函数中定义方法一样。解决办法是尽量使用原型构造函数模式去创建对象，避免使用闭包。当然我们并不是说原型构造函数模式可以完全替代闭包，它们是两类事物。只是说在我们在构建程序中面对具体问题时，可以多思考一些解决方案。

有关性能问题还有一个误解，很多人会认为闭包会造成内存泄漏。因为外层函数在执行完毕后执行上下文被保存的特性，很容易让人感觉它一直没被回收。闭包函数实例捕获的自由变量一直没回收是真实发生的，但这种情况正是我们需要的，如果不是需要保持外层函数的变量，我们也就没必要运用闭包了。闭包可能造成的内存问题是闭包函数实例在不需要的时候一直没被释放，多放生在错误地把闭包函数实例保存在一个长期地执行上下文中，诸如全局执行上下文，所以，一定要注意不要将闭包函数实例暴漏在全局作用域中。通常情况下闭包函数实例都会在被保存地执行上下文销毁时被销毁。

闭包的另一个问题是容易形成循环引用，这会促发一些问题。 在IE8及其早期版本的浏览器中，对于BOM和DOM对象的垃圾回收机制采用了引用计数策略，在引用计数策略下，如果两个对象之间形成了循环引用就会导致它们不能被回收。当闭包中保存了一些DOM节点时，更容易引发这个问题。不过对于现代浏览器，不存在BOM和DOM对象循环引用的问题。有关JavaScript的垃圾回收机制，我们后面再单独探讨。

介绍计算机程序中闭包的定义，以及JavaScript编程中闭包的实践，以及闭包的应用。

JavaScript 闭包


说JavaScript是虚假的OO编程是非正式口头化的评论，也是对面向对象编程的一个误解。面向对象编程思想不绑定任何语言，每种语言都有自己实现面向对象编程范式的机制，Java、C#使用类来实现面向对象编程范式，而JavaScript使用原型机制来实现面向对象编程范式。所以，JavaScript对面向对象编程范式的实现的确是有很大不同。有关面向对象编程的更多信息请参考英文版的维基百科条目：[Object-oriented programming](https://en.wikipedia.org/wiki/Object-oriented_programming)（注：中文版[面向对象编程](https://zh.wikipedia.org/wiki/%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E7%A8%8B%E5%BA%8F%E8%AE%BE%E8%AE%A1)的维基百科条目仍然将类的支持作为面向对象编程的必要元素）。

面向对象编程最首要的是系统中的事物都由对象来表达。Java和C#开发语言本身是符合面向对象范式的，这类语言将对象约束在类（`class`）上，类作为一批具备相同特点或行为的对象的抽象，它用来描述一个种类的对象，创建一个对象就是对一个类的实例化过程，它们通过类的定义完成对象的封装。例如，在系统中，一个`person1`是对象，第二个`person2`也是对象，Java和C#会通过类`Person`来表达`person1`和`person2`的属性和行为。换句话说，Java和C#通过对类的管理来达到管理对象的目的。JavaScript中没有Java和C#中那样的类（`class`）定义（虽然ECMAScript 6引入了`class`关键字，目前为止它的本质是构造函数的语法糖，JavaScript引擎把它当作函数处理），属于无类编程（classless programming）。在JavaScript中万物皆对象，并且JavaScript具备很强的松散性，在JavaScript中创建、修改对象是容易的，也很容易能够完成复杂对象的封装。根据JavaScript语言本身的特点，开发人员亦可以实现对象成员的静态化和私有化，完成对象属性的管理。JavaScript也具备完善的对象管理能力。这篇文章中我们讨论JavaScript如何完成面向对象编程的封装范式。

## 创建对象
JavaScript创建对象很简单，它支持使用字面量创建对象，完成创建对象逻辑的复用，演化出多种模式，由简单到复杂，每次演进都解决了当前面对的问题，最终走向成熟的方案。
### 1. 字面量创建对象
ECMA-262把对象定义为：“无序属性的集合，其属性可以包含基本值，对象或者函数（方法）”，JavaScript 支持简单的对象字面量创建对象（对象字面量创建方法是调用`new Object()`然后为对象逐一添加属性的简写模式）。在面向对象编程中，作为逻辑封装的基本单元，对象的属性和方法之间该是有内在联系的。譬如我们创建一个person对象，它的JavaScript代码应该如下：
```javascript
let person = {
    name: 'Guang',
    age: 32,
    job: 'Software Engineer',
    introduce: function() {
        return 'My name is ' + this.name;
    }
}
```
将相互关联的属性和方法组合在一个具体的对象中，就是一个简单的封装了。不过如果我要创建多个person对象，这个简单的封装不能够进行代码复用。

### 2. 工厂模式
可以使用一个函数去创建person对象，来达到代码复用的目的。代码如下：
```javascript
function Person(name, age, job) {
    const person = {
        name: name,
        age: age,
        job: job,
        introduce: function() {
            return 'My name is ' + this.name;
        }
    }
    return person;
}

const person1 = Person('Guang', 32, 'Software Engineer');
const person2 = Person('Greg', 28, 'Hardware Engineer');
```
这就是创建对象的工厂模式的应用，只需要传递不同的参数，便可以创建具备类似逻辑的不同对象。但是工厂模式也有一个问题，它没有一个机制或者标识表达多个person对象之间的联系。为了建立具备类似逻辑的对象之间的联系，JavaScript引入了构造函数模式来创建同一类对象。

### 3. 构造函数模式
构造函数模式利用了函数的内部对象`this`，构造函数本身与普通函数没有差别，当函数使用`new`关键字进行调用时它便是构造函数调用，直接调用函数就是普通调用。在使用构造函数模式创建对象时，JavaScript引入了对象属性`constructor`来标识它是由哪个构造函数创建的。

构造函数模式创建person对象的代码如下：
```javascript
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
    this.introduce = function() {
        return 'My name is ' + this.name;
    };
}

const person1 = new Person('Guang', 32, 'Software Engineer');
const person2 = new Person('Greg', 28, 'Hardware Engineer');
```
此时对象`person1`和`person2`的`constructor`均指向它们同一个的构造函数`Person()`，验证如下：
```javascript
console.log(person1.constructor === Person); // 输出 true
console.log(person2.constructor === Person); // 输出 true
```

构造函数也是普通的函数，但是构造函数的调用要求使用`new`关键字调用，这是因为使用`new`关键字调用，函数内的`this`绑定才能正确的发生，如果按照普通函数调用方式调用函数，非严格模式下函数的`this`对象会绑定到全局对象上。使用关键字`new`调用函数时做了下面四件事：
> 1. 创建一个新对象
> 1. 将构造函数的作用域赋给新对象（因此 this 就指向了这个新对象）
> 1. 执行构造函数中的代码
> 1. 返回新对象

构造函数模式也有问题。在面向对象范式中，同类对象的行为是一致的，可以复用的不仅是代码逻辑，而是方法本身。我们知道，在JavaScript中，函数（方法）也是对象，构造函数模式的对象方法却不是同一个，而是为每一个对象创建了同名方法。在上述代码中就是`person1.introduce`不等于`person2.introduce`，但它们可以是同一个方法。这造成了内存的浪费，我们可以基于JavaScript的原型机制来解决这个问题。JavaScript的原型机制是设计模式原型模式的一种实现，为什么选用原型模式来创建JavaScript中的对象我们先按下不表，我们先看看原型模式是如何创建JavaScript对象的。

### 4. 原型模式
Javascript规定，所有函数都有一个`prototype`属性，这个属性指向一个对象，这个`prototype`属性指向的对象可以包含函数作为构造函数创建的所有对象共享的属性和方法。任何JavaScript引擎实现的对象属性查找机制都要满足这个规定。这是JavaScript扩展对象的机制，我们可以利用它消除构造函数创建对象时造成的内存浪费问题（后面要介绍的继承实现也是基于原型机制来实现的）。
使用原型模式创建对象的代码如下：
```javascript
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
}

Person.prototype.introduce = function() {
    return 'My name is ' + this.name;
};

const person1 = new Person('Guang', 32, 'Software Engineer');
const person2 = new Person('Greg', 28, 'Hardware Engineer');
```
验证以下效果：
```javascript
console.log(person1.introduce === person2.introduce); // 输出 true
```
JavaScript使用原型机制来扩展对象，这不是一个简单的实现，后面我们专门聊聊JavaScript中的原型。
> 延申：使用`new`调用构造函数创建对象时，会自动为每个构造的对象设置原型（\[\[Prototype\]\]）,如果构造函数返回非原始值，则该值将成为`new`调用构造函数的结果。在这种情况下，可能无法正确绑定\[\[Prototype\]\]。

### 5. 使用class声明
ECMAScript 6提出了`class`声明，值得注意的是`class`声明支持块级作用域绑定，声明提升和`let`相似。目前`class`声明得到了大部分浏览器的支持，如果我们的开发环境支持使用`class`声明，我们可以使用它来创建对象，它更简洁易用。示例代码如下：
```javascript
class Person {
    constructor(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
    }

    introduce() {
        return 'My name is ' + this.name;
    }
}

const person1 = new Person('Guang', 32, 'Software Engineer');
const person2 = new Person('Greg', 28, 'Hardware Engineer');

console.log(person1.introduce === person2.introduce); // 输出 true
```
目前，在JavaScript引擎中`class`声明的本质仍然是构造函数，在作用域绑定和声明提升上有些许不同。如果我们的程序运行环境不支持`class`声明，我们可以借助Babel来将ES6代码转换成ES5代码，可以看到转换结果也是函数。

## 属性管理
JavaScript对对象的属性管理，有些天然支持面向对象范式，例如静态化，有些是缺少面向对象范式支持，如私有化，我们需要对属性的私有化进行模拟。

### 静态属性
函数也是对象，直接添加到函数上的属性是静态属性，对于`class`声明，可以使用关键字`static`在类上声明静态属性。代码示例如下：
```javascript
// 1. 在函数上声明静态属性
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
}

Person.constructorName = 'Person'; // 声明静态字符串属性
Person.getConstructorName = function() { // 声明静态方法属性
    return this.constructorName;
}

console.log(Person.getConstructorName()); // 输出 Person
```
```javascript
// 2. 在 `class` 声明中声明静态属性
class Person {
    static constructorName = 'Person'; // 声明静态字符串属性
    static getConstructorName() {  // 声明静态方法属性
        return this.constructorName;
    }
    constructor(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
    }
}

console.log(Person.getConstructorName()); // 输出 Person
```
注意，静态方法中的`this`默认绑定是作为对象的函数本身,而不是函数创建的对象。

### 对象属性的私有化
好的封装性离不开对象属性私有化的支持，限制外界对对象的访问能力，对象本身才能更好的管理自身封装的逻辑。目前JavaScript是不支持对象属性私有化的。我们需要借助JavaScript的闭包机制来模拟对象属性的私有化。以下代码分别展示了构造函数和类中是如何模拟私有化属性。

在构造函数中模拟私有属性：
```javascript
function Person(name, age, job) {
    let privateValue = 'private value';
    this.name = name;
    this.age = age;
    this.job = job;
    this.getPrivateValue = function() {
        return privateValue;
    }
}

const person = new Person('Guang', 32, 'Software Engineer');
console.log(person.privateValue); // 输出 undefined
console.log(person.getPrivateValue()); // 输出 "private value"
```
注意，因为借用闭包来模拟私有属性，这个“私有属性”只是在构造函数中声明的一个变量，没有被绑定到`this`上，也不能够被添加到原型链上，它只能在构造函数的作用域中被访问，所以访问私有属性的方法不能够放到函数原型中去复用方法本身。

在`class`声明中模拟私有属性：
```javascript
class Person {
    constructor(name, age, job) {
        let privateValue = 'private value';
        this.name = name;
        this.age = age;
        this.job = job;
        this.getPrivateValue = function() {
            return privateValue;
        }
    }
}

const person = new Person('Guang', 32, 'Software Engineer');
console.log(person.privateValue); // 输出 undefined
console.log(person.getPrivateValue()); // 输出 "private value"
```
结合立即执行函数模拟私有静态属性结合上面两者。

在构造函数中模拟静态私有属性：
```javascript
const Person = (function () {
    let constructorName = 'Person';

    function Person(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
    }

    Person.getConstructorName = function() {
        return constructorName;
    };

    return Person;
})();

console.log(Person.constructorName); // 输出 undefined
console.log(Person.getConstructorName()); // 输出 "Person"
```

在`class`声明中模拟静态私有属性：
```javascript
const Person = (function () {
    let constructorName = 'Person';

    class Person {
        static getConstructorName() {
            return constructorName;
        }
        constructor(name, age, job) {
            this.name = name;
            this.age = age;
            this.job = job;
        }
    }
    return Person;
})();

console.log(Person.constructorName); // 输出 undefined
console.log(Person.getConstructorName()); // 输出 "Person"
```
方法的私有化和属性的私有化方法相同。

对象属性私有化的方式不止于此，另外比较常见的有属性名下划线+Proxy访问控制法、使用`Symbol`值作为属性标识法，以及使用`WeakMap`实现的方法，它们都需要借助特殊的机制，在此不再展开讨论。

### ESNext 中的对象属性私有化
[proposal-class-fields](https://github.com/tc39/proposal-class-fields)与[proposal-private-methods](https://github.com/tc39/proposal-private-methods)定义了`calss`声明的私有属性以及私有方法，这2个提案已经处于Stage 3。最新的Chrome已经支持了它们。在`class`声明中，在属性声明的属性名前添加字符`#`即可完成属性或方法的私有化。示例代码如下：
```javascript
class Person {
    #privateValue = 'private value';
    constructor(name, age, job) {
        this.name = name;
        this.age = age;
        this.job = job;
    }

    getPrivateValue() {
        return this.#privateValue;
    }
}

const person = new Person('Guang', 32, 'Software Engineer');
console.log(person.privateValue); // 输出 undefined
console.log(person.getPrivateValue()); // 输出 "private value"
```


介绍JavaScript中如何按照面向对象范式实现对象的封装。包括原型模式、构造函数模式、class声明，以及介绍JavaScript属性私有化。

JavaScript 面向对象编程之封装


在JavaScript语言设计之初，布兰登·艾克就引入了类似于Self语言中的原型机制。基于原型编程（英语：prototype-based programming），是面向对象编程的一种风格和方式。JavaScript的原型机制使它天然支持基于原型编程。原型模式强调对象的动态性和灵活性，允许直接修改对象属性且支持运行时修改，提供访问器属性。当然，在享受这些特性的同时，原型机制也带来了执行的不确定性、安全性、难以预测的问题。在讨论JavaScript使用原型模式创建对象的时候，我们提到过JavaScript是使用原型机制来扩展对象，基于这种扩展机制，我们完善了JavaScript创建对象的方法。这个机制在JavaScript实现继承范式中仍会大展身手，在讨论JavaScript继承之前，我们有必要对JavaScript的原型机制展开讨论。

## 对象原型

JavaScript中所有的对象都有一个内置属性，称为它的**prototype（原型）**，ECMA-262第5版中管这个指针叫`[[Prototype]]`。这个原型本身也是一个对象，原型对象也会有自己的原型，由此，对象间的的原型连接构成了**原型链**。原型链终止于拥有`null`作为其原型的对象上。当你试图访问一个对象的普通属性时：如果在对象本身中找不到该属性，就会在原型中搜索该属性。如果仍然找不到该属性，那么就搜索原型的原型，以此类推，直到找到该属性，或者到达链的末端，在这种情况下，返回`undefined`。为行文方便，若无特别强调或说明，下文中的原型单指内置属性prototype（原型）。

看一下之前的代码：
```javascript
const person = {
    name: 'Guang',
    age: 32,
    job: 'Software Engineer',
    introduce: function() {
        return 'My name is ' + this.name;
    }
};

console.log(person.name); // 输出 "Guang"
console.log(person.toString()); // 输出 "[object Object]"
console.log(person.angle); // 输出 undefined
```

当访问`person`的`name`属性时，`person`本身有这个属性，返回属性值。当`person`访问`toString`属性并调用时，`person`本身没有这个属性，JavaScript程序会沿着原型链寻找这个属性，并且找到了名为`toString`的属性，完成了属性的访问和调用。当访问`person`的`angle`属性时，`person`本身没有这个属性，原型链上也没找到这个属性，得到返回值`undefined`。

**注意**：我们不能够反过来以属性值为`undefined`来判断一个对象和它所连接的原型链上没有某个属性，因为可能存在这个属性但是值为`undefined`，可以使用`in`操作符来判断一个对象和它所连接的原型链上没有这个属性。如下代码：
```javascript
console.log('toString' in person); // 输出：true
console.log('unknownThing' in person); // false
```
`in`操作符和关键字`for`可以组合使用遍历对象的所有可枚举\[\[Enumerable\]\]属性，包括原型链上的。

ECMAScript标准规定一个对象的原型属于内置属性，原意是说对象的原型不能够直接访问，现实中主流浏览器以属性`__proto__`实现了对象的原型，所以每个对象都包含一个`__proto__`属性。不建议直接访问它，即使它可以访问，符合规范的做法是使用`Object.getPrototypeOf()`方法访问它。

获取并输出`person`的原型：
```javascript
console.log(Object.getPrototypeOf(person));
```

输出结果如下图

![person prototype](/person-proto.png "person prototype")

可以看到输出结果是一个对象，这个对象也有自己的原型，且这个原型值为`null`。

**注意**：访问对象的属性能够从对象原型中查找，设置对象属性并不能。当使用赋值语句为对象设置属性值时，只会修改对象本身的属性或者添加这个属性。通过为对象属性赋值无法修改原型中的属性。
```javascript
person.address = 'Beijing'; // 只会设置 person 对象自身的 address 属性
```

## 基于原型扩展对象
JavaScript中对象属性能够从原型中查找的机制，同时对象的原型是可更改的。这让我们能够通过扩展现有对象方式创建新的对象，或者扩展现有对象。指定一个对象的原型另一个对象，则这个对象获得了原型的属性和行为，可以直接使用，或者覆盖它们。

### 1. `Object.setPrototypeOf()`
我们可以通过`Object.setPrototypeOf()`动态地设置一个对象的原型。它的作用和通过`__proto__`属性设置一个对象的原型一样（通过`__proto__`属性设置原型也是非标准的，你应该总是使用`Object.setPrototypeOf()`）。请看如下代码：
```javascript
const person = {
    name: 'Guang',
    age: 32,
    job: 'Software Engineer',
    introduce: function() {
        return 'My name is ' + this.name;
    }
};

const engineer = {
    name: 'Greg'
};

Object.setPrototypeOf(engineer, person);

console.log(engineer.introduce()); // 输出 "My name is Greg"
```
在这个示例中，`engineer`扩展了`person`，使用了`person`的`introduce`方法，覆盖了`person`的`name`属性。在`person`调用`introduce`方法时，`introduce`方法中的`this`指向的是调用者`engineer`，而非定义者`person`。这是JavaScript程序运行时确定`this`指向的机制决定的。

>
> Tips: 不建议频繁地修改对象地原型。JavaScript的原型机制中的属性查找有一个缺点，当原型链比较长的时候，会造成性能问题。V8 JavaScript引擎是支持JIT的，其中包含对属性沿原型查找的优化，而频繁地设置对象原型会破坏JIT的查找优化。
>

### 2. `Object.create()`
Object.create() 方法创建一个新的对象，并允许你指定一个将被用作新对象原型的对象。请看如下代码：
```javascript
const person = {
    name: 'Guang',
    age: 32,
    job: 'Software Engineer',
    introduce: function() {
        return 'My name is ' + this.name;
    }
};

const engineer = Object.create(person);
engineer.name = 'Greg';

console.log(engineer.introduce()); // 输出 "My name is Greg"
```
代码执行效果同上。

### 3. 使用构造函数
所有的函数都有一个名为`prototype`的属性（下个小节会细讲），这个属性是所有调用该构造函数创建对象的原型对象，当我们修改这个原型对象的属性时，修改会对所有使用该构造函数创建的对象产生影响。

## 函数对象原型
在JavaScript中，所有的函数都有一个名为`prototype`的属性，我们在对象的构造函数模式创建一节中有提到。对象的prototype（原型）区别于对象的`prototype`属性，它没有绑定在命名为`prototype`的属性上。在JavaScript中函数也是对象，所以函数既有自己的prototype（原型），也有自己的`prototype`属性。当一个函数作为构造函数调用时，这个函数的`prototype`属性对象被设置为新构造对象的原型（按照惯例，是名为`__proto__`的属性）。我们说函数的`prototype`属性指向的对象可以存放函数作为构造函数创建的所有对象共享的属性和方法，以此来节约内存，原因就是访问对象属性时在原型上的查找机制。标识创建对象的构造方法的`constructor`属性也是放在对象原型上的，即构造函数的`prototype`属性对象中（而`constructor`属性又指向构造函数）。

我们用代码验证：
```javascript
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
}

Person.prototype.introduce = function() {
    return 'My name is ' + this.name;
};

const person = new Person('Guang', 32, 'Software Engineer');

console.log(Object.getPrototypeOf(person) === Person.prototype); // 输出 true
console.log(person.constructor === Person.prototype.constructor); // 输出 true
```
它们的原型关系图如下所示

![person prototype relation](/person-proto-ralation.png "person prototype relation")

这张图同时表达的信息还有对象`person`是由构造函数`Person`创建的。判断一个对象是否由一个构造函数创建可以使用`instanceof`操作符。`instanceof`操作符会沿着对象原型指向的原型链一直查找，并逐一判断原型链上的原型的`constructor`属性值是否是指定的构造函数。当找到`constructor`属性值为指定构造函数时，返回`true`，如果在原型链搜索结束也没找到，则返回`false`。示例代码如下：
```javascript
console.log(person instanceof Person); // 输出 true
console.log(person instanceof Array); // 输出 false
```

## 一切皆对象

在JavaScript中，`Object()`是基础的内建函数，除了原始类型数据，JavaScript中所有对象都由`Object()`函数创建，字面量创建对象的底层，仍然是调用`new Object()`。所以，所有对象的原型链的末端，都是函数`Object`的`prototype`属性，除非你手动更改它。而`Object.prototype`指向`null`，上面字面量创建的`person`对象的原型属性（`__proto__`）指向的就是`Object.prototype`，然后`Object.prototype`的值是`null`。我们也可以看到`person`对象的原型中`constructor`属性指向的是`Object()`。所有对象的原型链的末端都是函数`Object`的`prototype`属性，也是说**JavaScript中一切皆对象**的原因。

![person prototype](/person-proto-1.png "person prototype")

JavaScript中另一个基础的内建对象时`Function()`，所有函数均由`Function()`创建，包括`Object()`。如果考虑`Function()`和`Object()`，则使用构造函数创建`person`对象的原型关系图如下所示。

![person prototype relation with all roles](/person-proto-ralation-all.png "person prototype relation with all roles")

## 构造函数执行时做了哪些事
结合JavaScript原型机制，当使用`new`关键字调用函数时发生了那些事情呢？发生了下面四件事。
>
> 1. 创建一个新对象。
> 1. 设置构造函数的原型为的新对象的原型
> 1. 绑定函数的作用域到这个新对象上，即`this`指向这个新对象。
> 1. 函数返回。一般情况下函数返回第一步创建的新对象，如果返回其他值，如果返回值是对象，则返回这个对象，否则仍返回第一步创建的对象。
>

仿照`new`调用改写成普通函数如下：
```javascript
function myNew(Func, ...args) {
  // 创建一个新的空对象
  const obj = {};
  // 将这个空对象的__proto__指向构造函数的原型
  // obj.__proto__ = Func.prototype;
  Object.setPrototypeOf(obj, Func.prototype);
  // 以obj作为上下文对象对函数进行调用，拿到调用结果
  const res = Func.apply(obj, args);
  // 默认返回执行上下文对象（即obj），除非构造函数单独指定了非原始类型值的返回对象，指定原始类型值无效（构造函数必须返回对象）
  return res instanceof Object ? res : obj;
}
```

## 自有属性
访问一个对象的属性，这个属性可能在其自身，也可能在其原型上。有的时候我们需要判断属性是在自身上还是在原型上，这时我们可以使用`Object.hasOwn()`方法进行判断。代码如下：
```javascript
console.log(Object.hasOwn(engineer, 'name')); // 输出 true
console.log(Object.hasOwn(engineer, 'introduce')); // 输出 false
```
ES5中在`Object.prototype`定义了一个函数`hasOwnProperty()`方法，但是已经不再推荐使用它，因为他在对象原型链的末端，很容易被覆盖而改变行为。对于原型（`__proto__`）被设置`null`的对象来说，调用`hasOwnProperty()`会直接导致程序崩溃，所以建议使用`Object.hasOwn()`方法。譬如下面代码：
```javascript
const nullPrototypeObject = Object.create(null);
nullPrototypeObject.value = 1;

console.log(Object.hasOwn(nullPrototypeObject, 'value')); // 输出 true
nullPrototypeObject.hasOwnProperty('value'); // 运行报错：nullPrototypeObject.hasOwnProperty is not a function
```

## 原型机制的问题
原型是 JavaScript 的一个强大且非常灵活的功能，使得重用代码和组合对象成为可能。原型机制带来灵活性的同时，也带来了程序运行时的不确定性。这会导致一些问题。

### 猴子补丁（Monkey Patching）的命名冲突问题
曾经一种名为猴子补丁（Monkey Patching）的扩展技术在前端特别流行，做法就是利用JavaScript的原型机制，在扩展库中修改原生对象的原型来扩展原生对象暂时不支持的功能。当不同的扩展库应用到同一个项目中时，同样的扩展就会产生命名冲突的问题。另外，Monkey Patching的做法也会影响规范的制定。曾经因为已经广泛应用的第三方库对属性名的占用问题，官方不得不把`Array.prototype.contains()`更名为`Array.prototype.includes()`。同样的问题发生在`Array.prototype.flatten()`更名为`Array.prototype.flat()`。

### 原型的不可靠性
原型机制是扩展对象的很强大的机制，但是JavaScript没有限制原型的扩展方式，开发人员可随意更改原型属性甚至原型对象本身，有时这么做是危险的，它可能带来对象原型链连接的混乱。下面代码展示了直接通过修改构造函数`prototype`属性来扩展它所创建对象带来的问题：
```javascript
function Person(name, age, job) {
    this.name = name;
    this.age = age;
    this.job = job;
}

// 1. 第一次扩展
Person.prototype.introduce = function() {
    return 'My name is ' + this.name;
};
const person1 = new Person('Guang', 32, 'Software Engineer');

// 2. 第二次扩展
Person.prototype = {
    constructor: Person,
    getJob: function() {
        return this.job;
    }
}
const person2 = new Person('Greg', 29, 'Hardware Engineer');
console.log(Object.getPrototypeOf(person1) === Object.getPrototypeOf(person2)); // 输出 false
person1.getJob(); // 运行报错：person1.getJob is not a function
person2.introduce(); // 运行报错：person2.introduce is not a function
```
代码中对构造函数`Person()`第一次扩展是工作良好的，它仅仅是为所有通过`Person()`创建的对象添加了`introduce()`方法，没有产生其他副作用。第二次扩展虽然修复了`constructor`指向问题，但它为构造函数`Person()`赋值了一个新对象，这样，扩展之前通过`Person()`创建的对象原型和扩展后通过`Person()`创建的对象原型便不是同一个对象。通过第二次扩展的方式进行扩展，不能扩展之前通过`Person()`创建的对象，并且覆盖了第一次扩展。所以`person1.getJob()`的调用会报错。

上述代码的原型变化如下图所示：
![prototype chaos issue](/prototype-chaos-issue.png "prototype chaos issue")


介绍JavaScript中原型机制。包括如何基于原型扩展对象，构造函数如何使用原型，以及原型机制可能造成的问题。

JavaScript 原型机制


在编程中，继承是指将特性从父代传递给子代，以便新代码可以重用并基于现有代码的特性进行构建。继承就是对对象的一种扩展，扩展一类对象得到新的对象，使新的对象能够复用被扩展对象现有的行为或特性。在基于类的继承方式下，当一个子类完成继承时，由该子类所创建的对象既具有其子类中单独定义的属性，又具有其父类中定义的属性（以及父类的父类，依此类推）。Java，C#这类语言使用类来管理对象（实例），对象的创建基于类，对象的继承也是基于类（类的继承映射对象的继承）。JavaScript引入了原型机制来管理程序中的对象，也是基于原型模式，JavaScript完成对象的继承实现，提高了JavaScript程序的代码重用性、灵活性和扩展性。基于类的继承又叫接口继承，JavaScript这种继承实现称为实现继承，实现继承支持运行时改变继承关系，它更灵活。

## 非类继承
在[JavaScript 原型机制](/posts/javascript-prototype 'JavaScript 原型机制')中，我们介绍了JavaScript的原型机制，可以看到，JavaScript原型机制已经在某种意义上支持了继承。但要实现工作良好的继承方法，仍需要一些额外工作。下面让我们逐步展开。另外需要说明，大部分讲解JavaScript继承的内容中，仍会采用父类、子类表述继承关系，本文不会如此，既然JavaScript不是基于类完成的继承，那么采用父类、子类便不再准确。

严格来说JavaScript中的继承关系不是发生在构造函数之间，JavaScript中的继承关系发生在构造函数创建的对象之间。构造函数创建的对象获得了函数体中描述的属性，构造函数本身不具备这些属性，复用的是构造函数中描述的属性（获取这些属性的方式仍然是要调用构造函数创建对象）而不是构造函数自身的属性。在Java和C#中，类和对象是不同的事物，类关系完全映射对象关系是严谨的，但是**在JavaScript中函数也是对象**，如果“构造函数A”创建的对象复用了“构造函数B”创建的对象的属性或方法我们称“构造函数A”继承了“构造函数B”，同时“构造函数A”本身并没有“构造函数B”的属性，这样就与继承的概念不符。

> 诚然，如果“构造函数A”创建的对象复用了“构造函数B”创建的对象的属性或方法，那一定是“构造函数A”的复用了“构造函数B”的描述（创建对象的描述）。但是将函数的描述与函数的属性或方法混为一谈仍然是不严谨的。要时刻记得，在JavaScript中函数也是对象。

在本文中我决定使用父代函数、子代函数、子代对象来表述继承关系。当一个构造函数`SubFunction`创建的对象继承了另一个构造函数`SuperFunction`描述的对象定义时，我们称`SubFunction`为子代函数，称`SuperFunction`为父代函数。称继承了其他对象属性或方法的对象为子代对象。称被子代对象所继承的对象为父代对象。

> 父代函数、子代函数一定是按照构造函数调用而调用的函数。

## 1. 原型链继承
基于原型的查找机制，实现基本的继承，代码如下：
```javascript
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.friends = [];
}

Person.prototype.introduce = function() {
    return 'My name is ' + this.name;
};

function Engineer(job) {
    this.job = job;
}

// 实现继承
Engineer.prototype = new Person('Guang', 32);
// 修复 constructor
Engineer.prototype.constructor = Engineer;

const engineer = new Engineer('Software Engineer');
```
通过更改构造函数的`prototype`属性，实现了最简单的继承，这个继承实现难以良好地工作。第一个问题是非函数属性无法真实继承，子代（函数`Engineer`创建的）对象虽然很好的继承了父代函数（`Person`）中定义的方法和`prototype`属性对象上的方法，但是不能够良好的继承父代函数中定义的非函数属性。关于非函数属性继承的问题分两种情况：
+ 当使用赋值语句为对象设置属性值时，只会修改对象本身的属性或者添加这个属性，通过为对象属性赋值无法修改原型中的属性；
+ 如果子代函数创建的对象直接操作原型上引用值类型的属性，这个影响会广播给所有通过子代函数创建的对象，发生严重的错误。

在代码示例中，为`engineer`的`name`赋值，会在`engineer`自身添加属性`name`，无法修改父代对象的`name`。如果`engineer`直接使用引用值类型`friends`,产生的作用会广播给所有（通过函数`Engineer`创建的）子代对象。请看验证代码：
```javascript
// 赋值前访问的是原型中的 name
console.log(engineer.name); // 输出 "Guang"
console.log(Object.getPrototypeOf(engineer).name); // 输出 "Guang"

// 赋值engineer.name后，engineer自身获得name，原型中的name不变
engineer.name = 'Greg';
console.log(engineer.name); // 输出 "Greg"
console.log(Object.getPrototypeOf(engineer).name); // 输出 "Guang"

// engineer继承的introduce工作良好
console.log(engineer.introduce()); // 输出 "My name is Greg"

// 创建一个 engineer2，并通过 engineer 调用 friend 数组
const engineer2 = new Engineer('Hardware Engineer');
engineer.friends.push('Wei');
console.log(engineer.friends); // 输出 ['Wei']
console.log(engineer2.friends); // 输出 ['Wei']
```
第二个问题是调用构造函数传参问题，因为是在使用子代函数创建对象之前进行原型绑定实现的继承，在调用子代函数创建对象时，无法为父代函数的调用传参，这一点和基于类的继承有很大的区别。综上所述，实践中很少单独使用原型链完成继承。

## 2. 借用构造函数继承
为了解决原型链继承模式中的两个问题，可以使用借用构造函数的继承方式（有时候也叫伪造对象或经典继承）。在这种模式中，通过在子代函数中把当前`this`绑定到父代函数上进行调用，以获得父代函数中描述的属性。请看示例代码：
```javascript
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.friends = [];
    this.sayHi = function() {
        return 'Hi, I am ' + this.name;
    }
}

Person.prototype.introduce = function() {
    return 'My name is ' + this.name;
};

function Engineer(name, age, job) {
    // 实现继承
    // Function.prototype.call() 函数指定函数运行时的`this`值，并且支持传递调用参数。
    // 这里把Engineer函数中的`this`值传递给Person，
    Person.call(this, name, age);
    this.job = job;
}

const engineer1 = new Engineer('Guang', 32, 'Software Engineer');
const engineer2 = new Engineer('Greg', 29, 'Hardware Engineer');
```
使用此种继承方式，每次调用子代函数时都会调用父代函数，解决了向父代函数传值的问题，同时将子代函数作用域中的`this`传递给父代函数进行调用，完全继承了父代函数中描述的属性，并且子代对象间不共享这些属性。**注意**：父代函数的调用语句要书写在子代函数实现的顶部，否则父代函数中描述的属性会覆盖子代函数中描述的同名属性。
请看验证代码：
```javascript
console.log(engineer1.name); // 输出 "Guang"
console.log(engineer2.name); // 输出 "Greg"

console.log(engineer1.sayHi()); // 输出 "Hi, I am Guang"
console.log(engineer2.sayHi()); // 输出 "Hi, I am Greg"

engineer1.friends.push('Wei');
engineer2.friends.push('Tian');
console.log(engineer1.friends); // 输出 ['Wei']
console.log(engineer2.friends); // 输出 ['Tian']
```
可以看到，`engineer1`和`engineer2`分别获得了父代函数中描述的属性，并且不共享。

借用构造函数继承模式也有问题，子代对象无法继承父代函数`prototype`属性中的方法，如果调用`engineer1.introduce()`，程序会报错。
```javascript
engineer1.introduce(); // 报错： engineer1.introduce is not a function
```

## 3. 组合继承
组合继承又叫伪经典继承，它是将原型链继承和借用构造函数继承组合到一起的继承模式。这样，既可以安全的继承父代函数中描述的属性，又继承了父代函数`prototype`属性中的方法。代码示例如下：
```javascript
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.friends = [];
    this.sayHi = function() {
        return 'Hi, I am ' + this.name;
    }
}

Person.prototype.introduce = function() {
    return 'My name is ' + this.name;
};

function Engineer(name, age, job) {
    // 继承属性
    Person.call(this, name, age);
    this.job = job;
}

// 继承方法
Engineer.prototype = new Person();
// 修复 prototype 中的 constructor
Engineer.prototype.constructor = Engineer;

const engineer1 = new Engineer('Guang', 32, 'Software Engineer');
const engineer2 = new Engineer('Greg', 29, 'Hardware Engineer');
```
验证继承实现效果：
```javascript
console.log(engineer1.name); // 输出 "Guang"
console.log(engineer2.name); // 输出 "Greg"

console.log(engineer1.sayHi()); // 输出 "Hi, I am Guang"
console.log(engineer2.sayHi()); // 输出 "Hi, I am Greg"

engineer1.friends.push('Wei');
engineer2.friends.push('Tian');
console.log(engineer1.friends); // 输出 ['Wei']
console.log(engineer2.friends); // 输出 ['Tian']

console.log(engineer1.introduce()); // 输出 "My name is Guang"
console.log(engineer2.introduce()); // 输出 "My name is Greg"
```
组合式继承融合了原型链继承和借用构造函数继承的优点，避免了它们的缺点。组合式继承达到了工作良好的效果。不过也有一个问题，组合式继承中指定一个父代对象为子代函数`prototype`属性，来继承父代对象中的方法。这样做的结果是，父代函数中描述的属性和方法，既出现在子代对象自身，又出现在子代对象的原型上，自身属性会遮蔽原型上的同名属性，这个结果不影响程序的功能，但还是造成内存的浪费。这是组合式继承的瑕疵之处。
验证代码如下：
```javascript
console.log(Object.hasOwn(engineer1, 'name')); // 输出 true
console.log(Object.hasOwn(Object.getPrototypeOf(engineer1), 'name'));  // 输出 true
console.log(engineer1.name === Object.getPrototypeOf(engineer1).name); // 输出 false
console.log(engineer1.name); // 输出 "Guang"
Object.getPrototypeOf(engineer1).name = 'engineer prototype name';
console.log(engineer1.name); // 输出 "Guang"
console.log(Object.getPrototypeOf(engineer1).name); // 输出 "engineer prototype name"
```

## 4. 原型式继承
如果我们期望继承的是一个简单对象的属性和方法，而不是一个构造函数描述的属性和方法，那么原型式继承是简单有效的。在一个工厂方法中，它通过指定子代对象的原型为父代对象，完成子代对象对父代对象的继承。
示例代码如下：
```javascript
function object(obj) {
    function F() {}
    F.prototype = obj;
    return new F();
}

const person = {
    name: 'Guang',
    age: 32,
    friends: [],
    introduce: function() {
        return 'My name is ' + this.name;
    }
};

const personCopy1 = object(person);
const personCopy2 = object(person);
```
原型式继承的本质就是基于一个对象为原型，创建一个新对象。可以使用`Object.create()`代替工厂函数`object()`。即：
```javascript
const person = {
    name: 'Guang',
    age: 32,
    friends: [],
    introduce: function() {
        return 'My name is ' + this.name;
    }
};

const personCopy1 = Object.create(person);
const personCopy2 = Object.create(person);
```
原型式继承和原型链继承都是基于原型机制，它们都可以很好地继承父代对象的方法。它们的不同点在于原型式继承面向的是对象，原型链式继承面向构造函数。原型式继承具有类似于原型链式继承的问题：无法继承原型上的非函数属性，以及所有的子代对象和父代对象共享父代对象的引用值类型属性的变化。
验证代码如下：
```javascript
personCopy1.friends.push('Wei');
console.log(personCopy1.friends); // 输出 ['Wei']
console.log(person.friends); // 输出 ['Wei']
console.log(personCopy2.friends); // 输出 ['Wei']
```
## 5. 寄生式继承
寄生式继承是原型式继承的增强版。当你在工厂函数中创建对象后没有直接返回，而是先对新对象进行扩展后返回，就是寄生式继承。
示例代码如下：
```javascript
const person = {
    name: 'Guang',
    age: 32,
    friends: [],
    introduce: function() {
        return 'My name is ' + this.name;
    }
};

function createAnother(obj) {
    const clone = Object.create(obj);
    clone.sayHi = function() {
        return 'Hi';
    }
    return clone;
}

const personCopy1 = createAnother(person);
const personCopy2 = createAnother(person);
```
寄生式继承在为对象添加方法不能够将方法添加到子代对象的原型上，因为子代对象的原型就是父代对象，这么做就是把新方法添加到父代对象上了。将方法添加到子代对象自身存在性能问题。

## 6. 寄生组合式继承
组合式继承是原型链继承和借用构造函数继承的组合，上文我们也说到过，组合式继承有一个在子代对象原型上添加无效属性的瑕疵。将组合式继承和寄生式继承再组合，可以解决这个小问题。在寄生组合式继承中，不再直接将一个父代对象设置为子代函数的`prototype`属性，而是采用寄生式继承父代函数的`prototype`属性，进行扩展后（调整构造函数相关属性），设置为子代函数的`prototype`属性。
寄生组合式继承的示例代码如下：
```javascript
function inheritPrototype(ChildConstructor, SuperConstructor) {
    const newPrototype = Object.create(SuperConstructor.prototype);
    newPrototype.constructor = ChildConstructor;
    ChildConstructor.prototype = newPrototype;
}

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.friends = [];
    this.sayHi = function() {
        return 'Hi, I am ' + this.name;
    }
}

Person.prototype.introduce = function() {
    return 'My name is ' + this.name;
};

function Engineer(name, age, job) {
    // 继承属性
    Person.call(this, name, age);
    this.job = job;
}

// 继承方法
inheritPrototype(Engineer, Person);

const engineer1 = new Engineer('Guang', 32, 'Software Engineer');
const engineer2 = new Engineer('Greg', 29, 'Hardware Engineer');
```
寄生组合式继承达到了组合式继承同样的继承效果，同时避免了在子代对象原型上创建不必要的、多余的属性。
验证代码如下：
```javascript
// 1. 工作良好
console.log(engineer1.name); // 输出 "Guang"
console.log(engineer2.name); // 输出 "Greg"

console.log(engineer1.sayHi()); // 输出 "Hi, I am Guang"
console.log(engineer2.sayHi()); // 输出 "Hi, I am Greg"

engineer1.friends.push('Wei');
engineer2.friends.push('Tian');
console.log(engineer1.friends); // 输出 ['Wei']
console.log(engineer2.friends); // 输出 ['Tian']

console.log(engineer1.introduce()); // 输出 "My name is Guang"
console.log(engineer2.introduce()); // 输出 "My name is Greg"

// 2. 子代对象原型上没有必要用的、冗余的属性
console.log(Object.hasOwn(engineer1, 'name')); // 输出 true
console.log(Object.hasOwn(Object.getPrototypeOf(engineer1), 'name'));  // 输出 false
```
## 7. `class`声明的继承
ECMAScript 6引入了`class`声明，同时引入了关键字`extends`来表达`class`声明之间的继承。使用它们可以更简洁、优雅的实现继承。示例代码如下：
```javascript
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
        this.friends = [];
        this.sayHi = function() {
            return 'Hi, I am ' + this.name;
        }
    }

    introduce() {
        return 'My name is ' + this.name;
    }
}

class Engineer extends Person {
    constructor(name, age, job) {
        super(name, age);
        this.job = job;
    }
}
const engineer1 = new Engineer('Guang', 32, 'Software Engineer');
const engineer2 = new Engineer('Greg', 29, 'Hardware Engineer');
```
使用`class`声明和关键字`extends`完成的继承是对Java、C#类继承的语法模仿，这个继承实现和寄生组合式继承效果相同，验证代码可以直接使用寄生组合式继承。如果你的程序运行环境支持`class`声明和关键字`extends`，非常建议直接使用它们实现你的继承机制。如果你的程序运行环境不支持，你仍然可以使用它进行开发，然后使用Babel工具将其转换成ECMAScript 5的代码。你会发现Babel转换`class`声明的继承时，将它转换成了寄生组合式继承。


介绍JavaScript中如何按照面向对象范式实现继承。包括原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承、类声明继承。

JavaScript 面向对象编程之继承


在面向对象编程（OOP）中，多态（Polymorphism）是指同一操作或方法在不同对象上有不同表现形式的能力。简而言之，多态允许不同类的对象在调用相同的方法时表现出不同的行为。在JavaScript中，对象的多态性是与生俱来的。基于原型机制产生的属性遮蔽行为，可以很自然地覆盖原型上的方法。根据接收参数的不同，同样的方法调用可以轻易地表现出不同的行为。

常见的两种实现方式
+ 覆盖。子类重新定义父类方法，不同的子类可以自定义实现父类的方法。
+ 重载。多个同名但参数不同的方法。ECMAScript中没有重载的概念，但是JavaScript函数可以对同名函数中不同类型的传参做出不同行为的响应。算是某种意义上的重载。

## 在子对象上覆盖父对象的方法
```javascript
class Person {
    constructor(name, age) {
        this.name = name;
    }

    introduce() {
        return 'My name is ' + this.name;
    }
}

class Engineer extends Person {
    constructor(name, age, job) {
        super(name, age);
        this.job = job;
    }

    introduce() {
        return 'My job is ' + this.job;
    }
}

const person = new Person('Guang', 32, 'Software Engineer');
const engineer = new Engineer('Guang', 32, 'Software Engineer');

console.log(person.introduce()); // 输出："My name is Guang"
console.log(engineer.introduce()); // 输出："My job is Software Engineer"
```
在这个示例中，`Person`类和`Engineer`类都实现了`introduce`方法，但`Engineer`重写了该方法来提供不同的行为。根据`person`和`engineer`的不同类型，调用了不同的 introduce 方法。

## 重载
```javascript
function add(a, b) {
    return a + b;
}

console.log(add(1, 2)); // 输出 3
console.log(add('1', '2')); // 输出 "12"
```
根据输入参数的类型，`add()`函数相应了不同的行为，对两个数字，进行了数字加操作，对两个字符串，进行了字符串拼接操作。这是一个简单的重载示例。


JavaScript 面向对象编程之多态

介绍JavaScript异步编程的实现，包括回调函数实现、事件监听的异步、使用Promise实现异步、借用生成器实现异步，和使用async/await实现异步。

JavaScript 异步编程


JavaScript程序的执行离不开JavaScript引擎对程序代码的解释和执行，同时，也离不开完备的宿主环境承载。任何JavaScript程序额输出、资源访问、用户交互以及其它副作用的产生，都需要宿主环境提供的机制来保证。在客户端，JavaScript程序寄宿在浏览器环境中，它提供了内存存储、任务调度、网络资源请求API（fetch等）、HTML DOM等基础设施。在服务端，Node.js是另一种JavaScript程序的宿主环境。JavaScript程序被设计为单线程应用程序，同时支持强大的异步编程，主要原因就在于宿主环境按照事件循环进行的任务调度机制在起作用。我们会对JavaScript程序的执行模型做简单介绍，以及深入探讨浏览器中的事件循环机制。

## 执行模型
JavaScript程序的正常运行，离不开JavaScript引擎和宿主环境的相互配合。JavaScript引擎实现了ECMAScript描述的语言语法和基本对象、提供了核心功能。它获取源代码，进行解析并执行。程序执行的效果和各种资源访问和交互，则由宿主环境承载。

### JavaScript执行代理
在JavaScript中，每个JavaScript的自主执行器被称为一个代理。每个JavaScript执行代理类似于一个线程（请注意，底层实现可能是也可能不是实际的操作系统线程）。宿主环境会为每个JavaScript执行代理提供以下基础资源：
+ 堆内存。宿主环境为每个JavaScript执行代理分配一块独属的堆内存区域，用于存储JavaScript执行代理运行期间产生的对象。同时，宿主环境提供不同代理之间共享内存的机制（SharedArrayBuffer）。
+ 执行上下文栈。执行上下文栈就是调用栈，它通过将执行上文（例如函数执行上下文）入栈和出栈来转移代码执行控制流。执行上下文栈遵循后进先出的原则，每个任务都会被作为一个新的“栈帧”推送到栈的顶端，随着一个任务执行完毕，它所对应的栈帧也会被推出栈。
+ 任务队列。任务队列在HTML规范中被称为事件循环，它是单线程运行的JavaScript支持异步编程的重要机制。之所以称之为队列，是因为它遵循先进先出的原则：先执行的任务会先于后执行。

对于（堆）内存的管理，我们在[JavaScript 内存管理](/posts/javascript-memory-management "JavaScript 内存管理")中有详细讨论，文中论述了JavaScript的内存分配和回收的机制。对于执行上下文栈，我们在[JavaScript 执行上下文和执行栈](/posts/javascript-excution-context "JavaScript 执行上下文和执行栈")，文中解析了JavaScript执行上下文模型及介绍了它给声明提升的影响。关于任务队列（事件循环），我们在本文的后半部分会详细解析。

一个web环境的JavaScript执行代理可以是以下之一：

1. 同源window代理。同源window代理包括数个`window`可相互访问的对象，它们可以直接相互访问或者通过`document.domain`访问。如果`window`是源键（origin-keyed）标识的，则只有同源`window`才能相互访问。
1. Dedicated worker代理。它包含一个`DedicatedWorkerGlobalScope`。
1. Shared worker代理。它包含一个`SharedWorkerGlobalScope`。
1. Service worker代理。它包含一个`ServiceWorkerGlobalScope`。
1. Worklet worker代理。它包含一个`WorkletGlobalScope`。

换句话说，每个Web Worker都会创建自己的代理，而一个或多个`window`对象可能位于同一个代理中——一般情况下是HTML文档中包含同源的iframe。

JavaScript执行代理的执行模型图：
![JavaScript 执行代理模型](/javascript-execution-model.png "JavaScript 执行代理模型")

### 领域（Realms）

每个JavaScript执行代理拥有多个领域（realms），这些领域可以同步的访问彼此。每个执行代理还拥有单独的内存模型，用于指示它是否是小端字节序存储、是否可以被同步阻塞、以及原子操作是否无锁。每段JavaScript代码在加载时都会与一个领域 (realm) 关联，即使从其他领域调用，该领域 (realm) 也保持不变。领域 (realm) 包含以下信息：
1. 内置对象列表，列表中包括`Array`，`Function`，`RegExp`等。
1. 全局声明的变量、`globalThis`对象、其它全局对象。
1. 模板字符数组缓存。

需要注意的是，领域和全局对象（`Window`、`WorkerGlobalScope`、`WorkletGlobalScope`）是一一对应的。譬如说，几个同源的iframe嵌入在同一个同源的HTML文档中，它们的JavaScript可能运行在同一个JavaScript执行代理下，但是它们在各自不同的域中执行，各自拥有自己的全局对象和领域 (realm) 。在讨论全局对象的身份时，通常会提到领域 (Realm)。在另一个领域中构造的数组`arr`将具有与当前领域中的`Array.prototype`对象不同的原型对象，因此，`arr instanceof Array`会错误地返回`false`。`Array.isArray()`或`Error.isError()`之类的方法才能正常工作。

## 事件循环（任务队列）

代理是一个线程，这意味着解释器一次只能处理一个语句。当代码全部同步时，这没问题，因为我们总是可以取得进展。当程序遇到一个耗时操作的时候，很容易造车页面“假死”，作为界面程序的脚本语言，我们希望JavaScript程序运行时永远不会阻塞的。JavaScript执行代理将JavaScript的逻辑调用（事件）组织成一个个任务，并维护任务组成的队列对任务逐个按顺序执行，在HTML术语中，它被称为事件循环。

根据事件循环驱动的执行代理的类型，事件循环分为三种：
1. Window事件循环
2. Worker事件循环
3. Worklet事件循环

同一个代理中的不同领域（realm）共享同一个事件循环。这意味着，多个同源窗口可能运行在相同的事件循环中，每个队列任务进入到事件循环中以便处理器能够轮流对它们进行处理。网页或者app的代码和浏览器本身的用户界面程序运行在相同的线程中，共享相同的事件循环。该线程就是主线程，它除了运行网页本身的代码之外，还负责收集和派发用户和其他事件，以及渲染和绘制网页内容等。

当代理执行一个任务的时候，可能会创建新的任务，新创建的任务会放入任务队列的尾端。所谓异步编程，就是创建的任务并非直接放入待执行任务队列，而是被挂起，等待恰当的时机放入执行队列排队、等待执行。当执行一个任务的时候，JavaScript执行代理会将任务压入执行栈进行执行。JavaScript执行代理会周期性的检查任务队列，一旦队列不为空就会开始执行，直到任务队列为空，然后等待下一次循环。

JavaScript事件循环的示意图如下：
![JavaScript 事件循环](/javascript-event-loop.png "JavaScript 事件循环")

在执行某个任务时，执行的任务都会在处理其他任务之前完全处理完毕。这在推理程序时提供了一些很好的特性，例如，每当一个函数运行时，它都不会被抢占，并且会在任何其他代码运行之前完全运行（并且可以修改该函数操作的数据）。这样，JavaScript执行代理既保证了单线程开发的简洁，又实现了异步模式。相较于其它多线程实现异步的开发语言，它们总是需要处理复杂的线程间资源竞争和状态同步问题。

### 任务与微任务

为了更好的实现异步编程，HTML规范引入了微任务的概念。由此，HTML事件循环将任务分为两类：任务和微任务。队列也分为任务队列和微任务队列。起初，微任务队列主要用来实现`Promise`对象的异步机制。目前，以下异步机制都基于微任务实现：

1. `Promise`（`async`/`await`）异步管理；
1. HTML5新特性`MutaionObserver`；
1. 使用全局的`queueMicrotask()`方法创建微任务；
1. Node.js中的`process.nextTick()`方法创建微任务。

而以下代码调用产生是任务：
1. &lt;script>标签代码；
1. `setTimeout()`、`setInterval()`注册回调；
1. 触发了一个事件，将其回调函数添加到任务队列时，包括I/O事件和UI事件；
1. UI render；
1. `setImmediate()`注册回调（Node.js中）。


> 很多文档中会采用“宏任务（micro task）”来特指任务，“宏任务”这一术语并非来自ECMAScript标准或HTML规范，HTML规范中使用“Generic Task”一词表示普通任务。宏任务（micro task）一词来源于JavaScript社区约定。MDN文档没有采用“宏任务”一词，本文和MDN文档保持一致。

微任务具有更高优先级，当JavaScript执行代理完成（清空）当前的任务队列，总是优先拉取微任务队列中的任务作为新任务，只有清空了微任务队列，JavaScript执行代理才会拉取新的任务队列。它们的区别很重要，JavaScript执行代理对它们的处理规则如下：

+ 将每次JavaScript执行的每次循环称为一次**迭代**。当一次循环迭代开始时，会检查任务队列，将任务队列中的所有任务加入到当前迭代中，迭代开始后，后续加入到任务队列的任务不再加入到当前迭代，而是等待下一次迭代进行执行。
+ JavaScript执行代理执行完加入当前迭代的所有任务并且执行上下文为空后，执行代理开始按顺序执行微任务队列中的微任务，直到微任务队列为空。与任务队列不同的是，新加入的微任务也会在当前迭代执行，没有等待，一直到微任务队列为空，换句话说，微任务可以添加新的微任务到队列中，这些新的微任务将在下一个任务开始运行之前，在当前事件循环迭代结束之前执行。

加入微任务后的事件循环模型运行图示如下：
![JavaScript 微任务事件循环](/javascript-event-loop-full.png "JavaScript 微任务事件循环")

`setTimeOut()`设置延迟为零并不是真的会立即执行：
```javascript
setTimeout(() => {
    console.log('run setTimeout task.'); // 异步任务
}, 0);

new Promise((resolve) => {
    console.log('promise created.'); // 同步任务
    resolve();
}).then(() => {
    console.log('promise resolved.'); // 异步微任务
});
```
运行代码，得到按顺序输出的以下结果：
```
promise created.
promise resolved.
run setTimeout task.
```

微任务和任务在执行等级上的区别，使得开发人员更灵活地安排代码地执行逻辑。它保证了使得给定的函数在没有其他脚本执行干扰的情况下运行（没有鼠标坐标更改，没有新的网络数据等）。也保证了微任务能在用户代理有机会对该微任务带来的行为做出反应之前运行。Web Worker和Worklet分别有自己的任务队列和微任务队列。

### 使用`queueMicrotask()`

有时，为了确保任务顺序的一致性，即便当结果或数据是同步可用的，也要同时减少操作中用户可感知到的延迟而带来的风险，使用微任务是非常有效的。通常，这些场景关乎捕捉或检查结果、执行清理等；其时机晚于一段JavaScript执行上下文主体的退出，但早于任何事件处理函数、timeouts或intervals及其他回调被执行。

在`queueMicrotask()`出现之前，人们晦涩地使用`Promise`去创建微任务，这么做有一定风险。首先，`Promise`中由回调抛出的异常被报告为rejected promises而不是标准异常；其次，创建和销毁 promise 带来了事件和内存方面的额外开销。为了允许第三方库、框架、polyfill能更好的使用微任务，JavaScript在`Window`和`WorkerGlobalScope`接口上暴露了`queueMicrotask()`方法。

> **警告**：因为微任务自身可以入列更多的微任务，且事件循环会持续处理微任务直至队列为空，那么就存在一种使得事件循环无尽处理微任务的真实风险。如何处理递归增加微任务是要谨慎而行的。

## 参考内容

+ [JavaScript execution model(MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Execution_model)
+ [In depth: Microtasks and the JavaScript runtime environment](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide/In_depth)
+ [Using microtasks in JavaScript with `queueMicrotask()`](https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide)


介绍JavaScript的事件循环驱动模型，还包括JavaScript程序的整个执行模型，包括任务和微任务在事件模型中如何调度。

JavaScript 事件循环模型

介绍JavaScript程序的内存管理。包括内存管理的基本概念——堆、栈、分配、回收、回收算法，以及介绍V8 引擎中内存管理的工作方式。

JavaScript 内存管理

计算机不能够直接在计算机系统中执行我们编写的程序源代码（source code），计算机能够直接运行的指令被称为机器码（machine code）。通常情况下，我们使用编译器或解释器来将源代码转换成可执行的机器码。编译器的工作方式是提前编译（Ahead-of-Time Compilation），编译过程是静态的，运行时之前的；解释器的工作方式是解释（Interpretation）执行，解释是动态的，是运行时的。在很久之前，JavaScript是解释型编程语言。而目前，JavaScript引擎在运行JavaScript源代码时，采用的是新型的处理方式——即时编译。

## 程序语言的类型
非常早期的计算机软件都是用汇编语言写就的，这是一种很低效的开发模式，后来人们编写编译器、发明了便于人类编写和维护的高级编程语言，它们更适合编写可重用的软件。编译器主要目的是将高级编程语言写就的源代码翻译为计算机能解读、运行的低阶机器码的程序。编译器拿到源代码后对其进行预处理、编译、汇编、链接之后，生成可执行文件，然后电脑才会运行这个最终的可执行文件。使用编译器编译源代码后执行的编程语言称为编译语言。我们熟知的编译型编程语言有最初的Pascal、C、C++。

> 一个现代编译器的主要工作流程如下：
> 源代码（source code）→ 预处理器（preprocessor）→ 编译器（compiler）→ 汇编程序（assembler）→ 链接器（linker）→ 可执行文件（executables），最后打包好的文件就可以给电脑去安装执行了。

使用编译类型的语言在进行软件开发时，每次调试都需要重新编译，而编译的过程也很漫长。在程序开发过程中，开发人员一直处于“编辑源代码-编译-执行-调试”工作循环中。后来人们编写了解释器（通常由Pascal或C写就），解释器对源代码一行一行的边解释边执行，执行源代码时不需要重新编译整个程序，只需要“编辑源代码-解释-调试”，进一步减轻了程序开发和更新的负担。解释器执行程序的方法主要有两种：一、直接执行源代码；二、转换源代码到更有效率的字节码，执行字节码。使用解释器进行源代码执行的编程语言称为解释型语言。我们系统上搭载的大部分Shell脚本属于执行源代码的解释器，其它我们熟知的解释型语言包括Perl、Python、Ruby，以及初期的JavaScript，会将源代码编译成字节码来执行。

编译语言和解释型语言的源代码的执行流程图如下：

![解释器和编译器的工作流程图](/compiler-interpreter-process.png "解释器和编译器的工作流程图")

在程序运行速度上，使用解释器来执行程序会比直接执行编译过的机器代码程序来得慢。因为解释器每次都必须去分析并翻译它所执行到的程序行，而编译过的程序就只是直接执行。这个在执行时的分析被称为"解释式的成本"。从执行流程上看，解释器虚拟机在执行字节码的时候，内部是属于编译型程序运行的，也就是说解释型的程序运行依托于编译型程序的运行之上，多了解析和解释的过程，自然有多的执行消耗。在解释器中，变量的访问也是比较慢的，因为每次要访问变量的时候它都必须找出该变量实际存储的位置，而不像编译过的程序在编译的时候就决定好了变量的位置了。同时，系统在执行解释型编程语言程序时，需要额外的内存资源维护解释器的运行。所以在严格要求程序执行效率或者严格要求内存空间的硬件设备上，仍然需要使用编译语言开发程序。

另外，解释型语言开发的软件的执行依赖于解释器，只需要实现不同版本的解释器，同样的代码便可以在不同的平台上运行（解释器隐藏了底层系统细节上的不同）。所以，解释型语言有非常良好的跨平台性。

所以，解释型编程语言和编译语言的对比如下：

| | 解释型语言 | 编译语言 |
| ---- | ---- | ---- |
| 运行方式 | 逐代码行运行（运行时解释） | 整体编译后运行（提前编译：AOT） |
| 运行速度 | 运行慢 | 运行块 |
| 内存要求 | 内存占用较多 | 内存占用较少 |
| 开发调试流程 | 简单 | 繁复 |
| 移植性 | 容易跨平台 | 不容易跨平台 |

高级编程语言的两种执行方式各有优点和缺点。即时编译是两种传统运行的结合，它结合了两者的优点和缺点。

### 即时编译
即时编译（英语：Just-in-time compilation，缩写为JIT）,又译及时编译、实时编译。JIT编译是两种传统的机器代码运行方式——提前编译（AOT）运行和解释运行——的结合，它结合了两者的优点和缺点。即时编译在程序的运行过程中引入编译过程来优化程序的执行，主要思路是引入程序运行监视器，**监控程序的执行状况**，发现哪些频繁运行的代码，对频繁执行的方法或函数进行编译并将编译结果保存以待复用，减少相同方法函数的重复解释过程，并且为编译结果进行专门的优化。大致来说，JIT编译，以解释器的开销以及编译和链接（解释之外）的开销，结合了编译代码的速度与解释的灵活性。我们常见的.Net、Java、现代JavaScript，其程序在运行时都在虚机中建立了即时编译的机制。

整体来看，即时编译是在解释器工作流程中引入了编译流程，它的工作流程简图如下：

![即时编译（JIT）工作流程简图](/jit-simple-process.png "即时编译（JIT）工作流程简图")

即时编译通过在解释流程中引入编译流程来获得编译的优点，能够明显提高程序的运行速度。即时编译机制要求运行时环境维护额外的编译器，需要开辟额外的内存资源。而且对编译结果的缓存，也很容易造成不菲的内存开销。所以，支持即时编译机制的程序很容易产生性能问题。即时编译的在程序效率上的优化，属于拿空间换时间。在实现即时编译虚拟机的工作中，开发人员总是要在内存占用上做取舍。另外，如果在程序一开始就进行即时编译的优化，可能会对程序造成一定的启动延迟。

## V8 JavaScript 引擎中的即时编译

最初，JavaScript是解释型语言，谷歌公司在推出的第一版V8 JavaScript引擎之中支持了即时编译，显著提升了浏览器的运行速度。目前，几乎所有主流浏览器的JavaScript引擎都支持即时编译（V8引擎是由C++写就）。

> Firefox浏览器中使用SpiderMonkey；
> Safari浏览器使用JavaScriptCore；
> Edge浏览器使用V8 JavaScript引擎。

在V8 JavaScript引擎中，JavaScript源代码从解析到执行的步骤如下：
1. 获取JavaScript源代码；
1. 使用解析器（Parser）解析源代码，获取源代码抽象语法树（英语：Abstract Syntax Tree，缩写AST）；
1. 解释器（Interpreter）对源代码抽象语法树进行解释，生成平台无关的字节代码。并开始运行代码；
1. 监视器收集分析代码的运行状况，根据代码重复执行的次数判定代码的“热度”，大部分代码很大可能标记为“暖”（Warm）代码，“暖”代码重复执行次数多了被标记为“热”（Hot）代码；
1. 基线编译器（SparkPlug）对“暖”代码进行编译，缓存编译结果，以待后续调用。Sparkplug编译速度很快，但是不会对编译内容做过多的优化，它主要的作用是快速提供简化的编译版本。
1. 优化编译器（TurboFan）对“热”代码进行高度优化编译，缓存编译结果，以待后续调用。
1. 对优化代码去优化。TurboFan对代码进行编译优化时做了很多假设，一旦引擎在使用优化版本的方法执行代码时发现这些假设不成立，便会释放存储的编译方法，退化到解释器去执行。一来保证程序执行逻辑正确，二来释放不再成立的优化函数，优化内存空间使用。

在V8 JavaScript引擎中，大致的JavaScript源代码从解析到执行的图示如下：

![V8 JavaScript引擎即时编译工作流程简图](/v8-jit-process.png "V8 JavaScript引擎即时编译工作流程简图")


### 1. 解析器（抽象语法树）
当引擎获取到JavaScript源代码后，会启动解析器把源代码解析成抽象语法树。解析过程主要分为词法分析（Lexical Analysis）和语法分析（Syntax Analysis）两个部分。词法分析是将源代码分解成一系列标记（token）的过程，由scanner完成。这些标记是最小的、有意义的代码单元，包括关键字、标识符、运算符、常量等。词法分析器会扫描代码并识别标记，然后生成标记流供后续步骤使用。语法分析是将标记流转换为抽象语法树（AST）的过程，即parser。语法树是源代码的抽象表示形式，它描述了代码结构和语法规则。语法分析器将标记流转换为语法树，以便后续步骤（如编译或解释）能够理解和处理代码的结构和含义。

下图是一个JavaScript代码转换到抽象语法树的示例，我们在[astexplorer.net](https://astexplorer.net/)中得到它。

![JavaScript to AST](/javascript-ast-sample.png "JavaScript to AST")

AST会忽略代码风格，将代码解析为最纯粹的语法树，因此基于AST进行的转换是更加准确严谨的，而使用正则表达式来分析转换代码，无法有效的分析一段代码的上下文，即使对简单规则的匹配都需要考虑太多边界情况，兼容各种代码风格。

> AST 是非常重要的一种数据结构，在很多项目中有着广泛的应用。其中最著名的一个项目是 Babel。Babel 是一个被广泛使用的代码转码器，可以将 ES6 代码转为 ES5 代码，这意味着你可以现在就用 ES6 编写程序，而不用担心现有环境是否支持 ES6。Babel 的工作原理就是先将 ES6 源码转换为 AST，然后再将 ES6 语法的 AST 转换为 ES5 语法的 AST，最后利用 ES5 的 AST 生成 JavaScript 源代码。
>
> 除了 Babel 外，还有 ESLint 也使用 AST。ESLint 是一个用来检查 JavaScript 编写规范的插件，其检测流程也是需要将源码转换为 AST，然后再利用 AST 来检查代码规范化的问题。

### 2. 解释器（Ignition）

在得到抽象语法树之后，解释器（Ignition）就可以将抽象语法树转换为字节码了，字节码是一种平台无关的执行码，JavaScript引擎内置的虚拟机会按照字节码命令在硬件层面去执行动作，完成程序的运行。在程序运行期间，监视器会收集并解析字节码的运行状态（包括运行次数和参数类型），将会发生重复执行的代码标记为“暖”代码，将总是重复执行的“暖”代码标记为“热”代码。

> 在第一版V8 JavaScript引擎中，谷歌的工程师激进地要移除字节码地使用，直接按照抽象语法树数据来进行即时编译的优化，存储编译结果进行调用。少了一层转换，浏览器的运行速度得到很大的提升，但是在部署移动端浏览器时出现了内存问题。一般情况下移动端设备的内存比较小，同样含义的语句，存储机器码要求的内存大小比存储字节码要大很多，这就造成了严重的内存使用问题。后来工程师又重新实现了使用字节码的方式。下图展示了同样含义的JavaScript代码、字节码、机器码的大小。
> ![bytecode storage VS machine-code storage](/bytecode-machinecode-storage.png "bytecode storage VS machine-code storage")
> V8 引擎的工程师，在很多时候都要思考“要内存还是要效率”的问题。

### 3. 基线编译器（Sparkplug）
在V8 JavaScript引擎中，Sparkplug充当基线编译器。当示例代码中的方法`arraySum`被重复调用过后，很快就会被标记为“暖”代码，就会触发基线编译器对其进行编译。函数的每一行都被编译成一个“存根（stub）”。存根由行号和变量类型索引（稍后解释为什么这很重要）。如果监控器发现执行再次使用相同的变量类型命中相同的代码，它只会提取其编译版本。

Sparkplug不生成任何中间表示（IR），而是直接在单个线性遍历字节码的过程中编译为机器码，生成与该字节码执行匹配的代码。所以Sparkplug编译速度很快，但是编译结果不具备很高的优化性能。

> 在一开始，V8 JavaScript引擎只有优化编译器（TurboFan），基于Ignition和TurboFan之间的执行速度和编译时间的差异较大，在2021年V8推出了这款非优化编译器（non-optimizing JavaScript compiler）Sparkplug，旨在将字节码几乎即时编译成等效的机器码。在其他JavaScript引擎中，也分别实现了基线编译器和优化编译器。

### 4. 优化编译器（TurboFan）
当“暖”代码持续被重复执行，会被标记为“热”代码，优化编译器（TurboFan）会为它专门生成高度优化的编译函数并存储，以备后续调用。TurboFan编译速度较慢，但是编译结果具备较高的优化性能。

为了制作更快的代码版本，优化编译器必须做出一些假设。例如假设由特定构造函数创建的所有对象都具有相同的形状（相同的属性和属性顺序），假设函数的参数具备一样的类型。基于这些假设，编译器可以做函数内联或者使得生成的优化函数更快的访问内存等等。

### 5. 去优化
优化函数的定义是基于一些假设，但是JavaScript语言是动态语言，假设不一定总成立。当出现假设不成立的时候，优化便也不再有效。这时候，编译器会丢弃存储的优化函数，将函数的执行退回到解释器层面去执行。这个过程就是去优化，它保证程序的逻辑不会出现问题。比如说有一个“热”代码函数的传参一直是`Number`，编译器会创建一个以`Number`为参数类型的优化函数存储到内存中，但突然有一次函数调用使用的字符串，那么这个优化版本的编译函数便不再有效，代码的执行会被回退到解释器去执行，从新被监视器监视函数调用情况。

### 6. 一个示例
下面我们看一个来自于这篇[博客](https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/)的示例。

考虑这段代码：
```javascript
function arraySum(arr) {
 var sum = 0;
 for (var i = 0; i < arr.length; i++) {
 sum += arr[i];
 }
}
```

`+=`循环中的步骤可能看起来很简单。看起来您可以一步完成计算，但由于动态类型，它需要的步骤比您预期的要多。

假设这`arr`是一个包含100个整数的数组。一旦代码预热（设置为“Warm”），基线编译器将为函数中的每个操作创建一个存根。所以会有一个存根`for sum += arr[i]`，它将把`+=`操作作为整数加法来处理。

但是，`sum`和`arr[i]`不能保证是整数。因为类型在JavaScript中是动态的，所以在循环的后续迭代中，有`arr[i]`可能是一个字符串。整数加法和字符串连接是两种截然不同的操作，因此它们会编译成截然不同的机器码。

编译器处理这个问题的方式是编译多个基线存根(baseline stubs)。如果一段代码是单态的（即，总是以相同的类型调用），它将得到一个存根。如果它是多态的（从一个代码传递到另一个代码，使用不同的类型调用），那么它将为通过该操作的每种类型组合获得一个存根。

这意味着引擎在选择存根之前必须询问很多问题。

![jit compiler stub sample](/jit-compiler-stub.png "jit compiler stub sample")

因为每一行代码在基线编译器中都有自己的一组存根，所以编译器需要在每次执行代码行时继续检查类型。因此，对于循环中的每次迭代，它都必须提出相同的问题。

![jit compiler stub confirming ](/jit-compiler-stub-confirm.png "jit compiler stub confirming")

如果引擎不需要重复这些检查，代码将执行得更快。这就是优化编译器所做的事情之一。

在优化编译器中，整个函数被一起编译。类型检查被移动，以便它们发生在循环之前。

![jit compiler stub confirming optimization](/jit-compiler-stub-confirm-optimization.png "jit compiler stub confirming optimization")

一些即时编译甚至进一步优化了这一点。例如，在 Firefox 中，数组有一个特殊的分类，它只包含整数。如果arr是这些数组之一，则 JIT 不需要检查是否arr[i]是整数。这意味着即时编译可以在进入循环之前进行所有类型检查。

### 7. 新的优化编译器（Maglev）
2023年谷歌在V8 JavaScript引擎中推出的一种新的优化中间层即时编译器，位于Sparkplug和TurboFan之间。Maglev旨在快速生成非常高性能的机器码，另外Maglev还通过使用更少的离线CPU时间显着减少了V8引擎的总体资源消耗。与顶层即时编译器TurboFan相比，Maglev生成的代码优化程度较低，但编译速度更快。

### 总结
V8 JavaScript引擎的即时编译，通过引入代码执行监控、热点代码分析、编译、缓存等机制，实现了JavaScript程序运行效率的大幅度提升，代价是多一些内存占用。这改变了纯解释型编程语言JavaScript程序运行慢的特点，让我们生活在一个更流畅的网络世界。

## 配合V8 JavaScript引擎的即时编译的工作
了解了即时编译的机制，我们在写JavaScript代码的时候，就可以有意识地配合引擎即时编译机制地工作，写出更健壮地代码。以下是一些小贴士。

1. 不要频繁增加或减少对象属性，这会是编译器地优化失效。
1. 尽量不要频繁修改对象地原型。最好的方式是只在对象创建的时候指定原型。
1. 固定函数传参类型。
1. 尽量不要在函数中声明类。在函数中声明地类，每次函数执行都会被声明一次，且每次声明的类都不是一个对象。

## 参考资料

1. [即时编译-维基](https://zh.wikipedia.org/wiki/%E5%8D%B3%E6%99%82%E7%B7%A8%E8%AD%AF)
1. [解释器-维基](https://zh.wikipedia.org/wiki/%E7%9B%B4%E8%AD%AF%E5%99%A8)
1. [A crash course in just-in-time (JIT) compilers](https://hacks.mozilla.org/2017/02/a-crash-course-in-just-in-time-jit-compilers/)
1. [Sparkplug — a non-optimizing JavaScript compiler](https://v8.dev/blog/sparkplug)
1. [Maglev - V8’s Fastest Optimizing JIT](https://v8.dev/blog/maglev)

介绍编译语言、解释型语言、即时编译的定义，介绍V8 JavaScript引擎中即时编译的工作流程。包括解析、解释、编译器的优化。

番外：V8 与即时编译（JIT）


自此，我们已经讨论了在[JavaScript 起源](/posts/javascript-origin "JavaScript 起源")描述的大部分ECMAScript标准的核心部分，而这些内容也是我们在日常前端开发工作中围绕的核心。

不了解JavaScript作用域（链）与声明提升，我们在实现一个个程序功能点的时候就会很容易引入错误，很难写出逻辑正确的基础代码；不理解JavaScript中`this`的动态性，我们无法正确地利用函数的复用性和灵活性，理解`this`也是我们使用JavaScript做面向对象编程的基础之一；对于我们经常聊的闭包，不理解它就不算理解了函数是第一公民的含义，对于一些框架级的问题，诸如React Hooks在更新状态时的闭包陷阱问题，也很难去理解和排查；原型机制是JavaScript语言核心中的核心，它连接了系统中的对象，它得以让我们对象的扩展，整个JavaScript面向对象开发范式就建立在原型机制之上；而不熟练掌握面向对象编程范式，我们就很难使用JavaScript去构建大型前端应用程序；异步编程也是JavaScript程序编程中的重点，随时要记得我们的程序是在单线程上跳舞，它需要不一样的异步机制舞步；对于内存问题，JavaScript引擎并没有放开一些我们可操作的接口，但是，不理解JavaScript内存机制，当我们在大型项目中遇到那些“幽灵般”的程序崩溃问题时便会束手无策。这些内容在ECMAScript标准上描述，但是对于它们的含义，我们却会常识常新。任何优秀的作品露出的都是冰山一角，透彻地理解它并不是读读文档那么简单地事。

而对于其它的一些内容，譬如数组（`Array`）、对象（`Object`）、函数（`Function`）的常见方法以及它们在ECMAScript中得到了怎样的扩展，或者说`Set`/`Map`对象的使用，它们的内容算不上那么立体。大部分时候我们只需要按着官方的手册去操作，就不会有太多问题，它们是那些常见的数据结构或算法的JavaScript版本实现。或许在以后阶段的学习中我会再提起他们。包括`Symbol`、迭代器（Iterator）和生成器（Generator）、以及代理（Proxy）和反射（Reflection）。

有关文档对象模型（DOM）和浏览器对象模型（BOM），它们也是JavaScript中不可缺少的内容，但不是JavaScript语言的核心。DOM是HTML、SVG那些标记文档的JavaScript建模，或许在我们讨论HTML的时候会首先谈论它。现代浏览器已经是一个很复杂的计算机程序，作为浏览器对象模型，我们很难不单独讨论它，这不会是一件轻松的事。

30年间，JavaScript从一个“胶水语言”，已经变成了运载最广泛应用程序的主要编程语言之一了。它不断完善、进化，是一代代Web工程人员的工作和智慧的结晶，很难用简练的言语去全面地描绘它，但在此笔者力求简练。美好的事物总是精巧繁杂的，对它们的了解也不会易如拾芥。山路回而愈高，水流缓而愈远。当我们多得一分知道、多读一分透彻，幸福就在其间。


山路回而愈高，水流缓而愈远。当我们多得一分知道、多读一分透彻，幸福就在其间。

阶段一结语

自此，我们已经讨论了在<a href="/posts/javascript-origin" title="JavaScript 起源">JavaScript 起源</a>描述的大部分ECMAScript标准的核心部分，而这些内容也是我们在日常前端开发工作中围绕的核心。
不了解JavaScript作用域（链）与声明提升，我们在实现一个个程序功能点的时候就会很容易引入错误，很难写出逻辑正确的基础代码；不理解JavaScript中<code>this</code>的动态性，我们无法正确地利用函数的复用性和灵活性，理解<code>this</code>也是我们使用JavaScript做面向对象编程的基础之一；对于我们经常聊的闭包，不理解它就不算理解了函数是第一公民的含义，对于一些框架级的问题，诸如React Hooks在更新状态时的闭包陷阱问题，也很难去理解和排查；原型机制是JavaScript语言核心中的核心，它连接了系统中的对象，它得以让我们对象的扩展，整个JavaScript面向对象开发范式就建立在原型机制之上；而不熟练掌握面向对象编程范式，我们就很难使用JavaScript去构建大型前端应用程序；异步编程也是JavaScript程序编程中的重点，随时要记得我们的程序是在单线程上跳舞，它需要不一样的异步机制舞步；对于内存问题，JavaScript引擎并没有放开一些我们可操作的接口，但是，不理解JavaScript内存机制，当我们在大型项目中遇到那些“幽灵般”的程序崩溃问题时便会束手无策。这些内容在ECMAScript标准上描述，但是对于它们的含义，我们却会常识常新。任何优秀的作品露出的都是冰山一角，透彻地理解它并不是读读文档那么简单地事。
而对于其它的一些内容，譬如数组（<code>Array</code>）、对象（<code>Object</code>）、函数（<code>Function</code>）的常见方法以及它们在ECMAScript中得到了怎样的扩展，或者说<code>Set</code>/<code>Map</code>对象的使用，它们的内容算不上那么立体。大部分时候我们只需要按着官方的手册去操作，就不会有太多问题，它们是那些常见的数据结构或算法的JavaScript版本实现。或许在以后阶段的学习中我会再提起他们。包括<code>Symbol</code>、迭代器（Iterator）和生成器（Generator）、以及代理（Proxy）和反射（Reflection）。
有关文档对象模型（DOM）和浏览器对象模型（BOM），它们也是JavaScript中不可缺少的内容，但不是JavaScript语言的核心。DOM是HTML、SVG那些标记文档的JavaScript建模，或许在我们讨论HTML的时候会首先谈论它。现代浏览器已经是一个很复杂的计算机程序，作为浏览器对象模型，我们很难不单独讨论它，这不会是一件轻松的事。
30年间，JavaScript从一个“胶水语言”，已经变成了运载最广泛应用程序的主要编程语言之一了。它不断完善、进化，是一代代Web工程人员的工作和智慧的结晶，很难用简练的言语去全面地描绘它，但在此笔者力求简练。美好的事物总是精巧繁杂的，对它们的了解也不会易如拾芥。山路回而愈高，水流缓而愈远。当我们多得一分知道、多读一分透彻，幸福就在其间。

阶段一结语

发表留言

历史留言