JS Basics

— title: "JS 基础" —

参考资料：https://javascript.info/，JavaScript 高级程序设计。

https://wangdoc.com/javascript/index.html

基本语法

语句

以行（line）为单位执行语句（statement）。

```js var a = 1 + 4 ```

使用 var 命令声明变量 a ，然后将 1 + 4 的运算结果赋值给变量 a 。

1 + 4 是表达式（expression），指一个为了得到返回值的计算式。

语句和表达式的区别？ > > 前者主要进行操作，基本情况下不需要返回值；后者则需要返回值。

语句以 ; 结尾。分号前若无内容，JS 引擎视其为空语句。

变量

变量是对值（字符串、数字等）的引用。

```js var a = 1 ```

上述代码的运行流程：

1. 声明变量 a ： var a
2. 建立 a 与 1 的引用关系： a = 1

第 2 步的专用术语是「赋值」。 var 是变量声明命令。

在未赋值时，变量的初始值为 undefined 。

声明变量一定要使用 var/let 命令，如果声明时不使用命令，很容易因声明过多全局变量而产生混乱。

如果未声明直接使用会报错： Uncaught ReferenceError: a is not defined 。

JS 是动态类型语言，变量声明为一种数据类型后，可以被轻易改变为其他数据类型：

```js var a = 1 a = 'hello' ```

对已声明变量的二次声明，如果没有赋值则二次声明无效；若赋值则变量的值得到更新。

变量提升

JS 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这样的结果就是变量提升（hoisting）。

标识符

标识符（identifier）指的是用来识别各种值的合法名称。

最常见的是变量名和函数名。JS 的标识符对大小写敏感。

标识符命名规则：

• 第一个字符，可以是任意 Unicode 字母（包括英文字母和其他语言的字母），以及美元符号（ $ ）和下划线（ _ ）
• 第二个及以后的字符，除了 Unicode 字母、美元符号和下划线，还可以使用数字 0-9

JS 中存在一些保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield

注释

两种，单行、多行

历史原因 JS 兼容 HTML 注释：

```js x = 1; x = 3; ```

以上只有 x = 1 有意义， --> 只有在行首才会被识别为单行注释。

区块

JS 使用大括号（curly braces），将多个相关的语句组合在一起，称为区块（block）。

对于 var 命令来说，JS 区块不构成独立的作用域；而 ES6 引入的 let 则具备这样的特点（独立作用域）。

条件语句

JS 提供 if 结构和 switch 结构，完成条件判断，即只有满足预设条件，才会执行相应的语句。

if 结构

if 结构先判断一个人表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。

注意， if 后面的表达式之中，不要混淆赋值表达式（ = ）、严格相等运算符（ === ）和相等运算符（ == ）。尤其是赋值表达式不具有比较作用。

错误代码：

```js var x = 1 var y = 2 if ((x = y)) { console.log(x) } ```

优先使用 === 。

if…else 结构

switch 结构

多个 if...else 连在一起使用时，可以用 switch 以一种更轻便的方式替代。

代码示例：

```js switch (fruit) { case 'banana': //… break case 'appple': //… break default: //… } ```

三元运算符 ?:

```js (条件) ? 表达式 1 : 表达式 2 ```

它可以是 if...else... 的简写。

循环语句

循环语句用于重复执行某个操作。

while 循环

```js while (条件) 语句

// 或者 while (条件) 语句 ```

for 循环

```js for (初始化表达式; 条件; 递增表达式) { 语句 } ```

• 初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次
• 条件表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环
• 递增表达式（increment）：每轮循环的最后一个操作通常用来递增循环变量

for 循环在 JS 引擎级别是如何实现的？

do…while 循环

与 while 的区别在于先运行一次循环体，然后判断循环条件。

```js do { 语句 } while (条件) ```

不论是 i++ 还是 ++i i 都是加 1，区别在于前一个表达式的结果是 i，后一个表达式的结果是 i+1。

break 语句和 continue 语句

break 语句和 continue 语句都具有跳转作用，可以让代码不按既有的顺序执行。

break 语句用于跳出代码块或循环； continue 语句用于立刻终止本轮循环，返回循环结构的头部，开始下一轮循环。

标签（label）

JS 语言允许，语句的前面有标签（label），相当于定位符，用于跳转到程序的任意位置，标签格式如下：

