ES5/ES6补充
ES5/ES6补充
ECMAScript 5 2009年12月 正式发布 ECMAScript 5.1就是我们常说的es5 2012年发布
ECMAScript 6(简称ES6)是于2015年6月正式发布的javascript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
声明命令 let const
let声明符
ES6 新增了
let
命令,用来声明变量。它的用法类似于var
,但是所声明的变量,只在let
命令所在的代码块内有效。
基础特性
1 | if(true){ |
上面代码在代码块之中,分别用let
和var
声明了两个变量。然后在代码块之外调用这两个变量,结果let
声明的变量报错,var
声明的变量返回了正确的值。这表明,let
声明的变量只在它所在的代码块有效。
1 | // 在循环体表达式中let声明迭代变量i是let声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量 |
1 | // 在循环体表达式中let声明 和循环体中let 声明同名变量是不冲突的 设置循环变量的那部分是一个父作用域,而循环体内部是一个单独的子作用域。相当于每次循环{}内部都会单独开一个局部作用域 |
不进行变量提升
var
命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefined
。
let
命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。 这一点需要特殊注意
1 | // var 的情况 |
致死域(暂时性死区)
只要块级作用域内存在
let
命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。
1 | //正常调用 |
当程序的控制流程在新的作用域(module function 或 block 作用域)进行实例化时,在此作用域中用let/const声明的变量会先在作用域中被创建出来,但因此时还未进行词法绑定,所以是不能被访问的,如果访问就会抛出错误。因此,在这运行流程进入作用域创建变量,到变量可以被访问之间的这一段时间,就称之为暂时死区。
es6规定 let
/const
会使区域形成封闭的作用域 若在声明之前使用变量就会发生错误, 在代码块
内使用let命令声明变量之前 该变量都无法使用,称为“暂时性死区”(temporal dead zone,简称 TDZ)。总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。**使用let 确保先 声明 再 使用 变量 不要混用let和var在同一个作用域链上 避免死区 **
无法重复声明
let
不允许在相同作用域内,重复声明同一个变量。
1 | //发生致死 因为var会变量提升。 |
块作用域 (block scope)
在ES5中,只全局作用域和函数作用域。这会导致函数作用域覆盖了全局作用域;亦或者循环中的变量泄露为全局变量。
EcmaScript 6引入了块级作用域(block scope),块级作用域只能在块中被访问,以下两种情况可以创建块级作用域的变量。
在函数中
在被
{
和}
包裹的块中
1 | { |
块作用域下的函数声明
ES5 规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。
ES6 的块级作用域必须有大括号,如果没有大括号,JavaScript 引擎就认为不存在块级作用域。
1 |
|
为了减轻因此产生的不兼容问题,ES6 在附录 B里面规定,浏览器的实现可以不遵守上面的规定,有自己的行为方式。
- 允许在块级作用域内声明函数。
- 函数声明类似于
var
,即会提升到全局作用域或函数作用域的头部。 - 同时,函数声明还会提升到所在的块级作用域的头部。
const声明符
const
声明一个只读的常量。一旦声明,常量的值就不能改变。 const与let在 块作用域 重复声明 致死域的问题上是一致的const
的作用域与let
命令相同:只在声明所在的块级作用域内有效。
1 | const DATA = '我是常量 不能改变哦'; |
const
声明的变量不得改变值,这意味着,const
一旦声明变量,就必须立即初始化,不能留到以后赋值。
声明时必须赋值
1 | const X; |
值为对象
1 | const KEY_MAP = { |
解构赋值
ES6提供了更简洁的赋值模式, 从数组和对象中提取值. 这被称为解构(Destructuring)。
1 | [a, b] = [50, 100]; |
我们有很多种不同的方式使用 JavaScript 解构。
数组解构
数组解构是极为简单整洁的,在复制表达式的左侧使用数组字面量。数组字面量中的每个变量名称映射为解构数组的相同索引项。
基础变量赋值
1 | let foo = ['one', 'two', 'three']; |
声明分别赋值
你可以通过变量声明分别解构赋值。举例:首先,声明变量,然后分别赋值。
1 | // 声明变量 |
解构默认值
如果解构取出的值是 undefined
,可以设置默认值:
1 | let a, b; |
在上面的例子中,我们给 a
和 b
设置了默认值。这种情况下,如果 a
或 b
的值是 undefined
,它将赋值默认值 5
给 a
7
给 b
交换变量值
解构可以在一个解构表达式中交换两个变量值,是不是很酷?
1 | let a = 1; |
如果你想不使用解构交换变量值,将必须提供一个缓存变量或者同解构一起使用
解析函数返回的数组
是的,可以解构函数返回的数组。
1 | function c() { |
在上面的例子中,c()
的返回值 [10, 20]
可以在单独的一行代码中使用解构解析。
忽略返回值/跳过某项
你也可以跳过一些没有用的返回值。举例:
1 | function c() { |
在罕见的情况下,你想忽略所有的值。
1 | [, ,] = c(); |
当然,我知晓这是不会发生的,但是作为一个教程我不得不告知你每一件事。
赋值数组剩余值给一个变量
当你使用数组解构,你可以赋值数组剩余部分给一个单独的变量。
1 | let [a, ...b] = [1, 2, 3]; |
小心结尾的逗号语法错误,它将爆发如果在剩余元素的左侧使用结尾逗号:
1 | let [a, ...b,] = [1, 2, 3]; |
嵌套数组解构
像对象一样,你也可以使用数组嵌套解构。这里有一个例子:
1 | const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)']; |
对象解构
基础对象解构
1 | let x = { y: 22, z: true }; |
无声明解构
你可以使用解构分别从它的声明赋值变量。这意味着在上面的例子中不需要创建变量 x
。
1 | let y, z; |
注意:圆括号
(...)
包裹赋值声明是必须的当使用对象字面量解构赋值无声明变量。
{a, b} = {a: 1, b: 2}
不是有效的独立语法,左侧的{a, b}
被考虑为代码块而不是一个对象字面量。因此,
({a, b} = {a: 1, b: 2})
是有效的, 等价于var {a, b} = {a: 1, b: 2}
。
(...)
表达式需要前置分号或者它可能用于在前一行执行函数。
赋值给新变量名
当使用对象解构时你也可以改变变量的名称,如下例子:
1 | let o = { p: 22, q: true }; |
例子中,var {p: foo} = o
获取对象 o
的属性名 p
,然后赋值给一个名称为 foo
的变量。
解构默认值
如果解构取出的对象值是 undefined
你也可以设置默认值。
1 | let { a = 10, b = 5 } = { a: 3 }; |
赋值给新变量名的同时提供默认值
1 | let { a: aa = 10, b: bb = 5 } = { a: 3 }; |
嵌套对象和数组解构
1 | const metadata = { |
可计算对象属性名与解构
当使用解构改变对象属性的名称时,可以使用对象计算属性名。
1 | let key = 'z'; |
在上面的例子中,我们计算变量键值并改变它的名称为 foo
。
同时使用数组和对象解构
在解构中数组和对象可以联合使用:
1 | const props = [ |
所有的解构赋值语法是相同的,是在赋值符号左侧声明从源变量取出的值。举例来说:
1 | let x = [1, 2, 3, 4, 5]; |
注意点
(1)如果要将一个已经声明的变量用于解构赋值,必须非常小心。
1 | // 错误的写法 |
上面代码的写法会报错,因为 JavaScript 引擎会将{x}
理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免 JavaScript 将其解释为代码块,才能解决这个问题。
1 | // 正确的写法 |
上面代码将整个解构赋值语句,放在一个圆括号里面,就可以正确执行。
(2)解构赋值允许等号左边的模式之中,不放置任何变量名。因此,可以写出非常古怪的赋值表达式。
1 | ({} = [true, false]); |
上面的表达式虽然毫无意义,但是语法是合法的,可以执行。
(3)由于数组本质是特殊的对象,因此可以对数组进行对象属性的解构。
1 | let arr = [1, 2, 3]; |
上面代码对数组进行对象解构。数组arr
的0
键对应的值是1
,[arr.length - 1]
就是2
键,对应的值是3
。方括号这种写法,属于“属性名表达式”
函数参数的解构赋值
函数的参数也可以使用解构赋值。
1 | function add([x, y]){ |
上面代码中,函数add
的参数表面上是一个数组,但在传入参数的那一刻,数组参数就被解构成变量x
和y
。对于函数内部的代码来说,它们能感受到的参数就是x
和y
。
下面是另一个例子。
1 | [[1, 2], [3, 4]].map(([a, b]) => a + b); |
函数参数的解构也可以使用默认值。
1 | function move({x = 0, y = 0} = {}) { |
上面代码中,函数move
的参数是一个对象,通过对这个对象进行解构,得到变量x
和y
的值。如果解构失败,x
和y
等于默认值。
注意,下面的写法会得到不一样的结果。
1 | function move({x, y} = { x: 0, y: 0 }) { |
上面代码是为函数move
的参数指定默认值,而不是为变量x
和y
指定默认值,所以会得到与前一种写法不同的结果。
undefined
就会触发函数参数的默认值。
1 | [1, undefined, 3].map((x = 'yes') => x); |
解构的用途
变量的解构赋值用途很多。
交换变量的值
1 | let x = 1; |
上面代码交换变量x
和y
的值,这样的写法不仅简洁,而且易读,语义非常清晰。
从函数返回多个值
函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
1 | // 返回一个数组 |
函数参数的定义
解构赋值可以方便地将一组参数与变量名对应起来。
1 | // 参数是一组有次序的值 |
提取 JSON 数据
解构赋值对提取 JSON 对象中的数据,尤其有用。
1 | let jsonData = { |
上面代码可以快速提取 JSON 数据的值。
函数参数的默认值
1 | jQuery.ajax = function (url, { |
指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';
这样的语句。
ES6函数扩展
默认参数
javascript函数中 我们经常需要给必要参数加以默认值 防止参数为传的情况下出现错误
之前写法
1 | function count(x,y){ |
1 | function count(x,y){ |
ES6 写法
ES6 的写法不仅简洁 而且易读 让其他开发者能够快速了解参数类型 是否可省等信息, 也不会对函数体代码造成过多负担 有利于后期优化重构
1 | function count(x = 0,y = 0){ |
注意点
1 | // 使用默认参数 无法在函数体内重新声明同名变量 |
1 | //参数默认值不是传值的,而是每次都重新计算默认值表达式的值。也就是说,参数默认值是惰性求值的。 |
1 | //参数也可以作为默认值 但要注意顺序 |
1 | //参数默认值为变量时 如果外部作用域有对应变量 指向外部变量对应值 |
reset 参数
ES6 引入 rest 参数(形式为
...变量名
),用于获取函数的多余参数,这样就不需要使用arguments
对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中。
1 | //类似结构赋值 以后就不用call来使arguments可以调用数组方法了 |
1 | //注意 reset参数必须作为函数最后一个参数 |
name属性
函数的
name
属性,返回该函数的函数名。
1 | function count(){} |
箭头函数
ES6 容许使用 “箭头”
=>
定义函数
1 | function count(x,y){ |
1 | //函数体可以 直接书写表达式 或()内书写表达式 或 {} 书写多行语句 |
this指向
1 | /*函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。*/ |
1 | *注意: `箭头函数里面根本没有自己的this,而是引用外层的this。由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向。` |
练习
1 | //pipeline 通道组合函数 |
ES6对象扩展
表示方法
ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
1 | const foo = 'bar'; |
1 | function f(x, y) { |
setter/getter写法
1 | const cart = { |
属性名表达式
1 | // 方法一 |
上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。
但是,如果使用字面量方式定义对象(使用大括号),在 ES5 中只能使用方法一(标识符)定义属性。
ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。
1 | let propKey = 'foo'; |
1 | let lastWord = 'last word'; |
注意,属性名表达式与简洁表示法,不能同时使用,会报错。
1 | // 报错 |
注意,属性名表达式如果是一个对象,默认情况下会自动将对象转为字符串[object Object]
,这一点要特别小心。
1 | const keyA = {a: 1}; |
上面代码中,[keyA]
和[keyB]
得到的都是[object Object]
,所以[keyB]
会把[keyA]
覆盖掉,而myObject
最后只有一个[object Object]
属性。
属性的可枚举性和遍历
可枚举性
对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。Object.getOwnPropertyDescriptor
方法可以获取该属性的描述对象。
1 | let obj = { foo: 123 }; |
描述对象的enumerable
属性,称为“可枚举性”,如果该属性为false
,就表示某些操作会忽略当前属性。
目前,有四个操作会忽略enumerable
为false
的属性。
for...in
循环:只遍历对象自身的和继承的可枚举的属性。Object.keys()
:返回对象自身的所有可枚举的属性的键名。JSON.stringify()
:只串行化对象自身的可枚举的属性。Object.assign()
: 忽略enumerable
为false
的属性,只拷贝对象自身的可枚举的属性。
这四个操作之中,前三个是 ES5 就有的,最后一个Object.assign()
是 ES6 新增的。其中,只有for...in
会返回继承的属性,其他三个方法都会忽略继承的属性,只处理对象自身的属性。实际上,引入“可枚举”(enumerable
)这个概念的最初目的,就是让某些属性可以规避掉for...in
操作,不然所有内部属性和方法都会被遍历到。比如,对象原型的toString
方法,以及数组的length
属性,就通过“可枚举性”,从而避免被for...in
遍历到。
1 | Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable |
上面代码中,toString
和length
属性的enumerable
都是false
,因此for...in
不会遍历到这两个继承自原型的属性。
另外,ES6 规定,所有 Class 的原型的方法都是不可枚举的。
1 | Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable |
总的来说,操作中引入继承的属性会让问题复杂化,大多数时候,我们只关心对象自身的属性。所以,尽量不要用for...in
循环,而用Object.keys()
代替。
属性的遍历
ES6 一共有 5 种方法可以遍历对象的属性。
(1)for…in
for...in
循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。
(2)Object.keys(obj)
Object.keys
返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。
(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames
返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。
(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols
返回一个数组,包含对象自身的所有 Symbol 属性的键名。
(5)Reflect.ownKeys(obj)
Reflect.ownKeys
返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举。
以上的 5 种方法遍历对象的键名,都遵守同样的属性遍历的次序规则。
- 首先遍历所有数值键,按照数值升序排列。
- 其次遍历所有字符串键,按照加入时间升序排列。
- 最后遍历所有 Symbol 键,按照加入时间升序排列。
1 | Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) |
上面代码中,Reflect.ownKeys
方法返回一个数组,包含了参数对象的所有属性。这个数组的属性次序是这样的,首先是数值属性2
和10
,其次是字符串属性b
和a
,最后是 Symbol 属性。
super 关键字
我们知道,this
关键字总是指向函数所在的当前对象,ES6 又新增了另一个类似的关键字super
,指向当前对象的原型对象。
1 | const proto = { |
上面代码中,对象obj.find()
方法之中,通过super.foo
引用了原型对象proto
的foo
属性。
注意,super
关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。
1 | // 报错 |
上面三种super
的用法都会报错,因为对于 JavaScript 引擎来说,这里的super
都没有用在对象的方法之中。第一种写法是super
用在属性里面,第二种和第三种写法是super
用在一个函数里面,然后赋值给foo
属性。目前,只有对象方法的简写法可以让 JavaScript 引擎确认,定义的是对象的方法。
JavaScript 引擎内部,super.foo
等同于Object.getPrototypeOf(this).foo
(属性)或Object.getPrototypeOf(this).foo.call(this)
(方法)。
1 | const proto = { |
上面代码中,super.foo
指向原型对象proto
的foo
方法,但是绑定的this
却还是当前对象obj
,因此输出的就是world
。
对象拷贝与解构
对象解构
1 | let z = { a: 3, b: 4 }; |
对象拷贝
1 | let aClone = { ...a }; |
上面的例子只是拷贝了对象实例的属性,如果想完整克隆一个对象,还拷贝对象原型的属性,可以采用下面的写法。
1 | // 写法一 |
上面代码中,写法一的__proto__
属性在非浏览器的环境不一定部署,因此推荐使用写法二和写法三。
扩展运算符可以用于合并两个对象。
链判断运算符
编程实务中,如果读取对象内部的某个属性,往往需要判断一下该对象是否存在。比如,要读取message.body.user.firstName
,安全的写法是写成下面这样。
1 | // 错误的写法 |
1 | const fooInput = myForm.querySelector('input[name=foo]') |
下面是判断对象方法是否存在,如果存在就立即执行的例子。
1 | iterator.return?.() |
链判断运算符有三种用法。
obj?.prop
// 对象属性obj?.[expr]
// 同上func?.(...args)
// 函数或对象方法的调用
1 |
|
使用这个运算符,有几个注意点。
(1)短路机制
?.
运算符相当于一种短路机制,只要不满足条件,就不再往下执行。
1 | a?.[++x] |
上面代码中,如果a
是undefined
或null
,那么x
不会进行递增运算。也就是说,链判断运算符一旦为真,右侧的表达式就不再求值。
(2)delete 运算符
1 | delete a?.b |
上面代码中,如果a
是undefined
或null
,会直接返回undefined
,而不会进行delete
运算。
(3)括号的影响
如果属性链有圆括号,链判断运算符对圆括号外部没有影响,只对圆括号内部有影响。
1 | (a?.b).c |
上面代码中,?.
对圆括号外部没有影响,不管a
对象是否存在,圆括号后面的.c
总是会执行。
一般来说,使用?.
运算符的场合,不应该使用圆括号。
(4)报错场合
以下写法是禁止的,会报错。
1 | // 构造函数 |
(5)右侧不得为十进制数值
为了保证兼容以前的代码,允许foo?.3:0
被解析成foo ? .3 : 0
,因此规定如果?.
后面紧跟一个十进制数字,那么?.
不再被看成是一个完整的运算符,而会按照三元运算符进行处理,也就是说,那个小数点会归属于后面的十进制数字,形成一个小数。
Class
类的由来
JavaScript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。
1 | function Point(x, y) { |
上面这种写法跟传统的面向对象语言(比如 C++ 和 Java)差异很大,很容易让新学习这门语言的程序员感到困惑。
ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板。通过class
关键字,可以定义类。
基本上,ES6 的class
可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class
写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。上面的代码用 ES6 的class
改写,就是下面这样。
1 | class Point { |
上面代码定义了一个“类”,可以看到里面有一个constructor
方法,这就是构造方法,而this
关键字则代表实例对象。也就是说,ES5 的构造函数Point
,对应 ES6 的Point
类的构造方法。
Point
类除了构造方法,还定义了一个toString
方法。注意,定义“类”的方法的时候,前面不需要加上function
这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。
ES6 的类,完全可以看作构造函数的另一种写法。
1 | class Point { |
上面代码表明,类的数据类型就是函数,类本身就指向构造函数。
使用的时候,也是直接对类使用new
命令,跟构造函数的用法完全一致。
1 | class Bar { |
构造函数的prototype
属性,在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype
属性上面。
1 | class Point { |
在类的实例上面调用方法,其实就是调用原型上的方法。
1 | class B {} |
上面代码中,b
是B
类的实例,它的constructor
方法就是B
类原型的constructor
方法。
由于类的方法都定义在prototype
对象上面,所以类的新方法可以添加在prototype
对象上面。Object.assign
方法可以很方便地一次向类添加多个方法。
1 | class Point { |
prototype
对象的constructor
属性,直接指向“类”的本身,这与 ES5 的行为是一致的。
1 | Point.prototype.constructor === Point // true |
另外,类的内部所有定义的方法,都是不可枚举的(non-enumerable)。
1 | class Point { |
上面代码中,toString
方法是Point
类内部定义的方法,它是不可枚举的。这一点与 ES5 的行为不一致。
1 | var Point = function (x, y) { |
上面代码采用 ES5 的写法,toString
方法就是可枚举的。
constructor 方法
constructor
方法是类的默认方法,通过new
命令生成对象实例时,自动调用该方法。一个类必须有constructor
方法,如果没有显式定义,一个空的constructor
方法会被默认添加。
1 | class Point { |
上面代码中,定义了一个空的类Point
,JavaScript 引擎会自动为它添加一个空的constructor
方法。
constructor
方法默认返回实例对象(即this
),完全可以指定返回另外一个对象。
1 | class Foo { |
上面代码中,constructor
函数返回一个全新的对象,结果导致实例对象不是Foo
类的实例。
类必须使用new
调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new
也可以执行。
1 | class Foo { |
类的实例
生成类的实例的写法,与 ES5 完全一样,也是使用new
命令。前面说过,如果忘记加上new
,像函数那样调用Class
,将会报错。
1 | class Point { |
与 ES5 一样,实例的属性除非显式定义在其本身(即定义在this
对象上),否则都是定义在原型上(即定义在class
上)。
1 | //定义类 |
上面代码中,x
和y
都是实例对象point
自身的属性(因为定义在this
变量上),所以hasOwnProperty
方法返回true
,而toString
是原型对象的属性(因为定义在Point
类上),所以hasOwnProperty
方法返回false
。这些都与 ES5 的行为保持一致。
与 ES5 一样,类的所有实例共享一个原型对象。
1 | var p1 = new Point(2,3); |
上面代码中,p1
和p2
都是Point
的实例,它们的原型都是Point.prototype
,所以__proto__
属性是相等的。
这也意味着,可以通过实例的__proto__
属性为“类”添加方法。
__proto__
并不是语言本身的特性,这是各大厂商具体实现时添加的私有属性,虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性,但依旧不建议在生产中使用该属性,避免对环境产生依赖。生产环境中,我们可以使用Object.getPrototypeOf
方法来获取实例对象的原型,然后再来为原型添加方法/属性。
1 | var p1 = new Point(2,3); |
上面代码在p1
的原型上添加了一个printName
方法,由于p1
的原型就是p2
的原型,因此p2
也可以调用这个方法。而且,此后新建的实例p3
也可以调用这个方法。这意味着,使用实例的__proto__
属性改写原型,必须相当谨慎,不推荐使用,因为这会改变“类”的原始定义,影响到所有实例。
取值函数(getter)和存值函数(setter)
与 ES5 一样,在“类”的内部可以使用get
和set
关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为。
1 | class MyClass { |
上面代码中,prop
属性有对应的存值函数和取值函数,因此赋值和读取行为都被自定义了。
存值函数和取值函数是设置在属性的 Descriptor 对象上的。
1 | class CustomHTMLElement { |
上面代码中,存值函数和取值函数是定义在html
属性的描述对象上面,这与 ES5 完全一致。
属性表达式
类的属性名,可以采用表达式。
1 | let methodName = 'getArea'; |
上面代码中,Square
类的方法名getArea
,是从表达式得到的。
Class 表达式
与函数一样,类也可以使用表达式的形式定义。
1 | const MyClass = class Me { |
上面代码使用表达式定义了一个类。需要注意的是,这个类的名字是Me
,但是Me
只在 Class 的内部可用,指代当前类。在 Class 外部,这个类只能用MyClass
引用。
1 | let inst = new MyClass(); |
上面代码表示,Me
只在 Class 内部有定义。
如果类的内部没用到的话,可以省略Me
,也就是可以写成下面的形式。
1 | const MyClass = class { /* ... */ }; |
采用 Class 表达式,可以写出立即执行的 Class。
1 | let person = new class { |
上面代码中,person
是一个立即执行的类的实例。
注意点
(1)严格模式
类和模块的内部,默认就是严格模式,所以不需要使用use strict
指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用。考虑到未来所有的代码,其实都是运行在模块之中,所以 ES6 实际上把整个语言升级到了严格模式。
(2)不存在提升
类不存在变量提升(hoist),这一点与 ES5 完全不同。
1 | new Foo(); // ReferenceError |
上面代码中,Foo
类使用在前,定义在后,这样会报错,因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与下文要提到的继承有关,必须保证子类在父类之后定义。
1 | { |
上面的代码不会报错,因为Bar
继承Foo
的时候,Foo
已经有定义了。但是,如果存在class
的提升,上面代码就会报错,因为class
会被提升到代码头部,而let
命令是不提升的,所以导致Bar
继承Foo
的时候,Foo
还没有定义。
(3)name 属性
由于本质上,ES6 的类只是 ES5 的构造函数的一层包装,所以函数的许多特性都被Class
继承,包括name
属性。
1 | class Point {} |
name
属性总是返回紧跟在class
关键字后面的类名。
(4)Generator 方法
如果某个方法之前加上星号(*
),就表示该方法是一个 Generator 函数。
1 | class Foo { |
上面代码中,Foo
类的Symbol.iterator
方法前有一个星号,表示该方法是一个 Generator 函数。Symbol.iterator
方法返回一个Foo
类的默认遍历器,for...of
循环会自动调用这个遍历器。
(5)this 的指向
类的方法内部如果含有this
,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错。
1 | class Logger { |
上面代码中,printName
方法中的this
,默认指向Logger
类的实例。但是,如果将这个方法提取出来单独使用,this
会指向该方法运行时所在的环境(由于 class 内部是严格模式,所以 this 实际指向的是undefined
),从而导致找不到print
方法而报错。
一个比较简单的解决方法是,在构造方法中绑定this
,这样就不会找不到print
方法了。
1 | class Logger { |
另一种解决方法是使用箭头函数。
1 | class Obj { |
箭头函数内部的this
总是指向定义时所在的对象。上面代码中,箭头函数位于构造函数内部,它的定义生效的时候,是在构造函数执行的时候。这时,箭头函数所在的运行环境,肯定是实例对象,所以this
会总是指向实例对象。
还有一种解决方法是使用Proxy
,获取方法的时候,自动绑定this
。
1 | function selfish (target) { |
静态方法
类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static
关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
1 | class Foo { |
上面代码中,Foo
类的classMethod
方法前有static
关键字,表明该方法是一个静态方法,可以直接在Foo
类上调用(Foo.classMethod()
),而不是在Foo
类的实例上调用。如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。
注意,如果静态方法包含this
关键字,这个this
指的是类,而不是实例。
1 | class Foo { |
上面代码中,静态方法bar
调用了this.baz
,这里的this
指的是Foo
类,而不是Foo
的实例,等同于调用Foo.baz
。另外,从这个例子还可以看出,静态方法可以与非静态方法重名。
父类的静态方法,可以被子类继承。
1 | class Foo { |
上面代码中,父类Foo
有一个静态方法,子类Bar
可以调用这个方法。
静态方法也是可以从super
对象上调用的。
1 | class Foo { |
实例属性的新写法
实例属性除了定义在constructor()
方法里面的this
上面,也可以定义在类的最顶层。
1 | class IncreasingCounter { |
上面代码中,实例属性this._count
定义在constructor()
方法里面。另一种写法是,这个属性也可以定义在类的最顶层,其他都不变。
1 | class IncreasingCounter { |
上面代码中,实例属性_count
与取值函数value()
和increment()
方法,处于同一个层级。这时,不需要在实例属性前面加上this
。
这种新写法的好处是,所有实例对象自身的属性都定义在类的头部,看上去比较整齐,一眼就能看出这个类有哪些实例属性。
1 | class foo { |
上面的代码,一眼就能看出,foo
类有两个实例属性,一目了然。另外,写起来也比较简洁。
静态属性
静态属性指的是 Class 本身的属性,即Class.propName
,而不是定义在实例对象(this
)上的属性。
1 | class Foo { |
上面的写法为Foo
类定义了一个静态属性prop
。
目前,只有这种写法可行,因为 ES6 明确规定,Class 内部只有静态方法,没有静态属性。现在有一个提案提供了类的静态属性,写法是在实例属性的前面,加上static
关键字。
1 | class MyClass { |
这个新写法大大方便了静态属性的表达。
1 | // 老写法 |
上面代码中,老写法的静态属性定义在类的外部。整个类生成以后,再生成静态属性。这样让人很容易忽略这个静态属性,也不符合相关代码应该放在一起的代码组织原则。另外,新写法是显式声明(declarative),而不是赋值处理,语义更好。
私有方法和私有属性
现有的解决方案
私有方法和私有属性,是只能在类的内部访问的方法和属性,外部不能访问。这是常见需求,有利于代码的封装,但 ES6 不提供,只能通过变通方法模拟实现。
一种做法是在命名上加以区别。
1 | class Widget { |
上面代码中,_bar
方法前面的下划线,表示这是一个只限于内部使用的私有方法。但是,这种命名是不保险的,在类的外部,还是可以调用到这个方法。
另一种方法就是索性将私有方法移出模块,因为模块内部的所有方法都是对外可见的。
1 | class Widget { |
上面代码中,foo
是公开方法,内部调用了bar.call(this, baz)
。这使得bar
实际上成为了当前模块的私有方法。
还有一种方法是利用Symbol
值的唯一性,将私有方法的名字命名为一个Symbol
值。
1 | const bar = Symbol('bar'); |
上面代码中,bar
和snaf
都是Symbol
值,一般情况下无法获取到它们,因此达到了私有方法和私有属性的效果。但是也不是绝对不行,Reflect.ownKeys()
依然可以拿到它们。
1 | const inst = new myClass(); |
上面代码中,Symbol 值的属性名依然可以从类的外部拿到。
私有属性的提案
目前,有一个提案,为class
加了私有属性。方法是在属性名之前,使用#
表示。
1 | class IncreasingCounter { |
上面代码中,#count
就是私有属性,只能在类的内部使用(this.#count
)。如果在类的外部使用,就会报错。
1 | const counter = new IncreasingCounter(); |
上面代码在类的外部,读取私有属性,就会报错。
下面是另一个例子。
1 | class Point { |
上面代码中,#x
就是私有属性,在Point
类之外是读取不到这个属性的。由于井号#
是属性名的一部分,使用时必须带有#
一起使用,所以#x
和x
是两个不同的属性。
之所以要引入一个新的前缀#
表示私有属性,而没有采用private
关键字,是因为 JavaScript 是一门动态语言,没有类型声明,使用独立的符号似乎是唯一的比较方便可靠的方法,能够准确地区分一种属性是否为私有属性。另外,Ruby 语言使用@
表示私有属性,ES6 没有用这个符号而使用#
,是因为@
已经被留给了 Decorator。
这种写法不仅可以写私有属性,还可以用来写私有方法。
1 | class Foo { |
上面代码中,#sum()
就是一个私有方法。
另外,私有属性也可以设置 getter 和 setter 方法。
1 | class Counter { |
上面代码中,#x
是一个私有属性,它的读写都通过get #x()
和set #x()
来完成。
私有属性不限于从this
引用,只要是在类的内部,实例也可以引用私有属性。
1 | class Foo { |
上面代码允许从实例foo
上面引用私有属性。
私有属性和私有方法前面,也可以加上static
关键字,表示这是一个静态的私有属性或私有方法。
1 | class FakeMath { |
上面代码中,#totallyRandomNumber
是私有属性,#computeRandomNumber()
是私有方法,只能在FakeMath
这个类的内部调用,外部调用就会报错。
new.target 属性
new
是从构造函数生成实例对象的命令。ES6 为new
命令引入了一个new.target
属性,该属性一般用在构造函数之中,返回new
命令作用于的那个构造函数。如果构造函数不是通过new
命令或Reflect.construct()
调用的,new.target
会返回undefined
,因此这个属性可以用来确定构造函数是怎么调用的。
1 | function Person(name) { |
上面代码确保构造函数只能通过new
命令调用。
Class 内部调用new.target
,返回当前 Class。
1 | class Rectangle { |
需要注意的是,子类继承父类时,new.target
会返回子类。
1 | class Rectangle { |
上面代码中,new.target
会返回子类。
利用这个特点,可以写出不能独立使用、必须继承后才能使用的类。
1 | class Shape { |
上面代码中,Shape
类不能被实例化,只能用于继承。
注意,在函数外部,使用new.target
会报错。
Class extends
Class 可以通过extends
关键字实现继承,这比 ES5 的通过修改原型链实现继承,要清晰和方便很多。
1 | class Point { |
上面代码定义了一个ColorPoint
类,该类通过extends
关键字,继承了Point
类的所有属性和方法。但是由于没有部署任何代码,所以这两个类完全一样,等于复制了一个Point
类。下面,我们在ColorPoint
内部加上代码。
1 | class ColorPoint extends Point { |
上面代码中,constructor
方法和toString
方法之中,都出现了super
关键字,它在这里表示父类的构造函数,用来新建父类的this
对象。
子类必须在constructor
方法中调用super
方法,否则新建实例时会报错。这是因为子类自己的this
对象,必须先通过父类的构造函数完成塑造,得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super
方法,子类就得不到this
对象。
1 | class Point { /* ... */ } |
上面代码中,ColorPoint
继承了父类Point
,但是它的构造函数没有调用super
方法,导致新建实例时报错。
ES5 的继承,实质是先创造子类的实例对象this
,然后再将父类的方法添加到this
上面(Parent.apply(this)
)。ES6 的继承机制完全不同,实质是先将父类实例对象的属性和方法,加到this
上面(所以必须先调用super
方法),然后再用子类的构造函数修改this
。
如果子类没有定义constructor
方法,这个方法会被默认添加,代码如下。也就是说,不管有没有显式定义,任何一个子类都有constructor
方法。
1 | class ColorPoint extends Point { |
另一个需要注意的地方是,在子类的构造函数中,只有调用super
之后,才可以使用this
关键字,否则会报错。这是因为子类实例的构建,基于父类实例,只有super
方法才能调用父类实例。
1 | class Point { |
上面代码中,子类的constructor
方法没有调用super
之前,就使用this
关键字,结果报错,而放在super
方法之后就是正确的。
下面是生成子类实例的代码。
1 | let cp = new ColorPoint(25, 8, 'green'); |
上面代码中,实例对象cp
同时是ColorPoint
和Point
两个类的实例,这与 ES5 的行为完全一致。
最后,父类的静态方法,也会被子类继承。
1 | class A { |
上面代码中,hello()
是A
类的静态方法,B
继承A
,也继承了A
的静态方法。
Object.getPrototypeOf()
Object.getPrototypeOf
方法可以用来从子类上获取父类。
1 | Object.getPrototypeOf(ColorPoint) === Point |
因此,可以使用这个方法判断,一个类是否继承了另一个类。
super 关键字
super
这个关键字,既可以当作函数使用,也可以当作对象使用。在这两种情况下,它的用法完全不同。
第一种情况,super
作为函数调用时,代表父类的构造函数。ES6 要求,子类的构造函数必须执行一次super
函数。
1 | class A {} |
上面代码中,子类B
的构造函数之中的super()
,代表调用父类的构造函数。这是必须的,否则 JavaScript 引擎会报错。
注意,super
虽然代表了父类A
的构造函数,但是返回的是子类B
的实例,即super
内部的this
指的是B
的实例,因此super()
在这里相当于A.prototype.constructor.call(this)
。
1 | class A { |
上面代码中,new.target
指向当前正在执行的函数。可以看到,在super()
执行时,它指向的是子类B
的构造函数,而不是父类A
的构造函数。也就是说,super()
内部的this
指向的是B
。
作为函数时,super()
只能用在子类的构造函数之中,用在其他地方就会报错。
1 | class A {} |
上面代码中,super()
用在B
类的m
方法之中,就会造成语法错误。
第二种情况,super
作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。
1 | class A { |
上面代码中,子类B
当中的super.p()
,就是将super
当作一个对象使用。这时,super
在普通方法之中,指向A.prototype
,所以super.p()
就相当于A.prototype.p()
。
这里需要注意,由于super
指向父类的原型对象,所以定义在父类实例上的方法或属性,是无法通过super
调用的。
1 | class A { |
上面代码中,p
是父类A
实例的属性,super.p
就引用不到它。
如果属性定义在父类的原型对象上,super
就可以取到。
1 | class A {} |
上面代码中,属性x
是定义在A.prototype
上面的,所以super.x
可以取到它的值。
ES6 规定,在子类普通方法中通过super
调用父类的方法时,方法内部的this
指向当前的子类实例。
1 | class A { |
上面代码中,super.print()
虽然调用的是A.prototype.print()
,但是A.prototype.print()
内部的this
指向子类B
的实例,导致输出的是2
,而不是1
。也就是说,实际上执行的是super.print.call(this)
。
由于this
指向子类实例,所以如果通过super
对某个属性赋值,这时super
就是this
,赋值的属性会变成子类实例的属性。
1 | class A { |
上面代码中,super.x
赋值为3
,这时等同于对this.x
赋值为3
。而当读取super.x
的时候,读的是A.prototype.x
,所以返回undefined
。
如果super
作为对象,用在静态方法之中,这时super
将指向父类,而不是父类的原型对象。
1 | class Parent { |
上面代码中,super
在静态方法之中指向父类,在普通方法之中指向父类的原型对象。
另外,在子类的静态方法中通过super
调用父类的方法时,方法内部的this
指向当前的子类,而不是子类的实例。
1 | class A { |
上面代码中,静态方法B.m
里面,super.print
指向父类的静态方法。这个方法里面的this
指向的是B
,而不是B
的实例。
注意,使用super
的时候,必须显式指定是作为函数、还是作为对象使用,否则会报错。
1 | class A {} |
上面代码中,console.log(super)
当中的super
,无法看出是作为函数使用,还是作为对象使用,所以 JavaScript 引擎解析代码的时候就会报错。这时,如果能清晰地表明super
的数据类型,就不会报错。
1 | class A {} |
上面代码中,super.valueOf()
表明super
是一个对象,因此就不会报错。同时,由于super
使得this
指向B
的实例,所以super.valueOf()
返回的是一个B
的实例。
最后,由于对象总是继承其他对象的,所以可以在任意一个对象中,使用super
关键字。
1 | var obj = { |
类的 prototype 属性和__proto__属性
大多数浏览器的 ES5 实现之中,每一个对象都有__proto__
属性,指向对应的构造函数的prototype
属性。Class 作为构造函数的语法糖,同时有prototype
属性和__proto__
属性,因此同时存在两条继承链。
(1)子类的__proto__
属性,表示构造函数的继承,总是指向父类。
(2)子类prototype
属性的__proto__
属性,表示方法的继承,总是指向父类的prototype
属性。
1 | class A { |
上面代码中,子类B
的__proto__
属性指向父类A
,子类B
的prototype
属性的__proto__
属性指向父类A
的prototype
属性。
这样的结果是因为,类的继承是按照下面的模式实现的。
1 | class A { |
Object.setPrototypeOf
方法的实现。
1 | Object.setPrototypeOf = function (obj, proto) { |
因此,就得到了上面的结果。
1 | Object.setPrototypeOf(B.prototype, A.prototype); |
这两条继承链,可以这样理解:作为一个对象,子类(B
)的原型(__proto__
属性)是父类(A
);作为一个构造函数,子类(B
)的原型对象(prototype
属性)是父类的原型对象(prototype
属性)的实例。
1 | B.prototype = Object.create(A.prototype); |
extends
关键字后面可以跟多种类型的值。
1 | class B extends A { |
上面代码的A
,只要是一个有prototype
属性的函数,就能被B
继承。由于函数都有prototype
属性(除了Function.prototype
函数),因此A
可以是任意函数。
下面,讨论两种情况。第一种,子类继承Object
类。
1 | class A extends Object { |
这种情况下,A
其实就是构造函数Object
的复制,A
的实例就是Object
的实例。
第二种情况,不存在任何继承。
1 | class A { |
这种情况下,A
作为一个基类(即不存在任何继承),就是一个普通函数,所以直接继承Function.prototype
。但是,A
调用后返回一个空对象(即Object
实例),所以A.prototype.__proto__
指向构造函数(Object
)的prototype
属性。
实例的 proto 属性
子类实例的__proto__
属性的__proto__
属性,指向父类实例的__proto__
属性。也就是说,子类的原型的原型,是父类的原型。
1 | var p1 = new Point(2, 3); |
上面代码中,ColorPoint
继承了Point
,导致前者原型的原型是后者的原型。
因此,通过子类实例的__proto__.__proto__
属性,可以修改父类实例的行为。
1 | p2.__proto__.__proto__.printName = function () { |
上面代码在ColorPoint
的实例p2
上向Point
类添加方法,结果影响到了Point
的实例p1
。
原生构造函数的继承
原生构造函数是指语言内置的构造函数,通常用来生成数据结构。ECMAScript 的原生构造函数大致有下面这些。
- Boolean()
- Number()
- String()
- Array()
- Date()
- Function()
- RegExp()
- Error()
- Object()
以前,这些原生构造函数是无法继承的,比如,不能自己定义一个Array
的子类。
1 | function MyArray() { |
上面代码定义了一个继承 Array 的MyArray
类。但是,这个类的行为与Array
完全不一致。
1 | var colors = new MyArray(); |
之所以会发生这种情况,是因为子类无法获得原生构造函数的内部属性,通过Array.apply()
或者分配给原型对象都不行。原生构造函数会忽略apply
方法传入的this
,也就是说,原生构造函数的this
无法绑定,导致拿不到内部属性。
ES5 是先新建子类的实例对象this
,再将父类的属性添加到子类上,由于父类的内部属性无法获取,导致无法继承原生的构造函数。比如,Array
构造函数有一个内部属性[[DefineOwnProperty]]
,用来定义新属性时,更新length
属性,这个内部属性无法在子类获取,导致子类的length
属性行为不正常。
下面的例子中,我们想让一个普通对象继承Error
对象。
1 | var e = {}; |
上面代码中,我们想通过Error.call(e)
这种写法,让普通对象e
具有Error
对象的实例属性。但是,Error.call()
完全忽略传入的第一个参数,而是返回一个新对象,e
本身没有任何变化。这证明了Error.call(e)
这种写法,无法继承原生构造函数。
ES6 允许继承原生构造函数定义子类,因为 ES6 是先新建父类的实例对象this
,然后再用子类的构造函数修饰this
,使得父类的所有行为都可以继承。下面是一个继承Array
的例子。
1 | class MyArray extends Array { |
上面代码定义了一个MyArray
类,继承了Array
构造函数,因此就可以从MyArray
生成数组的实例。这意味着,ES6 可以自定义原生数据结构(比如Array
、String
等)的子类,这是 ES5 无法做到的。
上面这个例子也说明,extends
关键字不仅可以用来继承类,还可以用来继承原生的构造函数。因此可以在原生数据结构的基础上,定义自己的数据结构。下面就是定义了一个带版本功能的数组。
1 | class VersionedArray extends Array { |
上面代码中,VersionedArray
会通过commit
方法,将自己的当前状态生成一个版本快照,存入history
属性。revert
方法用来将数组重置为最新一次保存的版本。除此之外,VersionedArray
依然是一个普通数组,所有原生的数组方法都可以在它上面调用。
下面是一个自定义Error
子类的例子,可以用来定制报错时的行为。
1 | class ExtendableError extends Error { |
注意,继承Object
的子类,有一个行为差异。
1 | class NewObj extends Object{ |
上面代码中,NewObj
继承了Object
,但是无法通过super
方法向父类Object
传参。这是因为 ES6 改变了Object
构造函数的行为,一旦发现Object
方法不是通过new Object()
这种形式调用,ES6 规定Object
构造函数会忽略参数。
Mixin 模式的实现
Mixin 指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口。它的最简单实现如下。
1 | const a = { |
上面代码中,c
对象是a
对象和b
对象的合成,具有两者的接口。
下面是一个更完备的实现,将多个类的接口“混入”(mix in)另一个类。
1 | function mix(...mixins) { |
上面代码的mix
函数,可以将多个对象合成为一个类。使用的时候,只要继承这个类即可。
1 | class DistributedEdit extends mix(Loggable, Serializable) { |
Proxy
概述
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。
Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。
1 | var obj = new Proxy({}, { |
上面代码对一个空对象架设了一层拦截,重定义了属性的读取(get
)和设置(set
)行为。这里暂时先不解释具体的语法,只看运行结果。对设置了拦截行为的对象obj
,去读写它的属性,就会得到下面的结果。
1 | obj.count = 1 |
上面代码说明,Proxy 实际上重载(overload)了点运算符,即用自己的定义覆盖了语言的原始定义。
ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。
1 | var proxy = new Proxy(target, handler); |
Proxy 对象的所有用法,都是上面这种形式,不同的只是handler
参数的写法。其中,new Proxy()
表示生成一个Proxy
实例,target
参数表示所要拦截的目标对象,handler
参数也是一个对象,用来定制拦截行为。
下面是另一个拦截读取属性行为的例子。
1 | var proxy = new Proxy({}, { |
上面代码中,作为构造函数,Proxy
接受两个参数。第一个参数是所要代理的目标对象(上例是一个空对象),即如果没有Proxy
的介入,操作原来要访问的就是这个对象;第二个参数是一个配置对象,对于每一个被代理的操作,需要提供一个对应的处理函数,该函数将拦截对应的操作。比如,上面代码中,配置对象有一个get
方法,用来拦截对目标对象属性的访问请求。get
方法的两个参数分别是目标对象和所要访问的属性。可以看到,由于拦截函数总是返回35
,所以访问任何属性都得到35
。
注意,要使得Proxy
起作用,必须针对Proxy
实例(上例是proxy
对象)进行操作,而不是针对目标对象(上例是空对象)进行操作。
如果handler
没有设置任何拦截,那就等同于直接通向原对象。
1 | var target = {}; |
上面代码中,handler
是一个空对象,没有任何拦截效果,访问proxy
就等同于访问target
。
一个技巧是将 Proxy 对象,设置到object.proxy
属性,从而可以在object
对象上调用。
1 | var object = { proxy: new Proxy(target, handler) }; |
Proxy 实例也可以作为其他对象的原型对象。
1 | var proxy = new Proxy({}, { |
上面代码中,proxy
对象是obj
对象的原型,obj
对象本身并没有time
属性,所以根据原型链,会在proxy
对象上读取该属性,导致被拦截。
同一个拦截器函数,可以设置拦截多个操作。
1 | var handler = { |
对于可以设置、但没有设置拦截的操作,则直接落在目标对象上,按照原先的方式产生结果。
下面是 Proxy 支持的拦截操作一览,一共 13 种。
- **get(target, propKey, receiver)**:拦截对象属性的读取,比如
proxy.foo
和proxy['foo']
。 - **set(target, propKey, value, receiver)**:拦截对象属性的设置,比如
proxy.foo = v
或proxy['foo'] = v
,返回一个布尔值。 - **has(target, propKey)**:拦截
propKey in proxy
的操作,返回一个布尔值。 - **deleteProperty(target, propKey)**:拦截
delete proxy[propKey]
的操作,返回一个布尔值。 - **ownKeys(target)**:拦截
Object.getOwnPropertyNames(proxy)
、Object.getOwnPropertySymbols(proxy)
、Object.keys(proxy)
、for...in
循环,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而Object.keys()
的返回结果仅包括目标对象自身的可遍历属性。 - **getOwnPropertyDescriptor(target, propKey)**:拦截
Object.getOwnPropertyDescriptor(proxy, propKey)
,返回属性的描述对象。 - **defineProperty(target, propKey, propDesc)**:拦截
Object.defineProperty(proxy, propKey, propDesc)
、Object.defineProperties(proxy, propDescs)
,返回一个布尔值。 - **preventExtensions(target)**:拦截
Object.preventExtensions(proxy)
,返回一个布尔值。 - **getPrototypeOf(target)**:拦截
Object.getPrototypeOf(proxy)
,返回一个对象。 - **isExtensible(target)**:拦截
Object.isExtensible(proxy)
,返回一个布尔值。 - **setPrototypeOf(target, proto)**:拦截
Object.setPrototypeOf(proxy, proto)
,返回一个布尔值。如果目标对象是函数,那么还有两种额外操作可以拦截。 - **apply(target, object, args)**:拦截 Proxy 实例作为函数调用的操作,比如
proxy(...args)
、proxy.call(object, ...args)
、proxy.apply(...)
。 - **construct(target, args)**:拦截 Proxy 实例作为构造函数调用的操作,比如
new proxy(...args)
。
Proxy 实例的方法
下面是上面这些拦截方法的详细介绍。
get()
get
方法用于拦截某个属性的读取操作,可以接受三个参数,依次为目标对象、属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选。
get
方法的用法,上文已经有一个例子,下面是另一个拦截读取操作的例子。
1 | var person = { |
上面代码表示,如果访问目标对象不存在的属性,会抛出一个错误。如果没有这个拦截函数,访问不存在的属性,只会返回undefined
。
get
方法可以继承。
1 | let proto = new Proxy({}, { |
上面代码中,拦截操作定义在Prototype
对象上面,所以如果读取obj
对象继承的属性时,拦截会生效。
下面的例子使用get
拦截,实现数组读取负数的索引。
1 | function createArray(...elements) { |
上面代码中,数组的位置参数是-1
,就会输出数组的倒数第一个成员。
利用 Proxy,可以将读取属性的操作(get
),转变为执行某个函数,从而实现属性的链式操作。
1 | var pipe = function (value) { |
上面代码设置 Proxy 以后,达到了将函数名链式使用的效果。
下面的例子则是利用get
拦截,实现一个生成各种 DOM 节点的通用函数dom
。
1 | const dom = new Proxy({}, { |
下面是一个get
方法的第三个参数的例子,它总是指向原始的读操作所在的那个对象,一般情况下就是 Proxy 实例。
1 | const proxy = new Proxy({}, { |
上面代码中,proxy
对象的getReceiver
属性是由proxy
对象提供的,所以receiver
指向proxy
对象。
1 | const proxy = new Proxy({}, { |
上面代码中,d
对象本身没有a
属性,所以读取d.a
的时候,会去d
的原型proxy
对象找。这时,receiver
就指向d
,代表原始的读操作所在的那个对象。
如果一个属性不可配置(configurable)且不可写(writable),则 Proxy 不能修改该属性,否则通过 Proxy 对象访问该属性会报错。
1 | const target = Object.defineProperties({}, { |
set()
set
方法用来拦截某个属性的赋值操作,可以接受四个参数,依次为目标对象、属性名、属性值和 Proxy 实例本身,其中最后一个参数可选。
假定Person
对象有一个age
属性,该属性应该是一个不大于 200 的整数,那么可以使用Proxy
保证age
的属性值符合要求。
1 | let validator = { |
上面代码中,由于设置了存值函数set
,任何不符合要求的age
属性赋值,都会抛出一个错误,这是数据验证的一种实现方法。利用set
方法,还可以数据绑定,即每当对象发生变化时,会自动更新 DOM。
有时,我们会在对象上面设置内部属性,属性名的第一个字符使用下划线开头,表示这些属性不应该被外部使用。结合get
和set
方法,就可以做到防止这些内部属性被外部读写。
1 | const handler = { |
上面代码中,只要读写的属性名的第一个字符是下划线,一律抛错,从而达到禁止读写内部属性的目的。
下面是set
方法第四个参数的例子。
1 | const handler = { |
上面代码中,set
方法的第四个参数receiver
,指的是原始的操作行为所在的那个对象,一般情况下是proxy
实例本身,请看下面的例子。
1 | const handler = { |
上面代码中,设置myObj.foo
属性的值时,myObj
并没有foo
属性,因此引擎会到myObj
的原型链去找foo
属性。myObj
的原型对象proxy
是一个 Proxy 实例,设置它的foo
属性会触发set
方法。这时,第四个参数receiver
就指向原始赋值行为所在的对象myObj
。
注意,如果目标对象自身的某个属性,不可写且不可配置,那么set
方法将不起作用。
1 | const obj = {}; |
上面代码中,obj.foo
属性不可写,Proxy 对这个属性的set
代理将不会生效。
注意,严格模式下,set
代理如果没有返回true
,就会报错。
1 | ; |
上面代码中,严格模式下,set
代理返回false
或者undefined
,都会报错。
apply()
apply
方法拦截函数的调用、call
和apply
操作。
apply
方法可以接受三个参数,分别是目标对象、目标对象的上下文对象(this
)和目标对象的参数数组。
1 | var handler = { |
下面是一个例子。
1 | var target = function () { return 'I am the target'; }; |
上面代码中,变量p
是 Proxy 的实例,当它作为函数调用时(p()
),就会被apply
方法拦截,返回一个字符串。
下面是另外一个例子。
1 | var twice = { |
上面代码中,每当执行proxy
函数(直接调用或call
和apply
调用),就会被apply
方法拦截。
另外,直接调用Reflect.apply
方法,也会被拦截。
1 | Reflect.apply(proxy, null, [9, 10]) // 38 |
has()
has
方法用来拦截HasProperty
操作,即判断对象是否具有某个属性时,这个方法会生效。典型的操作就是in
运算符。
has
方法可以接受两个参数,分别是目标对象、需查询的属性名。
下面的例子使用has
方法隐藏某些属性,不被in
运算符发现。
1 | var handler = { |
上面代码中,如果原对象的属性名的第一个字符是下划线,proxy.has
就会返回false
,从而不会被in
运算符发现。
如果原对象不可配置或者禁止扩展,这时has
拦截会报错。
1 | var obj = { a: 10 }; |
上面代码中,obj
对象禁止扩展,结果使用has
拦截就会报错。也就是说,如果某个属性不可配置(或者目标对象不可扩展),则has
方法就不得“隐藏”(即返回false
)目标对象的该属性。
值得注意的是,has
方法拦截的是HasProperty
操作,而不是HasOwnProperty
操作,即has
方法不判断一个属性是对象自身的属性,还是继承的属性。
另外,虽然for...in
循环也用到了in
运算符,但是has
拦截对for...in
循环不生效。
1 | let stu1 = {name: '张三', score: 59}; |
上面代码中,has
拦截只对in
运算符生效,对for...in
循环不生效,导致不符合要求的属性没有被for...in
循环所排除。
construct()
construct
方法用于拦截new
命令,下面是拦截对象的写法。
1 | var handler = { |
construct
方法可以接受三个参数。
target
:目标对象args
:构造函数的参数对象newTarget
:创造实例对象时,new
命令作用的构造函数(下面例子的p
)
1 | var p = new Proxy(function () {}, { |
construct
方法返回的必须是一个对象,否则会报错。
1 | var p = new Proxy(function() {}, { |
deleteProperty()
deleteProperty
方法用于拦截delete
操作,如果这个方法抛出错误或者返回false
,当前属性就无法被delete
命令删除。
1 | var handler = { |
上面代码中,deleteProperty
方法拦截了delete
操作符,删除第一个字符为下划线的属性会报错。
注意,目标对象自身的不可配置(configurable)的属性,不能被deleteProperty
方法删除,否则报错。
defineProperty()
defineProperty()
方法拦截了Object.defineProperty()
操作。
1 | var handler = { |
上面代码中,defineProperty()
方法内部没有任何操作,只返回false
,导致添加新属性总是无效。注意,这里的false
只是用来提示操作失败,本身并不能阻止添加新属性。
注意,如果目标对象不可扩展(non-extensible),则defineProperty()
不能增加目标对象上不存在的属性,否则会报错。另外,如果目标对象的某个属性不可写(writable)或不可配置(configurable),则defineProperty()
方法不得改变这两个设置。
getOwnPropertyDescriptor()
getOwnPropertyDescriptor()
方法拦截Object.getOwnPropertyDescriptor()
,返回一个属性描述对象或者undefined
。
1 | var handler = { |
上面代码中,handler.getOwnPropertyDescriptor()
方法对于第一个字符为下划线的属性名会返回undefined
。
getPrototypeOf()
getPrototypeOf()
方法主要用来拦截获取对象原型。具体来说,拦截下面这些操作。
Object.prototype.__proto__
Object.prototype.isPrototypeOf()
Object.getPrototypeOf()
Reflect.getPrototypeOf()
instanceof
下面是一个例子。
1 | var proto = {}; |
上面代码中,getPrototypeOf()
方法拦截Object.getPrototypeOf()
,返回proto
对象。
注意,getPrototypeOf()
方法的返回值必须是对象或者null
,否则报错。另外,如果目标对象不可扩展(non-extensible), getPrototypeOf()
方法必须返回目标对象的原型对象。
isExtensible()
isExtensible()
方法拦截Object.isExtensible()
操作。
1 | var p = new Proxy({}, { |
上面代码设置了isExtensible()
方法,在调用Object.isExtensible
时会输出called
。
注意,该方法只能返回布尔值,否则返回值会被自动转为布尔值。
这个方法有一个强限制,它的返回值必须与目标对象的isExtensible
属性保持一致,否则就会抛出错误。
1 | Object.isExtensible(proxy) === Object.isExtensible(target) |
下面是一个例子。
1 | var p = new Proxy({}, { |
ownKeys()
ownKeys()
方法用来拦截对象自身属性的读取操作。具体来说,拦截以下操作。
Object.getOwnPropertyNames()
Object.getOwnPropertySymbols()
Object.keys()
for...in
循环
下面是拦截Object.keys()
的例子。
1 | let target = { |
上面代码拦截了对于target
对象的Object.keys()
操作,只返回a
、b
、c
三个属性之中的a
属性。
下面的例子是拦截第一个字符为下划线的属性名。
1 | let target = { |
注意,使用Object.keys()
方法时,有三类属性会被ownKeys()
方法自动过滤,不会返回。
- 目标对象上不存在的属性
- 属性名为 Symbol 值
- 不可遍历(
enumerable
)的属性
1 | let target = { |
上面代码中,ownKeys()
方法之中,显式返回不存在的属性(d
)、Symbol 值(Symbol.for('secret')
)、不可遍历的属性(key
),结果都被自动过滤掉。
ownKeys()
方法还可以拦截Object.getOwnPropertyNames()
。
1 | var p = new Proxy({}, { |
for...in
循环也受到ownKeys()
方法的拦截。
1 | const obj = { hello: 'world' }; |
上面代码中,ownkeys()
指定只返回a
和b
属性,由于obj
没有这两个属性,因此for...in
循环不会有任何输出。
ownKeys()
方法返回的数组成员,只能是字符串或 Symbol 值。如果有其他类型的值,或者返回的根本不是数组,就会报错。
1 | var obj = {}; |
上面代码中,ownKeys()
方法虽然返回一个数组,但是每一个数组成员都不是字符串或 Symbol 值,因此就报错了。
如果目标对象自身包含不可配置的属性,则该属性必须被ownKeys()
方法返回,否则报错。
1 | var obj = {}; |
上面代码中,obj
对象的a
属性是不可配置的,这时ownKeys()
方法返回的数组之中,必须包含a
,否则会报错。
另外,如果目标对象是不可扩展的(non-extensible),这时ownKeys()
方法返回的数组之中,必须包含原对象的所有属性,且不能包含多余的属性,否则报错。
1 | var obj = { |
上面代码中,obj
对象是不可扩展的,这时ownKeys()
方法返回的数组之中,包含了obj
对象的多余属性b
,所以导致了报错。
preventExtensions()
preventExtensions()
方法拦截Object.preventExtensions()
。该方法必须返回一个布尔值,否则会被自动转为布尔值。
这个方法有一个限制,只有目标对象不可扩展时(即Object.isExtensible(proxy)
为false
),proxy.preventExtensions
才能返回true
,否则会报错。
1 | var proxy = new Proxy({}, { |
上面代码中,proxy.preventExtensions()
方法返回true
,但这时Object.isExtensible(proxy)
会返回true
,因此报错。
为了防止出现这个问题,通常要在proxy.preventExtensions()
方法里面,调用一次Object.preventExtensions()
。
1 | var proxy = new Proxy({}, { |
setPrototypeOf()
setPrototypeOf()
方法主要用来拦截Object.setPrototypeOf()
方法。
下面是一个例子。
1 | var handler = { |
上面代码中,只要修改target
的原型对象,就会报错。
注意,该方法只能返回布尔值,否则会被自动转为布尔值。另外,如果目标对象不可扩展(non-extensible),setPrototypeOf()
方法不得改变目标对象的原型。
Proxy.revocable()
Proxy.revocable()
方法返回一个可取消的 Proxy 实例。
1 | let target = {}; |
Proxy.revocable()
方法返回一个对象,该对象的proxy
属性是Proxy
实例,revoke
属性是一个函数,可以取消Proxy
实例。上面代码中,当执行revoke
函数之后,再访问Proxy
实例,就会抛出一个错误。
Proxy.revocable()
的一个使用场景是,目标对象不允许直接访问,必须通过代理访问,一旦访问结束,就收回代理权,不允许再次访问。
this 问题
虽然 Proxy 可以代理针对目标对象的访问,但它不是目标对象的透明代理,即不做任何拦截的情况下,也无法保证与目标对象的行为一致。主要原因就是在 Proxy 代理的情况下,目标对象内部的this
关键字会指向 Proxy 代理。
1 | const target = { |
上面代码中,一旦proxy
代理target.m
,后者内部的this
就是指向proxy
,而不是target
。
下面是一个例子,由于this
指向的变化,导致 Proxy 无法代理目标对象。
1 | const _name = new WeakMap(); |
上面代码中,目标对象jane
的name
属性,实际保存在外部WeakMap
对象_name
上面,通过this
键区分。由于通过proxy.name
访问时,this
指向proxy
,导致无法取到值,所以返回undefined
。
此外,有些原生对象的内部属性,只有通过正确的this
才能拿到,所以 Proxy 也无法代理这些原生对象的属性。
1 | const target = new Date(); |
上面代码中,getDate()
方法只能在Date
对象实例上面拿到,如果this
不是Date
对象实例就会报错。这时,this
绑定原始对象,就可以解决这个问题。
1 | const target = new Date('2015-01-01'); |
Symbol
概述
ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol
的原因。
ES6 引入了一种新的原始数据类型Symbol
,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefined
、null
、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。
Symbol 值通过Symbol
函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。
1 | let s = Symbol(); |
上面代码中,变量s
就是一个独一无二的值。typeof
运算符的结果,表明变量s
是 Symbol 数据类型,而不是字符串之类的其他类型。
注意,Symbol
函数前不能使用new
命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。
Symbol
函数可以接受一个字符串作为参数,表示对 Symbol 实例的描述,主要是为了在控制台显示,或者转为字符串时,比较容易区分。
1 | let s1 = Symbol('foo'); |
上面代码中,s1
和s2
是两个 Symbol 值。如果不加参数,它们在控制台的输出都是Symbol()
,不利于区分。有了参数以后,就等于为它们加上了描述,输出的时候就能够分清,到底是哪一个值。
如果 Symbol 的参数是一个对象,就会调用该对象的toString
方法,将其转为字符串,然后才生成一个 Symbol 值。
1 | const obj = { |
注意,Symbol
函数的参数只是表示对当前 Symbol 值的描述,因此相同参数的Symbol
函数的返回值是不相等的。
1 | // 没有参数的情况 |
上面代码中,s1
和s2
都是Symbol
函数的返回值,而且参数相同,但是它们是不相等的。
Symbol 值不能与其他类型的值进行运算,会报错。
1 | let sym = Symbol('My symbol'); |
但是,Symbol 值可以显式转为字符串。
1 | let sym = Symbol('My symbol'); |
另外,Symbol 值也可以转为布尔值,但是不能转为数值。
1 | let sym = Symbol(); |
Symbol.prototype.description
创建 Symbol 的时候,可以添加一个描述。
1 | const sym = Symbol('foo'); |
上面代码中,sym
的描述就是字符串foo
。
但是,读取这个描述需要将 Symbol 显式转为字符串,即下面的写法。
1 | const sym = Symbol('foo'); |
上面的用法不是很方便。ES2019 提供了一个实例属性description
,直接返回 Symbol 的描述。
1 | const sym = Symbol('foo'); |
作为属性名的 Symbol
由于每一个 Symbol 值都是不相等的,这意味着 Symbol 值可以作为标识符,用于对象的属性名,就能保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用,能防止某一个键被不小心改写或覆盖。
1 | let mySymbol = Symbol(); |
上面代码通过方括号结构和Object.defineProperty
,将对象的属性名指定为一个 Symbol 值。
注意,Symbol 值作为对象属性名时,不能用点运算符。
1 | const mySymbol = Symbol(); |
上面代码中,因为点运算符后面总是字符串,所以不会读取mySymbol
作为标识名所指代的那个值,导致a
的属性名实际上是一个字符串,而不是一个 Symbol 值。
同理,在对象的内部,使用 Symbol 值定义属性时,Symbol 值必须放在方括号之中。
1 | let s = Symbol(); |
上面代码中,如果s
不放在方括号中,该属性的键名就是字符串s
,而不是s
所代表的那个 Symbol 值。
采用增强的对象写法,上面代码的obj
对象可以写得更简洁一些。
1 | let obj = { |
Symbol 类型还可以用于定义一组常量,保证这组常量的值都是不相等的。
1 | const log = {}; |
下面是另外一个例子。
1 | const COLOR_RED = Symbol(); |
常量使用 Symbol 值最大的好处,就是其他任何值都不可能有相同的值了,因此可以保证上面的switch
语句会按设计的方式工作。
还有一点需要注意,Symbol 值作为属性名时,该属性还是公开属性,不是私有属性。
实例:消除魔术字符串
魔术字符串指的是,在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。风格良好的代码,应该尽量消除魔术字符串,改由含义清晰的变量代替。
1 | function getArea(shape, options) { |
上面代码中,字符串Triangle
就是一个魔术字符串。它多次出现,与代码形成“强耦合”,不利于将来的修改和维护。
常用的消除魔术字符串的方法,就是把它写成一个变量。
1 | const shapeType = { |
上面代码中,我们把Triangle
写成shapeType
对象的triangle
属性,这样就消除了强耦合。
如果仔细分析,可以发现shapeType.triangle
等于哪个值并不重要,只要确保不会跟其他shapeType
属性的值冲突即可。因此,这里就很适合改用 Symbol 值。
1 | const shapeType = { |
上面代码中,除了将shapeType.triangle
的值设为一个 Symbol,其他地方都不用修改。
属性名的遍历
Symbol 作为属性名,遍历对象的时候,该属性不会出现在for...in
、for...of
循环中,也不会被Object.keys()
、Object.getOwnPropertyNames()
、JSON.stringify()
返回。
但是,它也不是私有属性,有一个Object.getOwnPropertySymbols()
方法,可以获取指定对象的所有 Symbol 属性名。该方法返回一个数组,成员是当前对象的所有用作属性名的 Symbol 值。
1 | const obj = {}; |
上面代码是Object.getOwnPropertySymbols()
方法的示例,可以获取所有 Symbol 属性名。
下面是另一个例子,Object.getOwnPropertySymbols()
方法与for...in
循环、Object.getOwnPropertyNames
方法进行对比的例子。
1 | const obj = {}; |
上面代码中,使用for...in
循环和Object.getOwnPropertyNames()
方法都得不到 Symbol 键名,需要使用Object.getOwnPropertySymbols()
方法。
另一个新的 API,Reflect.ownKeys()
方法可以返回所有类型的键名,包括常规键名和 Symbol 键名。
1 | let obj = { |
由于以 Symbol 值作为键名,不会被常规方法遍历得到。我们可以利用这个特性,为对象定义一些非私有的、但又希望只用于内部的方法。
1 | let size = Symbol('size'); |
上面代码中,对象x
的size
属性是一个 Symbol 值,所以Object.keys(x)
、Object.getOwnPropertyNames(x)
都无法获取它。这就造成了一种非私有的内部方法的效果。
Symbol.for(),Symbol.keyFor()
有时,我们希望重新使用同一个 Symbol 值,Symbol.for()
方法可以做到这一点。它接受一个字符串作为参数,然后搜索有没有以该参数作为名称的 Symbol 值。如果有,就返回这个 Symbol 值,否则就新建一个以该字符串为名称的 Symbol 值,并将其注册到全局。
1 | let s1 = Symbol.for('foo'); |
上面代码中,s1
和s2
都是 Symbol 值,但是它们都是由同样参数的Symbol.for
方法生成的,所以实际上是同一个值。
Symbol.for()
与Symbol()
这两种写法,都会生成新的 Symbol。它们的区别是,前者会被登记在全局环境中供搜索,后者不会。Symbol.for()
不会每次调用就返回一个新的 Symbol 类型的值,而是会先检查给定的key
是否已经存在,如果不存在才会新建一个值。比如,如果你调用Symbol.for("cat")
30 次,每次都会返回同一个 Symbol 值,但是调用Symbol("cat")
30 次,会返回 30 个不同的 Symbol 值。
1 | Symbol.for("bar") === Symbol.for("bar") |
上面代码中,由于Symbol()
写法没有登记机制,所以每次调用都会返回一个不同的值。
Symbol.keyFor()
方法返回一个已登记的 Symbol 类型值的key
。
1 | let s1 = Symbol.for("foo"); |
上面代码中,变量s2
属于未登记的 Symbol 值,所以返回undefined
。
注意,Symbol.for()
为 Symbol 值登记的名字,是全局环境的,不管有没有在全局环境运行。
1 | function foo() { |
上面代码中,Symbol.for('bar')
是函数内部运行的,但是生成的 Symbol 值是登记在全局环境的。所以,第二次运行Symbol.for('bar')
可以取到这个 Symbol 值。
Symbol.for()
的这个全局登记特性,可以用在不同的 iframe 或 service worker 中取到同一个值。
1 | iframe = document.createElement('iframe'); |
上面代码中,iframe 窗口生成的 Symbol 值,可以在主页面得到。
内置的 Symbol 值
除了定义自己使用的 Symbol 值以外,ES6 还提供了 11 个内置的 Symbol 值,指向语言内部使用的方法。
Symbol.hasInstance
对象的Symbol.hasInstance
属性,指向一个内部方法。当其他对象使用instanceof
运算符,判断是否为该对象的实例时,会调用这个方法。比如,foo instanceof Foo
在语言内部,实际调用的是Foo[Symbol.hasInstance](foo)
。
1 | class MyClass { |
上面代码中,MyClass
是一个类,new MyClass()
会返回一个实例。该实例的Symbol.hasInstance
方法,会在进行instanceof
运算时自动调用,判断左侧的运算子是否为Array
的实例。
下面是另一个例子。
1 | class Even { |
Symbol.isConcatSpreadable
对象的Symbol.isConcatSpreadable
属性等于一个布尔值,表示该对象用于Array.prototype.concat()
时,是否可以展开。
1 | let arr1 = ['c', 'd']; |
上面代码说明,数组的默认行为是可以展开,Symbol.isConcatSpreadable
默认等于undefined
。该属性等于true
时,也有展开的效果。
类似数组的对象正好相反,默认不展开。它的Symbol.isConcatSpreadable
属性设为true
,才可以展开。
1 | let obj = {length: 2, 0: 'c', 1: 'd'}; |
Symbol.isConcatSpreadable
属性也可以定义在类里面。
1 | class A1 extends Array { |
上面代码中,类A1
是可展开的,类A2
是不可展开的,所以使用concat
时有不一样的结果。
注意,Symbol.isConcatSpreadable
的位置差异,A1
是定义在实例上,A2
是定义在类本身,效果相同。
Symbol.species
对象的Symbol.species
属性,指向一个构造函数。创建衍生对象时,会使用该属性。
1 | class MyArray extends Array { |
上面代码中,子类MyArray
继承了父类Array
,a
是MyArray
的实例,b
和c
是a
的衍生对象。你可能会认为,b
和c
都是调用数组方法生成的,所以应该是数组(Array
的实例),但实际上它们也是MyArray
的实例。
Symbol.species
属性就是为了解决这个问题而提供的。现在,我们可以为MyArray
设置Symbol.species
属性。
1 | class MyArray extends Array { |
上面代码中,由于定义了Symbol.species
属性,创建衍生对象时就会使用这个属性返回的函数,作为构造函数。这个例子也说明,定义Symbol.species
属性要采用get
取值器。默认的Symbol.species
属性等同于下面的写法。
1 | static get [Symbol.species]() { |
现在,再来看前面的例子。
1 | class MyArray extends Array { |
上面代码中,a.map(x => x)
生成的衍生对象,就不是MyArray
的实例,而直接就是Array
的实例。
再看一个例子。
1 | class T1 extends Promise { |
上面代码中,T2
定义了Symbol.species
属性,T1
没有。结果就导致了创建衍生对象时(then
方法),T1
调用的是自身的构造方法,而T2
调用的是Promise
的构造方法。
总之,Symbol.species
的作用在于,实例对象在运行过程中,需要再次调用自身的构造函数时,会调用该属性指定的构造函数。它主要的用途是,有些类库是在基类的基础上修改的,那么子类使用继承的方法时,作者可能希望返回基类的实例,而不是子类的实例。
Symbol.match
对象的Symbol.match
属性,指向一个函数。当执行str.match(myObject)
时,如果该属性存在,会调用它,返回该方法的返回值。
1 | String.prototype.match(regexp) |
Symbol.replace
对象的Symbol.replace
属性,指向一个方法,当该对象被String.prototype.replace
方法调用时,会返回该方法的返回值。
1 | String.prototype.replace(searchValue, replaceValue) |
下面是一个例子。
1 | const x = {}; |
Symbol.replace
方法会收到两个参数,第一个参数是replace
方法正在作用的对象,上面例子是Hello
,第二个参数是替换后的值,上面例子是World
。
Symbol.search
对象的Symbol.search
属性,指向一个方法,当该对象被String.prototype.search
方法调用时,会返回该方法的返回值。
1 | String.prototype.search(regexp) |
Symbol.split
对象的Symbol.split
属性,指向一个方法,当该对象被String.prototype.split
方法调用时,会返回该方法的返回值。
1 | String.prototype.split(separator, limit) |
下面是一个例子。
1 | class MySplitter { |
上面方法使用Symbol.split
方法,重新定义了字符串对象的split
方法的行为,
Symbol.iterator
对象的Symbol.iterator
属性,指向该对象的默认遍历器方法。
1 | const myIterable = {}; |
对象进行for...of
循环时,会调用Symbol.iterator
方法,返回该对象的默认遍历器,详细介绍参见《Iterator 和 for…of 循环》一章。
1 | class Collection { |
Symbol.toPrimitive
对象的Symbol.toPrimitive
属性,指向一个方法。该对象被转为原始类型的值时,会调用这个方法,返回该对象对应的原始类型值。
Symbol.toPrimitive
被调用时,会接受一个字符串参数,表示当前运算的模式,一共有三种模式。
- Number:该场合需要转成数值
- String:该场合需要转成字符串
- Default:该场合可以转成数值,也可以转成字符串
1 | let obj = { |
Symbol.toStringTag
对象的Symbol.toStringTag
属性,指向一个方法。在该对象上面调用Object.prototype.toString
方法时,如果这个属性存在,它的返回值会出现在toString
方法返回的字符串之中,表示对象的类型。也就是说,这个属性可以用来定制[object Object]
或[object Array]
中object
后面的那个字符串。
1 | // 例一 |
ES6 新增内置对象的Symbol.toStringTag
属性值如下。
JSON[Symbol.toStringTag]
:’JSON’Math[Symbol.toStringTag]
:’Math’- Module 对象
M[Symbol.toStringTag]
:’Module’ ArrayBuffer.prototype[Symbol.toStringTag]
:’ArrayBuffer’DataView.prototype[Symbol.toStringTag]
:’DataView’Map.prototype[Symbol.toStringTag]
:’Map’Promise.prototype[Symbol.toStringTag]
:’Promise’Set.prototype[Symbol.toStringTag]
:’Set’%TypedArray%.prototype[Symbol.toStringTag]
:’Uint8Array’等WeakMap.prototype[Symbol.toStringTag]
:’WeakMap’WeakSet.prototype[Symbol.toStringTag]
:’WeakSet’%MapIteratorPrototype%[Symbol.toStringTag]
:’Map Iterator’%SetIteratorPrototype%[Symbol.toStringTag]
:’Set Iterator’%StringIteratorPrototype%[Symbol.toStringTag]
:’String Iterator’Symbol.prototype[Symbol.toStringTag]
:’Symbol’Generator.prototype[Symbol.toStringTag]
:’Generator’GeneratorFunction.prototype[Symbol.toStringTag]
:’GeneratorFunction’
Symbol.unscopables
对象的Symbol.unscopables
属性,指向一个对象。该对象指定了使用with
关键字时,哪些属性会被with
环境排除。
1 | Array.prototype[Symbol.unscopables] |
上面代码说明,数组有 7 个属性,会被with
命令排除。
1 | // 没有 unscopables 时 |
上面代码通过指定Symbol.unscopables
属性,使得with
语法块不会在当前作用域寻找foo
属性,即foo
将指向外层作用域的变量。
Promise 对象
Promise 的含义
Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise
对象。
所谓Promise
,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
Promise
对象有以下两个特点。
(1)对象的状态不受外界影响。Promise
对象代表一个异步操作,有三种状态:pending
(进行中)、fulfilled
(已成功)和rejected
(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise
这个名字的由来,它的英语意思就是“承诺”,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise
对象的状态改变,只有两种可能:从pending
变为fulfilled
和从pending
变为rejected
。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)。如果改变已经发生了,你再对Promise
对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
注意,为了行文方便,本章后面的resolved
统一只指fulfilled
状态,不包含rejected
状态。
有了Promise
对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise
对象提供统一的接口,使得控制异步操作更加容易。
Promise
也有一些缺点。首先,无法取消Promise
,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise
内部抛出的错误,不会反应到外部。第三,当处于pending
状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
如果某些事件不断地反复发生,一般来说,使用 Stream 模式是比部署Promise
更好的选择。
基本用法
ES6 规定,Promise
对象是一个构造函数,用来生成Promise
实例。
下面代码创造了一个Promise
实例。
1 | const promise = new Promise(function(resolve, reject) { |
Promise
构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
和reject
。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。
resolve
函数的作用是,将Promise
对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject
函数的作用是,将Promise
对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
Promise
实例生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数。
1 | promise.then(function(value) { |
then
方法可以接受两个回调函数作为参数。第一个回调函数是Promise
对象的状态变为resolved
时调用,第二个回调函数是Promise
对象的状态变为rejected
时调用。其中,第二个函数是可选的,不一定要提供。这两个函数都接受Promise
对象传出的值作为参数。
下面是一个Promise
对象的简单例子。
1 | function timeout(ms) { |
上面代码中,timeout
方法返回一个Promise
实例,表示一段时间以后才会发生的结果。过了指定的时间(ms
参数)以后,Promise
实例的状态变为resolved
,就会触发then
方法绑定的回调函数。
Promise 新建后就会立即执行。
1 | let promise = new Promise(function(resolve, reject) { |
上面代码中,Promise 新建后立即执行,所以首先输出的是Promise
。然后,then
方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved
最后输出。
下面是异步加载图片的例子。
1 | function loadImageAsync(url) { |
上面代码中,使用Promise
包装了一个图片加载的异步操作。如果加载成功,就调用resolve
方法,否则就调用reject
方法。
下面是一个用Promise
对象实现的 Ajax 操作的例子。
1 | const getJSON = function(url) { |
上面代码中,getJSON
是对 XMLHttpRequest 对象的封装,用于发出一个针对 JSON 数据的 HTTP 请求,并且返回一个Promise
对象。需要注意的是,在getJSON
内部,resolve
函数和reject
函数调用时,都带有参数。
如果调用resolve
函数和reject
函数时带有参数,那么它们的参数会被传递给回调函数。reject
函数的参数通常是Error
对象的实例,表示抛出的错误;resolve
函数的参数除了正常的值以外,还可能是另一个 Promise 实例,比如像下面这样。
1 | const p1 = new Promise(function (resolve, reject) { |
上面代码中,p1
和p2
都是 Promise 的实例,但是p2
的resolve
方法将p1
作为参数,即一个异步操作的结果是返回另一个异步操作。
注意,这时p1
的状态就会传递给p2
,也就是说,p1
的状态决定了p2
的状态。如果p1
的状态是pending
,那么p2
的回调函数就会等待p1
的状态改变;如果p1
的状态已经是resolved
或者rejected
,那么p2
的回调函数将会立刻执行。
1 | const p1 = new Promise(function (resolve, reject) { |
上面代码中,p1
是一个 Promise,3 秒之后变为rejected
。p2
的状态在 1 秒之后改变,resolve
方法返回的是p1
。由于p2
返回的是另一个 Promise,导致p2
自己的状态无效了,由p1
的状态决定p2
的状态。所以,后面的then
语句都变成针对后者(p1
)。又过了 2 秒,p1
变为rejected
,导致触发catch
方法指定的回调函数。
注意,调用resolve
或reject
并不会终结 Promise 的参数函数的执行。
1 | new Promise((resolve, reject) => { |
上面代码中,调用resolve(1)
以后,后面的console.log(2)
还是会执行,并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务。
一般来说,调用resolve
或reject
以后,Promise 的使命就完成了,后继操作应该放到then
方法里面,而不应该直接写在resolve
或reject
的后面。所以,最好在它们前面加上return
语句,这样就不会有意外。
1 | new Promise((resolve, reject) => { |
Promise.prototype.then()
Promise 实例具有then
方法,也就是说,then
方法是定义在原型对象Promise.prototype
上的。它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过,then
方法的第一个参数是resolved
状态的回调函数,第二个参数(可选)是rejected
状态的回调函数。
then
方法返回的是一个新的Promise
实例(注意,不是原来那个Promise
实例)。因此可以采用链式写法,即then
方法后面再调用另一个then
方法。
1 | getJSON("/posts.json").then(function(json) { |
上面的代码使用then
方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。
采用链式的then
,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise
对象(即有异步操作),这时后一个回调函数,就会等待该Promise
对象的状态发生变化,才会被调用。
1 | getJSON("/post/1.json").then(function(post) { |
上面代码中,第一个then
方法指定的回调函数,返回的是另一个Promise
对象。这时,第二个then
方法指定的回调函数,就会等待这个新的Promise
对象状态发生变化。如果变为resolved
,就调用第一个回调函数,如果状态变为rejected
,就调用第二个回调函数。
如果采用箭头函数,上面的代码可以写得更简洁。
1 | getJSON("/post/1.json").then( |
Promise.prototype.catch()
Promise.prototype.catch()
方法是.then(null, rejection)
或.then(undefined, rejection)
的别名,用于指定发生错误时的回调函数。
1 | getJSON('/posts.json').then(function(posts) { |
上面代码中,getJSON()
方法返回一个 Promise 对象,如果该对象状态变为resolved
,则会调用then()
方法指定的回调函数;如果异步操作抛出错误,状态就会变为rejected
,就会调用catch()
方法指定的回调函数,处理这个错误。另外,then()
方法指定的回调函数,如果运行中抛出错误,也会被catch()
方法捕获。
1 | p.then((val) => console.log('fulfilled:', val)) |
下面是一个例子。
1 | const promise = new Promise(function(resolve, reject) { |
上面代码中,promise
抛出一个错误,就被catch()
方法指定的回调函数捕获。注意,上面的写法与下面两种写法是等价的。
1 | // 写法一 |
比较上面两种写法,可以发现reject()
方法的作用,等同于抛出错误。
如果 Promise 状态已经变成resolved
,再抛出错误是无效的。
1 | const promise = new Promise(function(resolve, reject) { |
上面代码中,Promise 在resolve
语句后面,再抛出错误,不会被捕获,等于没有抛出。因为 Promise 的状态一旦改变,就永久保持该状态,不会再变了。
Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch
语句捕获。
1 | getJSON('/post/1.json').then(function(post) { |
上面代码中,一共有三个 Promise 对象:一个由getJSON()
产生,两个由then()
产生。它们之中任何一个抛出的错误,都会被最后一个catch()
捕获。
一般来说,不要在then()
方法里面定义 Reject 状态的回调函数(即then
的第二个参数),总是使用catch
方法。
1 | // bad |
上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then
方法执行中的错误,也更接近同步的写法(try/catch
)。因此,建议总是使用catch()
方法,而不使用then()
方法的第二个参数。
跟传统的try/catch
代码块不同的是,如果没有使用catch()
方法指定错误处理的回调函数,Promise 对象抛出的错误不会传递到外层代码,即不会有任何反应。
1 | const someAsyncThing = function() { |
上面代码中,someAsyncThing()
函数产生的 Promise 对象,内部有语法错误。浏览器运行到这一行,会打印出错误提示ReferenceError: x is not defined
,但是不会退出进程、终止脚本执行,2 秒之后还是会输出123
。这就是说,Promise 内部的错误不会影响到 Promise 外部的代码,通俗的说法就是“Promise 会吃掉错误”。
这个脚本放在服务器执行,退出码就是0
(即表示执行成功)。不过,Node.js 有一个unhandledRejection
事件,专门监听未捕获的reject
错误,上面的脚本会触发这个事件的监听函数,可以在监听函数里面抛出错误。
1 | process.on('unhandledRejection', function (err, p) { |
上面代码中,unhandledRejection
事件的监听函数有两个参数,第一个是错误对象,第二个是报错的 Promise 实例,它可以用来了解发生错误的环境信息。
注意,Node 有计划在未来废除unhandledRejection
事件。如果 Promise 内部有未捕获的错误,会直接终止进程,并且进程的退出码不为 0。
再看下面的例子。
1 | const promise = new Promise(function (resolve, reject) { |
上面代码中,Promise 指定在下一轮“事件循环”再抛出错误。到了那个时候,Promise 的运行已经结束了,所以这个错误是在 Promise 函数体外抛出的,会冒泡到最外层,成了未捕获的错误。
一般总是建议,Promise 对象后面要跟catch()
方法,这样可以处理 Promise 内部发生的错误。catch()
方法返回的还是一个 Promise 对象,因此后面还可以接着调用then()
方法。
1 | const someAsyncThing = function() { |
上面代码运行完catch()
方法指定的回调函数,会接着运行后面那个then()
方法指定的回调函数。如果没有报错,则会跳过catch()
方法。
1 | Promise.resolve() |
上面的代码因为没有报错,跳过了catch()
方法,直接执行后面的then()
方法。此时,要是then()
方法里面报错,就与前面的catch()
无关了。
catch()
方法之中,还能再抛出错误。
1 | const someAsyncThing = function() { |
上面代码中,catch()
方法抛出一个错误,因为后面没有别的catch()
方法了,导致这个错误不会被捕获,也不会传递到外层。如果改写一下,结果就不一样了。
1 | someAsyncThing().then(function() { |
上面代码中,第二个catch()
方法用来捕获前一个catch()
方法抛出的错误。
Promise.prototype.finally()
finally()
方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。
1 | promise |
上面代码中,不管promise
最后的状态,在执行完then
或catch
指定的回调函数以后,都会执行finally
方法指定的回调函数。
下面是一个例子,服务器使用 Promise 处理请求,然后使用finally
方法关掉服务器。
1 | server.listen(port) |
finally
方法的回调函数不接受任何参数,这意味着没有办法知道,前面的 Promise 状态到底是fulfilled
还是rejected
。这表明,finally
方法里面的操作,应该是与状态无关的,不依赖于 Promise 的执行结果。
finally
本质上是then
方法的特例。
1 | promise |
上面代码中,如果不使用finally
方法,同样的语句需要为成功和失败两种情况各写一次。有了finally
方法,则只需要写一次。
它的实现也很简单。
1 | Promise.prototype.finally = function (callback) { |
上面代码中,不管前面的 Promise 是fulfilled
还是rejected
,都会执行回调函数callback
。
从上面的实现还可以看到,finally
方法总是会返回原来的值。
1 | // resolve 的值是 undefined |
Promise.all()
Promise.all()
方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
1 | const p = Promise.all([p1, p2, p3]); |
上面代码中,Promise.all()
方法接受一个数组作为参数,p1
、p2
、p3
都是 Promise 实例,如果不是,就会先调用下面讲到的Promise.resolve
方法,将参数转为 Promise 实例,再进一步处理。另外,Promise.all()
方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。
p
的状态由p1
、p2
、p3
决定,分成两种情况。
(1)只有p1
、p2
、p3
的状态都变成fulfilled
,p
的状态才会变成fulfilled
,此时p1
、p2
、p3
的返回值组成一个数组,传递给p
的回调函数。
(2)只要p1
、p2
、p3
之中有一个被rejected
,p
的状态就变成rejected
,此时第一个被reject
的实例的返回值,会传递给p
的回调函数。
下面是一个具体的例子。
1 | // 生成一个Promise对象的数组 |
上面代码中,promises
是包含 6 个 Promise 实例的数组,只有这 6 个实例的状态都变成fulfilled
,或者其中有一个变为rejected
,才会调用Promise.all
方法后面的回调函数。
下面是另一个例子。
1 | const databasePromise = connectDatabase(); |
上面代码中,booksPromise
和userPromise
是两个异步操作,只有等到它们的结果都返回了,才会触发pickTopRecommendations
这个回调函数。
注意,如果作为参数的 Promise 实例,自己定义了catch
方法,那么它一旦被rejected
,并不会触发Promise.all()
的catch
方法。
1 | const p1 = new Promise((resolve, reject) => { |
上面代码中,p1
会resolved
,p2
首先会rejected
,但是p2
有自己的catch
方法,该方法返回的是一个新的 Promise 实例,p2
指向的实际上是这个实例。该实例执行完catch
方法后,也会变成resolved
,导致Promise.all()
方法参数里面的两个实例都会resolved
,因此会调用then
方法指定的回调函数,而不会调用catch
方法指定的回调函数。
如果p2
没有自己的catch
方法,就会调用Promise.all()
的catch
方法。
1 | const p1 = new Promise((resolve, reject) => { |
Promise.race()
Promise.race()
方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例。
1 | const p = Promise.race([p1, p2, p3]); |
上面代码中,只要p1
、p2
、p3
之中有一个实例率先改变状态,p
的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p
的回调函数。
Promise.race()
方法的参数与Promise.all()
方法一样,如果不是 Promise 实例,就会先调用下面讲到的Promise.resolve()
方法,将参数转为 Promise 实例,再进一步处理。
下面是一个例子,如果指定时间内没有获得结果,就将 Promise 的状态变为reject
,否则变为resolve
。
1 | const p = Promise.race([ |
上面代码中,如果 5 秒之内fetch
方法无法返回结果,变量p
的状态就会变为rejected
,从而触发catch
方法指定的回调函数。
Promise.allSettled()
Promise.allSettled()
方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果,不管是fulfilled
还是rejected
,包装实例才会结束。该方法由 ES2020 引入。
1 | const promises = [ |
上面代码对服务器发出三个请求,等到三个请求都结束,不管请求成功还是失败,加载的滚动图标就会消失。
该方法返回的新的 Promise 实例,一旦结束,状态总是fulfilled
,不会变成rejected
。状态变成fulfilled
后,Promise 的监听函数接收到的参数是一个数组,每个成员对应一个传入Promise.allSettled()
的 Promise 实例。
1 | const resolved = Promise.resolve(42); |
上面代码中,Promise.allSettled()
的返回值allSettledPromise
,状态只可能变成fulfilled
。它的监听函数接收到的参数是数组results
。该数组的每个成员都是一个对象,对应传入Promise.allSettled()
的两个 Promise 实例。每个对象都有status
属性,该属性的值只可能是字符串fulfilled
或字符串rejected
。fulfilled
时,对象有value
属性,rejected
时有reason
属性,对应两种状态的返回值。
下面是返回值用法的例子。
1 | const promises = [ fetch('index.html'), fetch('https://does-not-exist/') ]; |
有时候,我们不关心异步操作的结果,只关心这些操作有没有结束。这时,Promise.allSettled()
方法就很有用。如果没有这个方法,想要确保所有操作都结束,就很麻烦。Promise.all()
方法无法做到这一点。
1 | const urls = [ /* ... */ ]; |
上面代码中,Promise.all()
无法确定所有请求都结束。想要达到这个目的,写起来很麻烦,有了Promise.allSettled()
,这就很容易了。
Promise.any()
Promise.any()
方法接受一组 Promise 实例作为参数,包装成一个新的 Promise 实例。只要参数实例有一个变成fulfilled
状态,包装实例就会变成fulfilled
状态;如果所有参数实例都变成rejected
状态,包装实例就会变成rejected
状态。该方法目前是一个第三阶段的提案 。
Promise.any()
跟Promise.race()
方法很像,只有一点不同,就是不会因为某个 Promise 变成rejected
状态而结束。
1 | const promises = [ |
上面代码中,Promise.any()
方法的参数数组包含三个 Promise 操作。其中只要有一个变成fulfilled
,Promise.any()
返回的 Promise 对象就变成fulfilled
。如果所有三个操作都变成rejected
,那么await
命令就会抛出错误。
Promise.any()
抛出的错误,不是一个一般的错误,而是一个 AggregateError 实例。它相当于一个数组,每个成员对应一个被rejected
的操作所抛出的错误。下面是 AggregateError 的实现示例。
1 | new AggregateError() extends Array -> AggregateError |
捕捉错误时,如果不用try...catch
结构和 await 命令,可以像下面这样写。
1 | Promise.any(promises).then( |
下面是一个例子。
1 | var resolved = Promise.resolve(42); |
Promise.resolve()
有时需要将现有对象转为 Promise 对象,Promise.resolve()
方法就起到这个作用。
1 | const jsPromise = Promise.resolve($.ajax('/whatever.json')); |
上面代码将 jQuery 生成的deferred
对象,转为一个新的 Promise 对象。
Promise.resolve()
等价于下面的写法。
1 | Promise.resolve('foo') |
Promise.resolve()
方法的参数分成四种情况。
(1)参数是一个 Promise 实例
如果参数是 Promise 实例,那么Promise.resolve
将不做任何修改、原封不动地返回这个实例。
(2)参数是一个thenable
对象
thenable
对象指的是具有then
方法的对象,比如下面这个对象。
1 | let thenable = { |
Promise.resolve()
方法会将这个对象转为 Promise 对象,然后就立即执行thenable
对象的then()
方法。
1 | let thenable = { |
上面代码中,thenable
对象的then()
方法执行后,对象p1
的状态就变为resolved
,从而立即执行最后那个then()
方法指定的回调函数,输出42。
(3)参数不是具有then()
方法的对象,或根本就不是对象
如果参数是一个原始值,或者是一个不具有then()
方法的对象,则Promise.resolve()
方法返回一个新的 Promise 对象,状态为resolved
。
1 | const p = Promise.resolve('Hello'); |
上面代码生成一个新的 Promise 对象的实例p
。由于字符串Hello
不属于异步操作(判断方法是字符串对象不具有 then 方法),返回 Promise 实例的状态从一生成就是resolved
,所以回调函数会立即执行。Promise.resolve()
方法的参数,会同时传给回调函数。
(4)不带有任何参数
Promise.resolve()
方法允许调用时不带参数,直接返回一个resolved
状态的 Promise 对象。
所以,如果希望得到一个 Promise 对象,比较方便的方法就是直接调用Promise.resolve()
方法。
1 | const p = Promise.resolve(); |
上面代码的变量p
就是一个 Promise 对象。
需要注意的是,立即resolve()
的 Promise 对象,是在本轮“事件循环”(event loop)的结束时执行,而不是在下一轮“事件循环”的开始时。
1 | setTimeout(function () { |
上面代码中,setTimeout(fn, 0)
在下一轮“事件循环”开始时执行,Promise.resolve()
在本轮“事件循环”结束时执行,console.log('one')
则是立即执行,因此最先输出。
Promise.reject()
Promise.reject(reason)
方法也会返回一个新的 Promise 实例,该实例的状态为rejected
。
1 | const p = Promise.reject('出错了'); |
上面代码生成一个 Promise 对象的实例p
,状态为rejected
,回调函数会立即执行。
Promise.reject()
方法的参数,会原封不动地作为reject
的理由,变成后续方法的参数。
1 | Promise.reject('出错了') |
上面代码中,Promise.reject()
方法的参数是一个字符串,后面catch()
方法的参数e
就是这个字符串。
应用
加载图片
我们可以将图片的加载写成一个Promise
,一旦加载完成,Promise
的状态就发生变化。
1 | const preloadImage = function (path) { |
Promise.try()
实际开发中,经常遇到一种情况:不知道或者不想区分,函数f
是同步函数还是异步操作,但是想用 Promise 来处理它。因为这样就可以不管f
是否包含异步操作,都用then
方法指定下一步流程,用catch
方法处理f
抛出的错误。一般就会采用下面的写法。
1 | Promise.resolve().then(f) |
上面的写法有一个缺点,就是如果f
是同步函数,那么它会在本轮事件循环的末尾执行。
1 | const f = () => console.log('now'); |
上面代码中,函数f
是同步的,但是用 Promise 包装了以后,就变成异步执行了。
那么有没有一种方法,让同步函数同步执行,异步函数异步执行,并且让它们具有统一的 API 呢?回答是可以的,并且还有两种写法。第一种写法是用async
函数来写。
1 | const f = () => console.log('now'); |
上面代码中,第二行是一个立即执行的匿名函数,会立即执行里面的async
函数,因此如果f
是同步的,就会得到同步的结果;如果f
是异步的,就可以用then
指定下一步,就像下面的写法。
1 | (async () => f())() |
需要注意的是,async () => f()
会吃掉f()
抛出的错误。所以,如果想捕获错误,要使用promise.catch
方法。
1 | (async () => f())() |
第二种写法是使用new Promise()
。
1 | const f = () => console.log('now'); |
上面代码也是使用立即执行的匿名函数,执行new Promise()
。这种情况下,同步函数也是同步执行的。
鉴于这是一个很常见的需求,所以现在有一个提案,提供Promise.try
方法替代上面的写法。
1 | const f = () => console.log('now'); |
事实上,Promise.try
存在已久,Promise 库Bluebird
、Q
和when
,早就提供了这个方法。
由于Promise.try
为所有操作提供了统一的处理机制,所以如果想用then
方法管理流程,最好都用Promise.try
包装一下。这样有许多好处,其中一点就是可以更好地管理异常。
1 | function getUsername(userId) { |
上面代码中,database.users.get()
返回一个 Promise 对象,如果抛出异步错误,可以用catch
方法捕获,就像下面这样写。
1 | database.users.get({id: userId}) |
但是database.users.get()
可能还会抛出同步错误(比如数据库连接错误,具体要看实现方法),这时你就不得不用try...catch
去捕获。
1 | try { |
上面这样的写法就很笨拙了,这时就可以统一用promise.catch()
捕获所有同步和异步的错误。
1 | Promise.try(() => database.users.get({id: userId})) |
事实上,Promise.try
就是模拟try
代码块,就像promise.catch
模拟的是catch
代码块。