diff --git a/docs/proxy.md b/docs/proxy.md index 80a6e17..7ea0525 100644 --- a/docs/proxy.md +++ b/docs/proxy.md @@ -1,6 +1,6 @@ -# Proxy 和 Reflect +# Proxy -## Proxy 概述 +## 概述 Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。 @@ -70,7 +70,7 @@ target.a // "b" 上面代码中,`handler`是一个空对象,没有任何拦截效果,访问`handler`就等同于访问`target`。 -一个技巧是将Proxy对象,设置到`object.proxy`属性,从而可以在`object`对象上调用。 +一个技巧是将 Proxy 对象,设置到`object.proxy`属性,从而可以在`object`对象上调用。 ```javascript var object = { proxy: new Proxy(target, handler) }; @@ -145,7 +145,7 @@ fproxy.foo // "Hello, foo" **(5)ownKeys(target)** -拦截`Object.getOwnPropertyNames(proxy)`、`Object.getOwnPropertySymbols(proxy)`、`Object.keys(proxy)`,返回一个数组。该方法返回对象所有自身的属性,而`Object.keys()`仅返回对象可遍历的属性。 +拦截`Object.getOwnPropertyNames(proxy)`、`Object.getOwnPropertySymbols(proxy)`、`Object.keys(proxy)`,返回一个数组。该方法返回目标对象所有自身的属性的属性名,而`Object.keys()`的返回结果仅包括目标对象自身的可遍历属性。 **(6)getOwnPropertyDescriptor(target, propKey)** @@ -181,7 +181,7 @@ fproxy.foo // "Hello, foo" 拦截 Proxy 实例作为构造函数调用的操作,比如`new proxy(...args)`。 -## Proxy实例的方法 +## Proxy 实例的方法 下面是上面这些拦截方法的详细介绍。 @@ -349,7 +349,7 @@ person.age = 'young' // 报错 person.age = 300 // 报错 ``` -上面代码中,由于设置了存值函数`set`,任何不符合要求的`age`属性赋值,都会抛出一个错误。利用`set`方法,还可以数据绑定,即每当对象发生变化时,会自动更新DOM。 +上面代码中,由于设置了存值函数`set`,任何不符合要求的`age`属性赋值,都会抛出一个错误,这是数据验证的一种实现方法。利用`set`方法,还可以数据绑定,即每当对象发生变化时,会自动更新 DOM。 有时,我们会在对象上面设置内部属性,属性名的第一个字符使用下划线开头,表示这些属性不应该被外部使用。结合`get`和`set`方法,就可以做到防止这些内部属性被外部读写。 @@ -382,7 +382,9 @@ proxy._prop = 'c' ### apply() -`apply`方法拦截函数的调用、call和apply操作。 +`apply`方法拦截函数的调用、`call`和`apply`操作。 + +`apply`方法可以接受三个参数,分别是目标对象、目标对象的上下文对象(`this`)和目标对象的参数数组。 ```javascript var handler = { @@ -392,8 +394,6 @@ var handler = { }; ``` -`apply`方法可以接受三个参数,分别是目标对象、目标对象的上下文对象(`this`)和目标对象的参数数组。 - 下面是一个例子。 ```javascript @@ -410,7 +410,7 @@ p() // "I am the proxy" ``` -上面代码中,变量`p`是Proxy的实例,当它作为函数调用时(`p()`),就会被`apply`方法拦截,返回一个字符串。 +上面代码中,变量`p`是 Proxy 的实例,当它作为函数调用时(`p()`),就会被`apply`方法拦截,返回一个字符串。 下面是另外一个例子。 @@ -464,6 +464,7 @@ var proxy = new Proxy(target, handler); ```javascript var obj = { a: 10 }; Object.preventExtensions(obj); + var p = new Proxy(obj, { has: function(target, prop) { return false; @@ -538,14 +539,14 @@ var handler = { 下面是一个例子。 ```javascript -var p = new Proxy(function() {}, { +var p = new Proxy(function () {}, { construct: function(target, args) { console.log('called: ' + args.join(', ')); return { value: args[0] * 10 }; } }); -new p(1).value +(new p(1)).value // "called: 1" // 10 ``` @@ -693,24 +694,34 @@ Object.isExtensible(p) // 报错 ### ownKeys() -`ownKeys`方法用来拦截`Object.keys()`操作。 +`ownKeys`方法用来拦截以下操作。 + +- `Object.getOwnPropertyNames()` +- `Object.getOwnPropertySymbols()` +- `Object.keys()` + +下面是拦截`Object.keys()`的例子。 ```javascript -let target = {}; +let target = { + a: 1, + b: 2, + c: 3 +}; let handler = { ownKeys(target) { - return ['hello', 'world']; + return ['a']; } }; let proxy = new Proxy(target, handler); Object.keys(proxy) -// [ 'hello', 'world' ] +// [ 'a' ] ``` -上面代码拦截了对于`target`对象的`Object.keys()`操作,返回预先设定的数组。 +上面代码拦截了对于`target`对象的`Object.keys()`操作,只返回`a`、`b`、`c`三个属性之中的`a`属性。 下面的例子是拦截第一个字符为下划线的属性名。 @@ -734,6 +745,114 @@ for (let key of Object.keys(proxy)) { // "baz" ``` +注意,有三类属性会被`ownKeys`方法自动过滤,不会返回。 + +- 目标对象上不存在的属性 +- 属性名为 Symbol 值 +- 不可遍历(`enumerable`)的属性 + +```javascript +let target = { + a: 1, + b: 2, + c: 3, + [Symbol.for('secret')]: '4', +}; + +Object.defineProperty(target, 'key', { + enumerable: false, + configurable: true, + writable: true, + value: 'static' +}); + +let handler = { + ownKeys(target) { + return ['a', 'd', Symbol.for('secret'), 'key']; + } +}; + +let proxy = new Proxy(target, handler); + +Object.keys(proxy) +// ['a'] +``` + +上面代码中,`ownKeys`方法之中,显式返回不存在的属性(`d`)、Symbol 值(`Symbol.for('secret')`)、不可遍历的属性(`key`),结果都被自动过滤掉。 + +下面是拦截`Object.getOwnPropertyNames()`的例子。 + +```javascript +var p = new Proxy({}, { + ownKeys: function(target) { + return ['a', 'b', 'c']; + } +}); + +Object.getOwnPropertyNames(p) +// [ 'a', 'b', 'c' ] +``` + +注意,`ownKeys`方法返回的数组成员,只能是字符串或 Symbol 值。如果有其他类型的值,或者返回的根本不是数组,就会报错。 + +```javascript +var obj = {}; + +var p = new Proxy(obj, { + ownKeys: function(target) { + return [123, true, undefined, null, {}, []]; + } +}); + +Object.getOwnPropertyNames(p) +// Uncaught TypeError: 123 is not a valid property name +``` + +上面代码中,`ownKeys`方法虽然返回一个数组,但是每一个数组成员都不是字符串或 Symbol 值,因此就报错了。 + +如果目标对象自身包含不可配置的属性,则该属性必须被`ownKeys`方法返回,否则报错。 + +```javascript +var obj = {}; +Object.defineProperty(obj, 'a', { + configurable: false, + enumerable: true, + value: 10 } +); + +var p = new Proxy(obj, { + ownKeys: function(target) { + return ['b']; + } +}); + +Object.getOwnPropertyNames(p) +// Uncaught TypeError: 'ownKeys' on proxy: trap result did not include 'a' +``` + +上面代码中,`obj`对象的`a`属性是不可配置的,这时`ownKeys`方法返回的数组之中,必须包含`a`,否则会报错。 + +另外,如果目标对象是不可扩展的(non-extensition),这时`ownKeys`方法返回的数组之中,必须包含原对象的所有属性,且不能包含多余的属性,否则报错。 + +```javascript +var obj = { + a: 1 +}; + +Object.preventExtensions(obj); + +var p = new Proxy(obj, { + ownKeys: function(target) { + return ['a', 'b']; + } +}); + +Object.getOwnPropertyNames(p) +// Uncaught TypeError: 'ownKeys' on proxy: trap returned extra keys but proxy target is non-extensible +``` + +上面代码中,`Obj`对象是不可扩展的,这时`ownKeys`方法返回的数组之中,包含了`obj`对象的多余属性`b`,所以导致了报错。 + ### preventExtensions() `preventExtensions`方法拦截`Object.preventExtensions()`。该方法必须返回一个布尔值。 @@ -791,7 +910,7 @@ proxy.setPrototypeOf(proxy, proto); ## Proxy.revocable() -Proxy.revocable方法返回一个可取消的Proxy实例。 +`Proxy.revocable`方法返回一个可取消的 Proxy 实例。 ```javascript let target = {}; @@ -879,459 +998,3 @@ const proxy = new Proxy(target, handler); proxy.getDate() // 1 ``` -## Reflect概述 - -`Reflect`对象与`Proxy`对象一样,也是 ES6 为了操作对象而提供的新 API。`Reflect`对象的设计目的有这样几个。 - -(1) 将`Object`对象的一些明显属于语言内部的方法(比如`Object.defineProperty`),放到`Reflect`对象上。现阶段,某些方法同时在`Object`和`Reflect`对象上部署,未来的新方法将只部署在`Reflect`对象上。也就是说,从`Reflect`对象上可以拿到语言内部的方法。 - -(2) 修改某些`Object`方法的返回结果,让其变得更合理。比如,`Object.defineProperty(obj, name, desc)`在无法定义属性时,会抛出一个错误,而`Reflect.defineProperty(obj, name, desc)`则会返回`false`。 - -```javascript -// 老写法 -try { - Object.defineProperty(target, property, attributes); - // success -} catch (e) { - // failure -} - -// 新写法 -if (Reflect.defineProperty(target, property, attributes)) { - // success -} else { - // failure -} -``` - -(3) 让`Object`操作都变成函数行为。某些`Object`操作是命令式,比如`name in obj`和`delete obj[name]`,而`Reflect.has(obj, name)`和`Reflect.deleteProperty(obj, name)`让它们变成了函数行为。 - -```javascript -// 老写法 -'assign' in Object // true - -// 新写法 -Reflect.has(Object, 'assign') // true -``` - -(4)`Reflect`对象的方法与`Proxy`对象的方法一一对应,只要是`Proxy`对象的方法,就能在`Reflect`对象上找到对应的方法。这就让`Proxy`对象可以方便地调用对应的`Reflect`方法,完成默认行为,作为修改行为的基础。也就是说,不管`Proxy`怎么修改默认行为,你总可以在`Reflect`上获取默认行为。 - -```javascript -Proxy(target, { - set: function(target, name, value, receiver) { - var success = Reflect.set(target,name, value, receiver); - if (success) { - log('property ' + name + ' on ' + target + ' set to ' + value); - } - return success; - } -}); -``` - -上面代码中,`Proxy`方法拦截`target`对象的属性赋值行为。它采用`Reflect.set`方法将值赋值给对象的属性,确保完成原有的行为,然后再部署额外的功能。 - -下面是另一个例子。 - -```javascript -var loggedObj = new Proxy(obj, { - get(target, name) { - console.log('get', target, name); - return Reflect.get(target, name); - }, - deleteProperty(target, name) { - console.log('delete' + name); - return Reflect.deleteProperty(target, name); - }, - has(target, name) { - console.log('has' + name); - return Reflect.has(target, name); - } -}); -``` - -上面代码中,每一个`Proxy`对象的拦截操作(`get`、`delete`、`has`),内部都调用对应的`Reflect`方法,保证原生行为能够正常执行。添加的工作,就是将每一个操作输出一行日志。 - -有了`Reflect`对象以后,很多操作会更易读。 - -```javascript -// 老写法 -Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1 - -// 新写法 -Reflect.apply(Math.floor, undefined, [1.75]) // 1 -``` - -## Reflect对象的方法 - -`Reflect`对象的方法清单如下,共13个。 - -- Reflect.apply(target,thisArg,args) -- Reflect.construct(target,args) -- Reflect.get(target,name,receiver) -- Reflect.set(target,name,value,receiver) -- Reflect.defineProperty(target,name,desc) -- Reflect.deleteProperty(target,name) -- Reflect.has(target,name) -- Reflect.ownKeys(target) -- Reflect.isExtensible(target) -- Reflect.preventExtensions(target) -- Reflect.getOwnPropertyDescriptor(target, name) -- Reflect.getPrototypeOf(target) -- Reflect.setPrototypeOf(target, prototype) - -上面这些方法的作用,大部分与`Object`对象的同名方法的作用都是相同的,而且它与`Proxy`对象的方法是一一对应的。下面是对它们的解释。 - -**(1)Reflect.get(target, name, receiver)** - -`Reflect.get`方法查找并返回`target`对象的`name`属性,如果没有该属性,则返回`undefined`。 - -```javascript -var myObject = { - foo: 1, - bar: 2, - get baz() { - return this.foo + this.bar; - }, -} - -Reflect.get(myObject, 'foo') // 1 -Reflect.get(myObject, 'bar') // 2 -Reflect.get(myObject, 'baz') // 3 -``` - -如果`name`属性部署了读取函数(getter),则读取函数的`this`绑定`receiver`。 - -```javascript -var myObject = { - foo: 1, - bar: 2, - get baz() { - return this.foo + this.bar; - }, -}; - -var myReceiverObject = { - foo: 4, - bar: 4, -}; - -Reflect.get(myObject, 'baz', myReceiverObject) // 8 -``` - -如果第一个参数不是对象,`Reflect.get`方法会报错。 - -```javascript -Reflect.get(1, 'foo') // 报错 -Reflect.get(false, 'foo') // 报错 -``` - -**(2)Reflect.set(target, name, value, receiver)** - -`Reflect.set`方法设置`target`对象的`name`属性等于`value`。 - -```javascript -var myObject = { - foo: 1, - set bar(value) { - return this.foo = value; - }, -} - -myObject.foo // 1 - -Reflect.set(myObject, 'foo', 2); -myObject.foo // 2 - -Reflect.set(myObject, 'bar', 3) -myObject.foo // 3 -``` - -如果`name`属性设置了赋值函数,则赋值函数的`this`绑定`receiver`。 - -```javascript -var myObject = { - foo: 4, - set bar(value) { - return this.foo = value; - }, -}; - -var myReceiverObject = { - foo: 0, -}; - -Reflect.set(myObject, 'bar', 1, myReceiverObject); -myObject.foo // 4 -myReceiverObject.foo // 1 -``` - -如果第一个参数不是对象,`Reflect.set`会报错。 - -```javascript -Reflect.set(1, 'foo', {}) // 报错 -Reflect.set(false, 'foo', {}) // 报错 -``` - -**(3)Reflect.has(obj, name)** - -`Reflect.has`方法对应`name in obj`里面的`in`运算符。 - -```javascript -var myObject = { - foo: 1, -}; - -// 旧写法 -'foo' in myObject // true - -// 新写法 -Reflect.has(myObject, 'foo') // true -``` - -如果第一个参数不是对象,`Reflect.has`和`in`运算符都会报错。 - -**(4)Reflect.deleteProperty(obj, name)** - -`Reflect.deleteProperty`方法等同于`delete obj[name]`,用于删除对象的属性。 - -```javascript -const myObj = { foo: 'bar' }; - -// 旧写法 -delete myObj.foo; - -// 新写法 -Reflect.deleteProperty(myObj, 'foo'); -``` - -**(5)Reflect.construct(target, args)** - -`Reflect.construct`方法等同于`new target(...args)`,这提供了一种不使用`new`,来调用构造函数的方法。 - -```javascript -function Greeting(name) { - this.name = name; -} - -// new 的写法 -const instance = new Greeting('张三'); - -// Reflect.construct 的写法 -const instance = Reflect.construct(Greeting, '张三'); -``` - -**(6)Reflect.getPrototypeOf(obj)** - -`Reflect.getPrototypeOf`方法用于读取对象的`__proto__`属性,对应`Object.getPrototypeOf(obj)`。 - -```javascript -const myObj = new FancyThing(); - -// 旧写法 -Object.getPrototypeOf(myObj) === FancyThing.prototype; - -// 新写法 -Reflect.getPrototypeOf(myObj) === FancyThing.prototype; -``` - -`Reflect.getPrototypeOf`和`Object.getPrototypeOf`的一个区别是,如果第一个参数不是对象(包括`null`和`undefined`),`Object.getPrototypeOf`会将这个参数转为对象,然后再运行,而`Reflect.getPrototypeOf`会报错。 - -```javascript -Object.getPrototypeOf(1) // undefined -Reflect.getPrototypeOf(1) // 报错 -``` - -**(7)Reflect.setPrototypeOf(obj, newProto)** - -`Reflect.setPrototypeOf`方法用于设置对象的`__proto__`属性,对应`Object.setPrototypeOf(obj, newProto)`。 - -```javascript -const myObj = new FancyThing(); - -// 旧写法 -Object.setPrototypeOf(myObj, OtherThing.prototype); - -// 新写法 -Reflect.setPrototypeOf(myObj, OtherThing.prototype); -``` - -如果第一个参数不是对象,`Reflect.setPrototypeOf`和`Object.setPrototypeOf`都会报错。 - -```javascript -Object.setPrototypeOf(1) // 报错 -Reflect.setPrototypeOf(1) // 报错 -``` - -**(8)Reflect.apply(func, thisArg, args)** - -`Reflect.apply`方法等同于`Function.prototype.apply.call(func, thisArg, args)`,用于绑定`this`对象后执行给定函数。 - -一般来说,如果要绑定一个函数的`this`对象,可以这样写`fn.apply(obj, args)`,但是如果函数定义了自己的`apply`方法,就只能写成`Function.prototype.apply.call(fn, obj, args)`,采用`Reflect`对象可以简化这种操作。 - -```javascript -const ages = [11, 33, 12, 54, 18, 96]; - -// 旧写法 -const youngest = Math.min.apply(Math, ages); -const oldest = Math.max.apply(Math, ages); -const type = Object.prototype.toString.call(youngest); - -// 新写法 -const youngest = Reflect.apply(Math.min, Math, ages); -const oldest = Reflect.apply(Math.max, Math, ages); -const type = Reflect.apply(Object.prototype.toString, youngest); -``` - -**(9)Reflect.defineProperty(target, propertyKey, attributes)** - -`Reflect.defineProperty`方法基本等同于`Object.defineProperty`,用来为对象定义属性。未来,后者会被逐渐废除,请从现在开始就使用`Reflect.defineProperty`代替它。 - -```javascript -function MyDate() { - /*…*/ -} - -// 旧写法 -Object.defineProperty(MyDate, 'now', { - value: () => new Date.now() -}); - -// 新写法 -Reflect.defineProperty(MyDate, 'now', { - value: () => new Date.now() -}); -``` - -如果`Reflect.defineProperty`的第一个参数不是对象,就会抛出错误,比如`Reflect.defineProperty(1, 'foo')`。 - -**(10)Reflect.getOwnPropertyDescriptor(target, propertyKey)** - -`Reflect.getOwnPropertyDescriptor`基本等同于`Object.getOwnPropertyDescriptor`,用于得到指定属性的描述对象,将来会替代掉后者。 - -```javascript -var myObject = {}; -Object.defineProperty(myObject, 'hidden', { - value: true, - enumerable: false, -}); - -// 旧写法 -var theDescriptor = Object.getOwnPropertyDescriptor(myObject, 'hidden'); - -// 新写法 -var theDescriptor = Reflect.getOwnPropertyDescriptor(myObject, 'hidden'); -``` - -`Reflect.getOwnPropertyDescriptor`和`Object.getOwnPropertyDescriptor`的一个区别是,如果第一个参数不是对象,`Object.getOwnPropertyDescriptor(1, 'foo')`不报错,返回`undefined`,而`Reflect.getOwnPropertyDescriptor(1, 'foo')`会抛出错误,表示参数非法。 - -**(11)Reflect.isExtensible (target)** - -`Reflect.isExtensible`方法对应`Object.isExtensible`,返回一个布尔值,表示当前对象是否可扩展。 - -```javascript -const myObject = {}; - -// 旧写法 -Object.isExtensible(myObject) // true - -// 新写法 -Reflect.isExtensible(myObject) // true -``` - -如果参数不是对象,`Object.isExtensible`会返回`false`,因为非对象本来就是不可扩展的,而`Reflect.isExtensible`会报错。 - -```javascript -Object.isExtensible(1) // false -Reflect.isExtensible(1) // 报错 -``` - -**(12)Reflect.preventExtensions(target)** - -`Reflect.preventExtensions`对应`Object.preventExtensions`方法,用于让一个对象变为不可扩展。它返回一个布尔值,表示是否操作成功。 - -```javascript -var myObject = {}; - -// 旧写法 -Object.isExtensible(myObject) // true - -// 新写法 -Reflect.preventExtensions(myObject) // true -``` - -如果参数不是对象,`Object.isExtensible`在 ES5 环境报错,在 ES6 环境返回这个参数,而`Reflect.preventExtensions`会报错。 - -```javascript -// ES5 -Object.preventExtensions(1) // 报错 - -// ES6 -Object.preventExtensions(1) // 1 - -// 新写法 -Reflect.preventExtensions(1) // 报错 -``` - -**(13)Reflect.ownKeys (target)** - -`Reflect.ownKeys`方法用于返回对象的所有属性,基本等同于`Object.getOwnPropertyNames`与`Object.getOwnPropertySymbols`之和。 - -```javascript -var myObject = { - foo: 1, - bar: 2, - [Symbol.for('baz')]: 3, - [Symbol.for('bing')]: 4, -}; - -// 旧写法 -Object.getOwnPropertyNames(myObject) -// ['foo', 'bar'] - -Object.getOwnPropertySymbols(myObject) -//[Symbol.for('baz'), Symbol.for('bing')] - -// 新写法 -Reflect.ownKeys(myObject) -// ['foo', 'bar', Symbol.for('baz'), Symbol.for('bing')] -``` - -## 实例:使用 Proxy 实现观察者模式 - -观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。 - -```javascript -const person = observable({ - name: '张三', - age: 20 -}); - -function print() { - console.log(`${person.name}, ${person.age}`) -} - -observe(print); -person.name = '李四'; -// 输出 -// 李四, 20 -``` - -上面代码中,数据对象`person`是观察目标,函数`print`是观察者。一旦数据对象发生变化,`print`就会自动执行。 - -下面,使用 Proxy 写一个观察者模式的最简单实现,即实现`observable`和`observe`这两个函数。思路是`observable`函数返回一个原始对象的 Proxy 代理,拦截赋值操作,触发充当观察者的各个函数。 - -```javascript -const queuedObservers = new Set(); - -const observe = fn => queuedObservers.add(fn); -const observable = obj => new Proxy(obj, {set}); - -function set(target, key, value, receiver) { - const result = Reflect.set(target, key, value, receiver); - queuedObservers.forEach(observer => observer()); - return result; -} -``` - -上面代码中,先定义了一个`Set`集合,所有观察者函数都放进这个集合。然后,`observable`函数返回原始对象的代理,拦截赋值操作。拦截函数`set`之中,会自动执行所有观察者。 - diff --git a/docs/reflect.md b/docs/reflect.md new file mode 100644 index 0000000..0bf67e7 --- /dev/null +++ b/docs/reflect.md @@ -0,0 +1,458 @@ +# Reflect + +## 概述 + +`Reflect`对象与`Proxy`对象一样,也是 ES6 为了操作对象而提供的新 API。`Reflect`对象的设计目的有这样几个。 + +(1) 将`Object`对象的一些明显属于语言内部的方法(比如`Object.defineProperty`),放到`Reflect`对象上。现阶段,某些方法同时在`Object`和`Reflect`对象上部署,未来的新方法将只部署在`Reflect`对象上。也就是说,从`Reflect`对象上可以拿到语言内部的方法。 + +(2) 修改某些`Object`方法的返回结果,让其变得更合理。比如,`Object.defineProperty(obj, name, desc)`在无法定义属性时,会抛出一个错误,而`Reflect.defineProperty(obj, name, desc)`则会返回`false`。 + +```javascript +// 老写法 +try { + Object.defineProperty(target, property, attributes); + // success +} catch (e) { + // failure +} + +// 新写法 +if (Reflect.defineProperty(target, property, attributes)) { + // success +} else { + // failure +} +``` + +(3) 让`Object`操作都变成函数行为。某些`Object`操作是命令式,比如`name in obj`和`delete obj[name]`,而`Reflect.has(obj, name)`和`Reflect.deleteProperty(obj, name)`让它们变成了函数行为。 + +```javascript +// 老写法 +'assign' in Object // true + +// 新写法 +Reflect.has(Object, 'assign') // true +``` + +(4)`Reflect`对象的方法与`Proxy`对象的方法一一对应,只要是`Proxy`对象的方法,就能在`Reflect`对象上找到对应的方法。这就让`Proxy`对象可以方便地调用对应的`Reflect`方法,完成默认行为,作为修改行为的基础。也就是说,不管`Proxy`怎么修改默认行为,你总可以在`Reflect`上获取默认行为。 + +```javascript +Proxy(target, { + set: function(target, name, value, receiver) { + var success = Reflect.set(target,name, value, receiver); + if (success) { + log('property ' + name + ' on ' + target + ' set to ' + value); + } + return success; + } +}); +``` + +上面代码中,`Proxy`方法拦截`target`对象的属性赋值行为。它采用`Reflect.set`方法将值赋值给对象的属性,确保完成原有的行为,然后再部署额外的功能。 + +下面是另一个例子。 + +```javascript +var loggedObj = new Proxy(obj, { + get(target, name) { + console.log('get', target, name); + return Reflect.get(target, name); + }, + deleteProperty(target, name) { + console.log('delete' + name); + return Reflect.deleteProperty(target, name); + }, + has(target, name) { + console.log('has' + name); + return Reflect.has(target, name); + } +}); +``` + +上面代码中,每一个`Proxy`对象的拦截操作(`get`、`delete`、`has`),内部都调用对应的`Reflect`方法,保证原生行为能够正常执行。添加的工作,就是将每一个操作输出一行日志。 + +有了`Reflect`对象以后,很多操作会更易读。 + +```javascript +// 老写法 +Function.prototype.apply.call(Math.floor, undefined, [1.75]) // 1 + +// 新写法 +Reflect.apply(Math.floor, undefined, [1.75]) // 1 +``` + +## 静态方法 + +`Reflect`对象一共有13个静态方法。 + +- Reflect.apply(target,thisArg,args) +- Reflect.construct(target,args) +- Reflect.get(target,name,receiver) +- Reflect.set(target,name,value,receiver) +- Reflect.defineProperty(target,name,desc) +- Reflect.deleteProperty(target,name) +- Reflect.has(target,name) +- Reflect.ownKeys(target) +- Reflect.isExtensible(target) +- Reflect.preventExtensions(target) +- Reflect.getOwnPropertyDescriptor(target, name) +- Reflect.getPrototypeOf(target) +- Reflect.setPrototypeOf(target, prototype) + +上面这些方法的作用,大部分与`Object`对象的同名方法的作用都是相同的,而且它与`Proxy`对象的方法是一一对应的。下面是对它们的解释。 + +### Reflect.get(target, name, receiver) + +`Reflect.get`方法查找并返回`target`对象的`name`属性,如果没有该属性,则返回`undefined`。 + +```javascript +var myObject = { + foo: 1, + bar: 2, + get baz() { + return this.foo + this.bar; + }, +} + +Reflect.get(myObject, 'foo') // 1 +Reflect.get(myObject, 'bar') // 2 +Reflect.get(myObject, 'baz') // 3 +``` + +如果`name`属性部署了读取函数(getter),则读取函数的`this`绑定`receiver`。 + +```javascript +var myObject = { + foo: 1, + bar: 2, + get baz() { + return this.foo + this.bar; + }, +}; + +var myReceiverObject = { + foo: 4, + bar: 4, +}; + +Reflect.get(myObject, 'baz', myReceiverObject) // 8 +``` + +如果第一个参数不是对象,`Reflect.get`方法会报错。 + +```javascript +Reflect.get(1, 'foo') // 报错 +Reflect.get(false, 'foo') // 报错 +``` + +### Reflect.set(target, name, value, receiver) + +`Reflect.set`方法设置`target`对象的`name`属性等于`value`。 + +```javascript +var myObject = { + foo: 1, + set bar(value) { + return this.foo = value; + }, +} + +myObject.foo // 1 + +Reflect.set(myObject, 'foo', 2); +myObject.foo // 2 + +Reflect.set(myObject, 'bar', 3) +myObject.foo // 3 +``` + +如果`name`属性设置了赋值函数,则赋值函数的`this`绑定`receiver`。 + +```javascript +var myObject = { + foo: 4, + set bar(value) { + return this.foo = value; + }, +}; + +var myReceiverObject = { + foo: 0, +}; + +Reflect.set(myObject, 'bar', 1, myReceiverObject); +myObject.foo // 4 +myReceiverObject.foo // 1 +``` + +如果第一个参数不是对象,`Reflect.set`会报错。 + +```javascript +Reflect.set(1, 'foo', {}) // 报错 +Reflect.set(false, 'foo', {}) // 报错 +``` + +### Reflect.has(obj, name) + +`Reflect.has`方法对应`name in obj`里面的`in`运算符。 + +```javascript +var myObject = { + foo: 1, +}; + +// 旧写法 +'foo' in myObject // true + +// 新写法 +Reflect.has(myObject, 'foo') // true +``` + +如果第一个参数不是对象,`Reflect.has`和`in`运算符都会报错。 + +### Reflect.deleteProperty(obj, name) + +`Reflect.deleteProperty`方法等同于`delete obj[name]`,用于删除对象的属性。 + +```javascript +const myObj = { foo: 'bar' }; + +// 旧写法 +delete myObj.foo; + +// 新写法 +Reflect.deleteProperty(myObj, 'foo'); +``` + +### Reflect.construct(target, args) + +`Reflect.construct`方法等同于`new target(...args)`,这提供了一种不使用`new`,来调用构造函数的方法。 + +```javascript +function Greeting(name) { + this.name = name; +} + +// new 的写法 +const instance = new Greeting('张三'); + +// Reflect.construct 的写法 +const instance = Reflect.construct(Greeting, '张三'); +``` + +### Reflect.getPrototypeOf(obj) + +`Reflect.getPrototypeOf`方法用于读取对象的`__proto__`属性,对应`Object.getPrototypeOf(obj)`。 + +```javascript +const myObj = new FancyThing(); + +// 旧写法 +Object.getPrototypeOf(myObj) === FancyThing.prototype; + +// 新写法 +Reflect.getPrototypeOf(myObj) === FancyThing.prototype; +``` + +`Reflect.getPrototypeOf`和`Object.getPrototypeOf`的一个区别是,如果第一个参数不是对象(包括`null`和`undefined`),`Object.getPrototypeOf`会将这个参数转为对象,然后再运行,而`Reflect.getPrototypeOf`会报错。 + +```javascript +Object.getPrototypeOf(1) // undefined +Reflect.getPrototypeOf(1) // 报错 +``` + +### Reflect.setPrototypeOf(obj, newProto) + +`Reflect.setPrototypeOf`方法用于设置对象的`__proto__`属性,对应`Object.setPrototypeOf(obj, newProto)`。 + +```javascript +const myObj = new FancyThing(); + +// 旧写法 +Object.setPrototypeOf(myObj, OtherThing.prototype); + +// 新写法 +Reflect.setPrototypeOf(myObj, OtherThing.prototype); +``` + +如果第一个参数不是对象,`Reflect.setPrototypeOf`和`Object.setPrototypeOf`都会报错。 + +```javascript +Object.setPrototypeOf(1) // 报错 +Reflect.setPrototypeOf(1) // 报错 +``` + +### Reflect.apply(func, thisArg, args) + +`Reflect.apply`方法等同于`Function.prototype.apply.call(func, thisArg, args)`,用于绑定`this`对象后执行给定函数。 + +一般来说,如果要绑定一个函数的`this`对象,可以这样写`fn.apply(obj, args)`,但是如果函数定义了自己的`apply`方法,就只能写成`Function.prototype.apply.call(fn, obj, args)`,采用`Reflect`对象可以简化这种操作。 + +```javascript +const ages = [11, 33, 12, 54, 18, 96]; + +// 旧写法 +const youngest = Math.min.apply(Math, ages); +const oldest = Math.max.apply(Math, ages); +const type = Object.prototype.toString.call(youngest); + +// 新写法 +const youngest = Reflect.apply(Math.min, Math, ages); +const oldest = Reflect.apply(Math.max, Math, ages); +const type = Reflect.apply(Object.prototype.toString, youngest); +``` + +### Reflect.defineProperty(target, propertyKey, attributes) + +`Reflect.defineProperty`方法基本等同于`Object.defineProperty`,用来为对象定义属性。未来,后者会被逐渐废除,请从现在开始就使用`Reflect.defineProperty`代替它。 + +```javascript +function MyDate() { + /*…*/ +} + +// 旧写法 +Object.defineProperty(MyDate, 'now', { + value: () => new Date.now() +}); + +// 新写法 +Reflect.defineProperty(MyDate, 'now', { + value: () => new Date.now() +}); +``` + +如果`Reflect.defineProperty`的第一个参数不是对象,就会抛出错误,比如`Reflect.defineProperty(1, 'foo')`。 + +### Reflect.getOwnPropertyDescriptor(target, propertyKey) + +`Reflect.getOwnPropertyDescriptor`基本等同于`Object.getOwnPropertyDescriptor`,用于得到指定属性的描述对象,将来会替代掉后者。 + +```javascript +var myObject = {}; +Object.defineProperty(myObject, 'hidden', { + value: true, + enumerable: false, +}); + +// 旧写法 +var theDescriptor = Object.getOwnPropertyDescriptor(myObject, 'hidden'); + +// 新写法 +var theDescriptor = Reflect.getOwnPropertyDescriptor(myObject, 'hidden'); +``` + +`Reflect.getOwnPropertyDescriptor`和`Object.getOwnPropertyDescriptor`的一个区别是,如果第一个参数不是对象,`Object.getOwnPropertyDescriptor(1, 'foo')`不报错,返回`undefined`,而`Reflect.getOwnPropertyDescriptor(1, 'foo')`会抛出错误,表示参数非法。 + +### Reflect.isExtensible (target) + +`Reflect.isExtensible`方法对应`Object.isExtensible`,返回一个布尔值,表示当前对象是否可扩展。 + +```javascript +const myObject = {}; + +// 旧写法 +Object.isExtensible(myObject) // true + +// 新写法 +Reflect.isExtensible(myObject) // true +``` + +如果参数不是对象,`Object.isExtensible`会返回`false`,因为非对象本来就是不可扩展的,而`Reflect.isExtensible`会报错。 + +```javascript +Object.isExtensible(1) // false +Reflect.isExtensible(1) // 报错 +``` + +### Reflect.preventExtensions(target) + +`Reflect.preventExtensions`对应`Object.preventExtensions`方法,用于让一个对象变为不可扩展。它返回一个布尔值,表示是否操作成功。 + +```javascript +var myObject = {}; + +// 旧写法 +Object.isExtensible(myObject) // true + +// 新写法 +Reflect.preventExtensions(myObject) // true +``` + +如果参数不是对象,`Object.isExtensible`在 ES5 环境报错,在 ES6 环境返回这个参数,而`Reflect.preventExtensions`会报错。 + +```javascript +// ES5 +Object.preventExtensions(1) // 报错 + +// ES6 +Object.preventExtensions(1) // 1 + +// 新写法 +Reflect.preventExtensions(1) // 报错 +``` + +### Reflect.ownKeys (target) + +`Reflect.ownKeys`方法用于返回对象的所有属性,基本等同于`Object.getOwnPropertyNames`与`Object.getOwnPropertySymbols`之和。 + +```javascript +var myObject = { + foo: 1, + bar: 2, + [Symbol.for('baz')]: 3, + [Symbol.for('bing')]: 4, +}; + +// 旧写法 +Object.getOwnPropertyNames(myObject) +// ['foo', 'bar'] + +Object.getOwnPropertySymbols(myObject) +//[Symbol.for('baz'), Symbol.for('bing')] + +// 新写法 +Reflect.ownKeys(myObject) +// ['foo', 'bar', Symbol.for('baz'), Symbol.for('bing')] +``` + +## 实例:使用 Proxy 实现观察者模式 + +观察者模式(Observer mode)指的是函数自动观察数据对象,一旦对象有变化,函数就会自动执行。 + +```javascript +const person = observable({ + name: '张三', + age: 20 +}); + +function print() { + console.log(`${person.name}, ${person.age}`) +} + +observe(print); +person.name = '李四'; +// 输出 +// 李四, 20 +``` + +上面代码中,数据对象`person`是观察目标,函数`print`是观察者。一旦数据对象发生变化,`print`就会自动执行。 + +下面,使用 Proxy 写一个观察者模式的最简单实现,即实现`observable`和`observe`这两个函数。思路是`observable`函数返回一个原始对象的 Proxy 代理,拦截赋值操作,触发充当观察者的各个函数。 + +```javascript +const queuedObservers = new Set(); + +const observe = fn => queuedObservers.add(fn); +const observable = obj => new Proxy(obj, {set}); + +function set(target, key, value, receiver) { + const result = Reflect.set(target, key, value, receiver); + queuedObservers.forEach(observer => observer()); + return result; +} +``` + +上面代码中,先定义了一个`Set`集合,所有观察者函数都放进这个集合。然后,`observable`函数返回原始对象的代理,拦截赋值操作。拦截函数`set`之中,会自动执行所有观察者。 + diff --git a/sidebar.md b/sidebar.md index cd993b5..48d5dfa 100644 --- a/sidebar.md +++ b/sidebar.md @@ -17,7 +17,8 @@ 1. [对象的扩展](#docs/object) 1. [Symbol](#docs/symbol) 1. [Set和Map数据结构](#docs/set-map) -1. [Proxy和Reflect](#docs/proxy) +1. [Proxy](#docs/proxy) +1. [Reflect](#docs/reflect) 1. [Iterator和for...of循环](#docs/iterator) 1. [Generator函数](#docs/generator) 1. [Promise对象](#docs/promise)