```js label: 语句 ```

标签可以是任意标识符，但不能是保留字，语句部分可以是任意语句。

标签通常与 break 语句和 continue 语句配合使用，跳出特定的循环。也可用于跳出代码块。

数据类型

JS 有 7 种数据类型：

• 数值（number）
• 字符串（string）
• 布尔值（boolean）
• undefined
• null
• 对象（object）
• Symbol（ES6 引入）

以上列出的 7 种，前三种是原始类型（primitive type）的值，是最基本的数据类型。对象被称为合成类型（complex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。 undefined 和 null 是两个特殊值。Symbol 的存在是为了解决属性名冲突。

对象又可以分成三个子类型：

• 狭义的对象（object）
• 数组（array）
• 函数（function）

狭义的对象和数组是两种不同的数据组合方式。函数是处理数据的方法，JS 视其为一种数据类型，可以赋值给变量。

函数被视为一种数据类型，能够赋值给变量这件事，为编程带来很大的灵活性，也为 JS 的函数式编程奠定基础。

typeof 运算符

JS 有三种方法，可以确定一个值到底是什么类型。

• typeof 运算符
• instanceof 运算符
• Object.prototype.toString 方法

null 的类型是 object 。是历史原因，JS 最初的设计没考虑 null 只是把它作为 object 的一种特殊值。后来 null 独立出来，作为一种单独的数据类型，为了兼容以前的代码， typeof null 返回 object 就没法改变了。

null,undefined 和布尔值

null 与 undefined 相似，都表示”不存在”。

存在它们的历史原因：

1995 年 JavaScript 诞生时，最初像 Java 一样，只设置了 null 表示"无"。根据 C 语言的传统， null 可以自动转为 0 。 > > 但是，JavaScript 的设计者 Brendan Eich，觉得这样做还不够。首先，第一版的 JavaScript 里面， null 就像在 Java 里一样，被当成一个对象，Brendan Eich 觉得表示”无”的值最好不是对象。其次，那时的 JavaScript 不包括错误处理机制，Brendan Eich 觉得，如果 null 自动转为 0，很不容易发现错误。 > > 因此，他又设计了一个 undefined 。区别是这样的： null 是一个表示”空”的对象，转为数值时为 0 ； undefined 是一个表示"此处无定义"的原始值，转为数值时为 NaN 。

理解 null 和 undefined ：

null 表示空值，即该处的值现在为空。调用函数时，某个参数未设置任何值，这时就可以传入 null ，表示该参数为空。比如，某个函数接受引擎抛出的错误作为参数，如果运行过程中未出错，那么这个参数就会传入 null ，表示未发生错误。

undefined 表示”未定义”，典型场景：

```js // 变量声明了，但没有赋值 var i console.log(i) // undefined

// 调用函数时，应该提供的参数没有提供，该参数等于 undefined function f(x) { return x } console.log(f()) // undefined

// 对象没有赋值的属性 var o = new Object() console.log(o.p) // undefined ```

布尔值代表”真”（ true ）和”假”（ false ）两个状态。

下列运算符返回布尔值：

• 前置逻辑运算符： ! （Not）
• 相等运算符： === ， !== ， == ， !=
• 比较运算符： > ， >`` ， < ， `< ```

JS 会将结果是布尔值但不是布尔值的位置，自动转换为布尔值。转换规则：除去以下六个值被转为 false ，其他值都视为 true 。

• undefined
• null
• false
• 0
• NaN
• "" 或 '' （空字符串）

数值

整数和浮点数

JS 内部，所有数字都是以 64 位浮点数形式储存，即使整数也是如此。

```js 1 === 1.0 // true ```

这也说明：JS 语言的底层没有整数，所有数字都是小数（64 位浮点数）。容易造成混淆的是 某些运算只有整数才能完成，此时 JS 会自动把 64 位浮点数，转成 32 整数，然后再进行运算。

浮点数不是精确的值，所以会出现以下情况：

```js 0.1 + 0.2 === 0.3 // false

0.3 / 0.1 // 2.9999999999999996 ```

数值精度

根据国际标准 IEEE754，JS 浮点数的 64 个二进制位，从左边开始，是这样组成的：

