diff --git a/docs/object.md b/docs/object.md index 8a030e6..11408ce 100644 --- a/docs/object.md +++ b/docs/object.md @@ -504,16 +504,18 @@ Reflect.ownKeys(obj) ## Proxy -所谓Proxy,可以理解成在目标对象之前,架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。 +Proxy用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。 -ES6原生提供Proxy构造函数,用来生成proxy实例对象。 +Proxy可以理解成在目标对象之前,架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。proxy这个词的原意是代理,用在这里表示由它来“代理”某些操作。 + +ES6原生提供Proxy构造函数,用来生成Proxy实例。 ```javascript var proxy = new Proxy({}, { - get: function(target, property) { - return 35; - } + get: function(target, property) { + return 35; + } }); proxy.time // 35 @@ -522,24 +524,46 @@ proxy.title // 35 ``` -上面代码就是Proxy构造函数使用实例,它接受两个参数,第一个是所要代理的目标对象(上例是一个空对象),第二个是拦截函数,它有一个get方法,用来拦截对目标对象的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到,由于拦截函数总是返回35,所以访问任何属性都得到35。 +作为构造函数,Proxy接受两个参数。第一个参数是所要代理的目标对象(上例是一个空对象),即如果没有Proxy的介入,操作原来要访问的就是这个对象;第二个参数是一个设置对象,对于每一个被代理的操作,需要提供一个对应的处理函数,该函数将拦截对应的操作。比如,上面代码中,设置对象有一个get方法,用来拦截对目标对象属性的访问请求。get方法的两个参数分别是目标对象和所要访问的属性。可以看到,由于拦截函数总是返回35,所以访问任何属性都得到35。 -下面是另一个拦截函数的例子。 +注意,要使得Proxy起作用,必须针对Proxy实例(上例是proxy对象)进行操作,而不是针对目标对象(上例是空对象)进行操作。 + +Proxy实例也可以作为其他对象的原型对象。 + +```javascript + +var proxy = new Proxy({}, { + get: function(target, property) { + return 35; + } +}); + +let obj = Object.create(proxy); + +obj.time // 35 + +``` + +上面代码中,proxy对象是obj对象的原型,obj对象本身并没有time属性,所有根据原型链,会在proxy对象上读取该属性,导致被拦截。 + +对于没有设置拦截的操作,则直接落在目标函数上,按照原先的方式产生结果。 + +下面是另一个拦截读取操作的例子。 ```javascript var person = { - name: "张三" + name: "张三" }; var proxy = new Proxy(person, { - get: function(target, property) { - if (property in target) { - return target[property]; - } else { - throw new ReferenceError("Property \"" + property + "\" does not exist."); - } - } + get: function(target, property) { + if (property in target) { + return target[property]; + } else { + throw new ReferenceError("Property \"" + property + "\" does not exist."); + } + } }); proxy.name // "张三" @@ -579,7 +603,67 @@ person.age = 300 // 报错 ``` -上面代码中,由于设置了存值函数set,任何不符合要求的age属性赋值,都会抛出一个错误。 +上面代码中,由于设置了存值函数set,任何不符合要求的age属性赋值,都会抛出一个错误。利用set方法,还可以数据绑定,即每当对象发生变化时,会自动更新DOM。 + +ownKeys方法用来拦截Object.keys()操作。 + +```javascript + +let target = {}; + +let handler = { + ownKeys(target) { + return ['hello', 'world']; + } +}; + +let proxy = new Proxy(target, handler); + +Object.keys(proxy) +// [ 'hello', 'world' ] + +``` + +上面代码拦截了对于target对象的Object.keys()操作,返回预先设定的数组。 + +Proxy支持的拦截操作一览。 + +- defineProperty(target, propKey, propDesc):返回一个布尔值,拦截Object.defineProperty(proxy, propKey, propDesc) +- deleteProperty(target, propKey) :返回一个布尔值,拦截delete proxy[propKey] +- enumerate(target):返回一个遍历器,拦截for (x in proxy) +- get(target, propKey, receiver):返回类型不限,拦截对象属性的读取 +- getOwnPropertyDescriptor(target, propKey) :返回属性的描述对象,拦截Object.getOwnPropertyDescriptor(proxy, propKey) +- getPrototypeOf(target) :返回一个对象,拦截Object.getPrototypeOf(proxy) +- has(target, propKey):返回一个布尔值,拦截propKey in proxy +- isExtensible(target):返回一个布尔值,拦截Object.isExtensible(proxy) +- ownKeys(target):返回一个数组,拦截Object.getOwnPropertyPropertyNames(proxy)、Object.getOwnPropertyPropertySymbols(proxy)、Object.keys(proxy) +- preventExtensions(target):返回一个布尔值,拦截Object.preventExtensions(proxy) +- set(target, propKey, value, receiver):返回一个布尔值,拦截对象属性的设置 +- setPrototypeOf(target, proto):返回一个布尔值,拦截Object.setPrototypeOf(proxy, proto) + +如果目标对象是函数,那么还有两种额外操作可以拦截。 + +- apply方法:拦截Proxy实例作为函数调用的操作,比如proxy(···)、proxy.call(···)、proxy.apply(···)。 +- construct方法:拦截Proxy实例作为构造函数调用的操作,比如new proxy(···)。 + +Proxy.revocable方法返回一个可取消的Proxy实例。 + +```javascript + +let target = {}; +let handler = {}; + +let {proxy, revoke} = Proxy.revocable(target, handler); + +proxy.foo = 123; +proxy.foo // 123 + +revoke(); +proxy.foo // TypeError: Revoked + +``` + +Proxy.revocable方法返回一个对象,该对象的proxy属性是Proxy实例,revoke属性是一个函数,可以取消Proxy实例。上面代码中,当执行revoke函数之后,再访问Proxy实例,就会抛出一个错误。 ## Object.observe(),Object.unobserve() diff --git a/docs/reference.md b/docs/reference.md index d8402bb..d0fec44 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -28,13 +28,17 @@ - Jack Franklin, [Real Life ES6 - Arrow Functions](http://javascriptplayground.com/blog/2014/04/real-life-es6-arrow-fn/) - Axel Rauschmayer, [Handling required parameters in ECMAScript 6](http://www.2ality.com/2014/04/required-parameters-es6.html) - Axel Rauschmayer, [ECMAScript 6’s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 对ES6新增的数组方法的全面介绍 -- Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/) -- Addy Osmani, [Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/): 介绍Object.observe()的概念 -- Sella Rafaeli, [Native JavaScript Data-Binding](http://www.sellarafaeli.com/blog/native_javascript_data_binding): 如何使用Object.observe方法,实现数据对象与DOM对象的双向绑定 - Dmitry Soshnikov, [ES6 Notes: Default values of parameters](http://dmitrysoshnikov.com/ecmascript/es6-notes-default-values-of-parameters/): 介绍参数的默认值 - Mozilla Developer Network, [WeakSet](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakSet):介绍WeakSet数据结构 - Mathias Bynens, [Unicode-aware regular expressions in ES6](https://mathiasbynens.be/notes/es6-unicode-regex): 详细介绍正则表达式的u修饰符 + +## Object + +- Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/) +- Addy Osmani, [Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/): 介绍Object.observe()的概念 +- Sella Rafaeli, [Native JavaScript Data-Binding](http://www.sellarafaeli.com/blog/native_javascript_data_binding): 如何使用Object.observe方法,实现数据对象与DOM对象的双向绑定 - Axel Rauschmayer, [Symbols in ECMAScript 6](http://www.2ality.com/2014/12/es6-symbols.html): Symbol简介 +- Axel Rauschmayer, [Meta programming with ECMAScript 6 proxies](http://www.2ality.com/2014/12/es6-proxies.html): Proxy详解 ## Iterator和Generator