• 第 1 位：符号位， 0 表示正数， 1 表示负数
• 第 2 位到第 12 位（共 11 位）：指数部分
• 第 13 位到第 64 位（共 52 位）：小数部分（即有效数字）

符号位决定了一个数的正负，指数部分决定了数值的大小，小数部分决定了数值的精度。

指数部分一共有 11 个二进制位，因此大小范围就是 0 到 2047。IEEE754 规定，如果指数部分的值在 0 到 2047 之间（不含两个端点），那么有效数字的第一位默认总是 1，不保存在 64 位浮点数中。也就是说，有效数字这时总是 1.xx...xx 形式，其中 xx...xx 的部分保存在 64 位浮点数中，最长可能为 52 位。因此 JS 提供的有效数字最长为 53 个二进制位。

```js (-1)<sup>符号位</sup> * 1.xx…xx * 2<sup>指数部分</sup> ```

上面公式是正常情况下（指数部分在 0 到 2047 之间），一个数在 JS 内部实际的表示形式。

精度最多只能到 53 个二进制位，这意味着，绝对值小于 2 的 53 次方的整数，即 $-2<sup>53</sup>$ 到 $2<sup>53</sup>$ ，都可以精确表示。

```js Math.pow(2, 53) // 9007199254740992

Math.pow(2, 53) + 1 // 9007199254740992

Math.pow(2, 53) + 2 // 9007199254740994

Math.pow(2, 53) + 3 // 9007199254740996

Math.pow(2, 53) + 4 // 9007199254740996 ```

由于 $2<sup>53</sup>$ 是一个 16 位的十进制数值，所以简单来说，JS 对 15 位的十进制数都可以精确处理。

数值范围

根据标准，64 位浮点数的指数部分的长度是 11 个二进制位，意味着指数部分的最大值是 2047（ $2<sup>11</sup>$ -1）。也就是说，64 位浮点数的指数部分的值最大为 2047，分出一半表示负数，则 JS 能够表示的数值范围为 $2<sup>1024</sup>$ 到 $2<sup>-1024</sup>$ （开区间），超出这个范围的数无法表示。

当 JS 因为某个正数过大而无法表示时，会返回 Infinity ；因为某个负数过小时，会返回 0。

JavaScript 提供 Number 对象的 MAX<sub>VALUE</sub> 和 MIN<sub>VALUE</sub> 属性，返回可以表示的具体的最大值和最小值。

```js Number.MAX<sub>VALUE</sub> // 1.7976931348623157e+308 Number.MIN<sub>VALUE</sub> // 5e-324 ```

数值表示法

• 字面形式：十进制(1432)、八进制(074)、十六进制（0xff）
• 科学记数法：123e3、123e-3、-3.1e+12

JS 自动将数值转为科学记数法的两种情况：

• 小数点前的数字多于 21 位
• 小数点后的零多于 5 个

数值的进制

使用字面量（literal）直接表示一个数值时，JS 对整数提供四种进制的表示方法：

• 十进制：没有前导 0 的数值
• 八进制：有前缀 0o 或 00 的数值，或者有前导 0、且只用到 0-7 八个阿拉伯数字的数值
• 十六进制：有前缀 0x 或 0X 的数值
• 二进制：有前缀 0b 或 0B 的数值

默认情况下，JS 内部会自动将八进制、十六进制、二进制转为十进制。如果八进制、十六进制、二进制中出现不属于该进制的数字，就会报错。

前到一般情况下，有前导 0 的数值会被视为八进制，但如果前导 0 后面有数字 8 和 9 ，则该数值被视为十进制。

前导 0 表示八进制，处理时很容易造成混乱。ES5 的严格模式和 ES6，已经废除了这种表示法，但是浏览器为了兼容以前的代码，目前还继续支持这种表示法。

特殊数值

一、 +0 ， -0

除了用作分母时，返回值不同外， +0 和 -0 在其他情况下使用时可以等效。

上面的代码之所以出现这样结果，是因为除以正零得到 +Infinity ，除以负零得到 -Infinity ，这两者是不相等的。

二、NaN

NaN 是 JS 的特殊值，表示非数字（Not a Number）。主要出现在将字符串解析成数字出错的场合。

```js 2 - 'x' // NaN ```

上述代码运行时，会自动将字符串 x 转为数值，但是由于 x 不是数值，所以最后得到结果 NaN 。

另外，一些数学函数的运算结果会出现 NaN 。

```js Math.acos(2) // NaN Math.log(-1) // NaN Math.sqrt(-1) // NaN ```

还有

```js 0 / 0 // NaN ```

需要注意的是， NaN 不是独立的数据类型，而是一个特殊数值，它的数据类型依然属于 Number ，使用 typeof 运算符可以看得很清楚。

```js typeof NaN // "number" ```

NaN 的运算规则

NaN 不等于任何值，包括它自身。

数组的 indexOf 方法内部使用的是严格相等操作符，所以该方法对 NaN 不成立。

NaN 在布尔运算时被当作 false 。

NaN 与任何数（包括它自己）的运算，得到的都是 NaN 。

三、Infinity

Infinity 表示”无穷”，用来表示两种场景。一种是一个正的数值太大，或一个负的数值太小，无法表示；另一种是非 0 数值除以 0，得到 Infinity 。

由于数值正向溢出（overflow）、负向溢出（underflow）和被 0 除，JavaScript 都不报错，所以单纯的数学运算几乎没有可能抛出错误。

Infinity 的运算规则

```js 5 * Infinity // Infinity 5 - Infinity // -Infinity Infinity / 5 // Infinity 5 / Infinity // 0 ```

```js 0 * Infinity // NaN 0 / Infinity // 0 Infinity / 0 // Infinity ```

```js Infinity - Infinity // NaN ```

Infinity 与 null 计算时，null 会转成 0，等同于与 0 的计算。

Infinity 与 undefined 计算，返回的都是 NaN。

与数值相关的全局方法

• parseInt() 字符串->整数/NaN
• parseFloat() 字符串->浮点数
• isNaN() 判断一个值是否是 NaN
• isFinite() 返回布尔值，表示某个值是否为正常的数值

parseInt 会把字符串中是科学记数法形式的数字，当成普通字符串看待，也就是说： e 是字符而不是数字 10。

parseInt 接受第二个参数进行进制转换。参数取值为[2, 36]。

parseInt 第一个参数不是字符串，会被先转为字符串，再运算。注意：第一个参数是八进制数字的情况。

JavaScript 不再允许将带有前缀 0 的数字视为八进制数，而是要求忽略这个 0。但是，为了保证兼容性，大部分浏览器并没有部署这一条规定。

parseFloat 会把空字符串转为 NaN。与 Number 函数有所不同。

isNaN 为 true 时，可能是字符串 / NaN。出于同样的原因，对象和数组，isNaN 也返回 true。但，空数组和只有一个数值元素的数组，isNaN 返回 false。原因是这些数组能够被 Number 函数转成数值。因此，使用 isNaN 之前要判断数据类型：

```js function myIsNaN(value) { return typeof value === 'number' && isNaN(value) } myIsNaN() ```

判断 NaN 更可靠的方法，利用 NaN 是唯一不等于自身的值的这个特点：

```js function myIsNaN(value) { return value !== value } myIsNaN(NaN) ```

除了 Infinity、-Infinity、NaN 和 undefined 这几个值会返回 false，isFinite 对于其他的数值都会返回 true。

字符串

字符串定义

由于 HTML 语言的属性值使用双引号，所以很多项目约定 JavaScript 语言的字符串只使用单引号。

字符串默认只能写在一行内，分成多行将会报错。如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠。但是，输出的时候还是单行。注意，反斜杠的后面必须是换行符，而不能有其他字符（比如空格），否则会报错。连接运算符（+）可以连接多个单行字符串，将长字符串拆成多行书写，输出的时候也是单行。

如果想输出多行字符串，有一种利用多行注释的变通方法：

```js ;(function () { /* line 1 line 2 line 3 */ } .toString() .split('\n') .slice(1, -1) .join('\n')) ```

转义

需要用反斜杠转义的特殊字符，主要有下面这些。

• \0 ：null（ 0̆000 ）
• ``̱ ：后退键（ 0̆008 ）
• ``̑ ：换页符（ 0̆00C ）
• \n ：换行符（ 0̆00A ）
• ``̊ ：回车键（ 0̆00D ）
• ``͡ ：制表符（ 0̆009 ）
• ``̌ ：垂直制表符（ 0̆00B ）
• \' ：单引号（ 0̆027 ）
• \" ：双引号（ 0̆022 ）
• \\ ：反斜杠（ 0̆05C ）

反斜杠还有三种特殊用法。

（1） \HHH

反斜杠后面紧跟三个八进制数（ 000 到 377 ），代表一个字符。 HHH 对应该字符的 Unicode 码点，比如 \251 表示版权符号。显然，这种方法只能输出 256 种字符。

（2） \xHH

\x 后面紧跟两个十六进制数（ 00 到 FF ），代表一个字符。 HH 对应该字符的 Unicode 码点，比如 \xA9 表示版权符号。这种方法也只能输出 256 种字符。

（3） \uXXXX

``̆ 后面紧跟四个十六进制数（ 0000 到 FFFF ），代表一个字符。 XXXX 对应该字符的 Unicode 码点，比如 0̆0A9 表示版权符号。

如果在非特殊字符前面使用反斜杠，则反斜杠会被省略。

如果字符串的正常内容之中，需要包含反斜杠，则反斜杠前面需要再加一个反斜杠，用来对自身转义。

字符串与数组

字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从 0 开始）。

如果方括号中的数字超过字符串的长度，或者方括号中根本不是数字，则返回 undefined。

但是，字符串与数组的相似性仅此而已。实际上，无法改变字符串之中的单个字符。

length 属性

同样无法改变

字符集

JS 使用 Unicode 字符集，JS 引擎内部，所有字符都用 Unicode 表示。

还能在 JS 中使用 Unicode 码点表示字符。

每个字符在 JS 内部都是以 16 位（即两个字节）的 UTF-16 格式存储。换句话说，JS 的单位字符长度固定为 16 位长度，即 2 个字节。

但是，UTF-16 有两种长度：对于码点在 U+0000 到 U+FFFF 之间的字符，长度为 16 位（即 2 个字节）；对于码点在 U+10000 到 U+10FFFF 之间的字符，长度为 32 位（即 4 个字节），而且前两个字节在 0xD800 到 0xDBFF 之间，后两个字节在 0xDC00 到 0xDFFF 之间。

JS 对 UTF-16 的支持并不完整。历史遗留问题，导致 JS 无法识别超出 2 字节的 Unicode 字符。这就导致：对于码点在 U+10000 到 U+10FFFF 之间的字符，JS 总是认为它们是两个字符（ length 属性为 2）。因此，在涉及到字符串长度问题时要小心，可能 JS 返回的字符串长度不是字符串的长度。

Base64 转码

当文本包含一些不可打印的符号时，需要通过 Base64 转码，将它们转换成可打印字符，让其可打印。

另一个使用场景：以文本格式传递二进制数据。

Base64 是一种编码方法。可以将任意值转成 09、AZ、a~z、 + 和 / 这 64 个字符组成的可打印字符。产生这种编码方法的主要目的不是为了加密，而是为了不出现特殊字符，简化程序的处理。

JS 原生提供两个 Base64 相关的方法。

• btoa() ：任意值转为 Base64 编码
• atob() ：Base64 编码转为原来的值

注意，这两种方法不支持非 ASCII 字符。

要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节，在使用这个方法。

```js function b64Encode(str) { return btoa(encodeURIComponent(str)) } b64Encode('你好，世界') function b64Decode(str) { return decodeURIComponent(atob(str)) } b64Decode('JUU0JUJEJUEwJUU1JUE1JUJEJUVGJUJDJThDJUU0JUI4JTk2JUU3JTk1JThD') ```

对象

对象，是键值对的集合。

对象的所有键名都是字符串/Symbol。键名也称为属性。键值可以是任何数据类型，如果值为函数，可以把该属性称为方法。想到 Vue 的一些代码。

属性可以在任何时刻创建。

对象的引用

不同的变量名指向同一个对象，它们都是该对象的引用，指向同一个内存地址。

这种类型的引用仅限于对象。如果变量引用原始数据类型，附加的变量只是初始变量的拷贝。

表达式还是语句？

```js { foo: 123 } ```

JS 引擎认为所有开头有大括号的语句都是代码块。如果想表示对象，需要这样：

```js ;({ foo: 123 }) ```

属性的操作

读、写、删除

读： . / []

方括号内部可使用表达式

数字会自动转为字符串，数字属性不能使用 . 获取属性值。

写：直接对属性赋新值

查看对象所有属性： Object.keys 。

删除：delete

删除返回 true 并不能确定被删除属性存在。

返回 false 说明该属性不可删除。

delete 只能删除对象的本身属性，不能删除继承属性。

属性是否存在？ in

属性遍历：for…in

对象属性的可遍历性。

with 语句会产生全局变量，最好不用。

函数

函数声明

（1）function

（2）函数表达式

（3） Function 构造函数

函数的重复声明

如果同一个函数被多次声明，后面的声明就会覆盖前面的声明。

```js function f() { console.log(1) } f() // 2

function f() { console.log(2) } f() // 2 ```

函数名提升

圆括号运算符、return 语句和递归

函数调用自身即是递归（recursion）。

第一等公民

凡是能使用值的地方，都能使用函数。

```js function add(x, y) { return x + y } var op = add

function a(op) { return op } a(op)(1, 1) ```

最后一行为什么这样写也可以？正常写法不应该是 a(op(1,1)) 吗？

函数名提升

JavaScript 引擎将函数名视同变量名，所以采用 function 命令声明函数时，整个函数会像变量声明一样，被提升到代码头部。

函数的属性和方法

（1）name

返回函数名/变量名

（2）length

返回传入参数个数

（3）toString()

返回函数源码字符串

对于那些原生的函数，toString()方法返回 function (){[native code]} 。

函数内部的注释也会返回。可以利用这一点实现多行字符串。

```js var multiline = function (fn) { var arr = fn.toString().split('\n') return arr.slice(1, arr.length - 1).join('\n') }

function f() { /* 这是一个 多行注释*/ } multiline(f) ```

函数作用域

作用域（scope）指变量存在的范围。在 ES5 规范中，JS 只有两种作用域：全局作用域和函数作用域；ES6 引入块级作用域。

函数自身也是一个作用域。

函数执行时所在的作用域，是定义时的作用域，而不是调用时所在的作用域。

很容易犯错的一点是，如果函数 A 调用函数 B，却没考虑到函数 B 不会引用函数 A 的内部变量。

函数体内部声明的函数，作用域绑定函数体内部。

参数

参数可省略。

参数传递方式：

• 按值传递（值是原始类型）
• 按址传递（值是复合类型）

同名参数

arguments 对象可以读取函数传入的参数。需要注意的是，虽然 arguments 很像数组，但它是一个对象。数组专有的方法（比如 slice 和 forEach），不能在 arguments 对象上直接使用。arguments 对象带有一个 callee 属性，返回它所对应的原函数。

闭包

```js function f1() { var n = 999 function f2() { console.log(n) } return f2 }

var result = f1() result() // 999 ```

上面代码中，函数 f2 就在函数 f1 内部，这时 f1 内部的所有局部变量，对 f2 都是可见的。但是反过来就不行，f2 内部的局部变量，对 f1 就是不可见的。这就是 JavaScript 语言特有的"链式作用域"结构（chain scope），子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

闭包就是函数 f2，即能够读取其他函数内部变量的函数。

```js function createIncrementor(start) { return function () { return start++ } }

var inc = createIncrementor(4) inc() inc() ```

为什么闭包能够返回外层函数的内部变量？原因是闭包（上例的 inc）用到了外层变量（start），导致外层函数（createIncrementor）不能从内存释放。只要闭包没有被垃圾回收机制清除，外层函数提供的运行环境也不会被清除，它的内部变量就始终保存着当前值，供闭包读取。

闭包的最大用处有两个，一个是可以读取外层函数内部的变量，另一个就是让这些变量始终保持在内存中，即闭包可以使得它诞生环境一直存在。

闭包的另一个用处，是封装对象的私有属性和私有方法。

```js function Person(name) { var <sub>age</sub> function setAge(n) { <sub>age</sub> = n } function getAge() { return <sub>age</sub> } return { name: name, getAge: getAge, setAge: setAge, } }

var p1 = Person('Jim') p1.setAge(23) p1.getAge() p1 ```

注意，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的内部变量，所以内存消耗很大。因此不能滥用闭包，否则会造成网页的性能问题。

立即调用的函数表达式

Immediately-Invoked Function Expression

```js var f = (function () { return 1 })() // 或者这样写 (function f() {return 1}) 或者 (function f() {return 1}()) 或者 (function f() {return 1})() f ```

通常情况下，只对匿名函数使用这种”立即执行的函数表达式”。它的目的有两个：一是不必为函数命名，避免了污染全局变量；二是 IIFE 内部形成了一个单独的作用域，可以封装一些外部无法读取的私有变量。

```js // 写法1 var tmp = newData processData(tmp) storeData(tmp)( // 写法2 (function () { var tmp = newData processData(tmp) storeData(tmp) })(), ) ```

上面代码中，写法二比写法一更好，因为完全避免了污染全局变量。

eval

eval 命令接受一个字符串作为参数，并将这个字符串当作语句执行。

如果参数非字符串，原样返回。

eval 没有自己的作用域，都在当前作用域内执行，因此可能会修改当前作用域的变量的值，造成安全问题。由于这个原因，eval 有安全风险。为了防止这种风险，JavaScript 规定，如果使用严格模式，eval 内部声明的变量，不会影响到外部作用域。不过，即使在严格模式下，eval 依然可以读写当前作用域的变量。

总之，eval 的本质是在当前作用域之中，注入代码。由于安全风险和不利于 JavaScript 引擎优化执行速度，一般不推荐使用。通常情况下，eval 最常见的场合是解析 JSON 数据的字符串，不过正确的做法应该是使用原生的 JSON.parse 方法。

eval 的别名调用

```js var m = eval m('var x = 1') x ```

为了保证 eval 的别名不影响代码优化，JavaScript 的标准规定，凡是使用别名执行 eval，eval 内部一律是全局作用域。

参考资料

1. John Dalziel, The race for speed part 4: The future for JavaScript | The race for speed part 2: How JavaScript compilers work
2. http://kangax.github.io/compat-table/es6/ JS 标准兼容性表
3. Dr. Axel Rauschmayer, Basic JavaScript for the impatient programmer | Basic JavaScript for the impatient programmer | Improving the JavaScript typeof operator | Categorizing values in JavaScript | How numbers are encoded in JavaScript | Object properties in JavaScript | JavaScript's with statement and why it's deprecated | Evaluating JavaScript code via eval() and new Function() | Arrays in JavaScript | JavaScript: sparse arrays vs. dense arrays | What is {} + {} in JavaScript? | JavaScript quirk 1: implicit conversion of values | A meta style guide for JavaScript | Automatic semicolon insertion in JavaScript | What JavaScript would be like with significant newlines | The JavaScript console API | Protecting objects in JavaScript | JavaScript: an overview of the regular expression API | The flag /g of JavaScript's regular expressions | JavaScript's JSON API | JavaScript's this: how it works, where it can trip you up | JavaScript properties: inheritance and enumerability | JavaScript: Why the hatred for strict mode? | JavaScript's strict mode: a summary | ECMAScript 6 promises (1/2): foundations | Speaking JavaScript（ES5） | Exploring JS: JavaScript books for programmers（ES6 and other versions）: The Past, Present, and Future of JavaScript
4. Happy 18th Birthday JavaScript! A look at an unlikely past and bright future.
5. Humphry, JavaScript 中 Number 的一些表示上/下限
6. Mathias Bynens, JavaScript's internal character encoding: UCS-2 or UTF-16? | JavaScript has a Unicode problem
7. MDN Web Docs, btoa() | Regular expressions | Expressions and operators | JSON | Strict mode | setTimeout() | Using HTTP cookies | Window.postMessage() | Cross-Origin Resource Sharing (CORS) | Location | URL | URLSearchParams
8. Lakshan Perera, Revisiting JavaScript Objects
9. Angus Croll, The Secret Life of JavaScript Primitives
10. Ben Alman, Immediately-Invoked Function Expression (IIFE)
11. Mark Daggett, Functions Explained
12. Juriy Zaytsev, Named function expressions demystified | Global eval. What are the options? | How ECMAScript 5 still does not allow to subclass array | Understanding delete
13. Marco Rogers polotek, What is the arguments object?
14. Felix Bohm, What They Didn't Tell You About ES5's Array Extras
15. Michal Budzynski, JavaScript: The less known parts. Bitwise Operators. | JavaScript: The less known parts. DOM Mutations.
16. Benjie Gillam, Quantum JavaScript?
17. Jani Hartikainen, JavaScript Errors and How to Fix Them
18. Eric Elliott, Programming JavaScript Applications, Chapter 2. JavaScript Style Guide, O'Reilly, 2014
19. Rod Vagg, Semicolons, Objectively
20. Chrome Devtools | Console Utilities API reference
21. Matt West, Mastering The Developer Tools Console
22. Firefox Devtools - Console API
23. Marius Schulz, Advanced JavaScript Debugging with console.table()
24. Jon Bretman, Type Checking in JavaScript
25. Cody Lindley, Thinking About ECMAScript 5 Parts
26. Bjorn Tipling, Advanced objects in JavaScript
27. Javier Márquez, Javascript properties are enumerable, writable and configurable
28. Sella Rafaeli, Native JavaScript Data-Binding
29. Lea Verou, Copying object properties, the robust way
30. Nicolas Bevacqua, Fun with JavaScript Native Array Functions
31. Ariya Hidayat, JavaScript String: substring, substr, slice
32. Rakhitha Nimesh, JavaScript Date Object: The Beginner's Guide to JavaScript Date and Time
33. Date and time - javascript.info
34. Sam Hughes, Learn regular expressions in about 55 minutes
35. Jim Cowart, What You Might Not Know About JSON.stringify()
36. Marco Rogers, What is JSON?
37. Jonathan Creamer, Avoiding the "this" problem in JavaScript
38. Erik Kronberg, Bind, Call and Apply in JavaScript
39. JavaScript Modules: A Beginner's Guide
40. Douglas Crockford, Strict Mode Is Coming To Town
41. Sebastian Porto, Asynchronous JS: Callbacks, Listeners, Control Flow Libs and Promises
42. Rhys Brett-Bowen, Promises/A+ - understanding the spec through implementation
43. Marc Harter, Promise A+ Implementation
44. Matt Podwysocki, Amanda Silver, Asynchronous Programming in JavaScript with "Promises"
45. Bryan Klimt, What's so great about JavaScript Promises?
46. Jake Archibald, JavaScript Promises: an introduction
47. Mikito Takada, Control flow
48. Craig Buckler, How to Translate from DOM to SVG Coordinates and Back Again
49. Paul Kinlan, Detect DOM changes with Mutation Observers
50. Tiffany Brown, Getting to Know Mutation Observers
51. Jeff Griffiths, DOM MutationObserver – reacting to DOM changes without killing browser performance.
52. Addy Osmani, Detect, Undo And Redo DOM Changes With Mutation Observers
53. Ryan Morr, Using Mutation Observers to Watch for Element Availability
54. Jake Archibald, Deep dive into the murky waters of script loading
55. Remy Sharp, Throttling function calls
56. Ayman Farhat, An alternative to Javascript's evil setInterval
57. Ilya Grigorik, Script-injected "async scripts" considered harmful
58. Daniel Imms, async vs defer attributes
59. Craig Buckler, Load Non-blocking JavaScript with HTML5 Async and Defer
60. Domenico De Felice, How browsers work
61. Using the Same-Site Cookie Attribute to Prevent CSRF Attacks
62. SameSite cookies explained
63. Tough Cookies
64. Cross-Site Request Forgery is dead!
65. Jakub Jankiewicz, Cross-Domain LocalStorage
66. David Baron, setTimeout with a shorter delay
67. Monsur Hossain, Cross-Origin Resource Sharing (CORS)
68. https://frontendian.co/cors
69. Grzegorz Mirek, Do You Really Know CORS?
70. Introducing the HTML5 storage APIs
71. Getting Started with LocalStorage
72. Introducing the HTML5 Hard Disk Filler™ API
73. Inter-window messaging using localStorage
74. Why does Internet Explorer fire the window "storage" event on the window that stored the data?
75. localStorage eventListener is not called
76. Easy URL Manipulation with URLSearchParams
77. Thoriq Firdaus, HTML5 Form Validation With the "pattern" Attribute
78. Raymond Camden, Working With IndexedDB | Working With IndexedDB - Part 2 | Working With IndexedDB - Part 3
79. Tiffany Brown, An Introduction to IndexedDB
80. David Fahlander, Breaking the Borders of IndexedDB
81. HTML5 - IndexedDB

相关：js-debugging

相关：js-oop

相关：js-ternary-operator

相关：javascript