1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-24 18:32:22 +00:00

修改object/proxy

This commit is contained in:
Ruan Yifeng 2014-12-30 14:01:25 +08:00
parent 2556bf8962
commit fa53528312
2 changed files with 107 additions and 19 deletions

View File

@ -504,9 +504,11 @@ Reflect.ownKeys(obj)
## Proxy
所谓Proxy可以理解成在目标对象之前架设一层“拦截”外界对该对象的访问都必须先通过这层拦截因此提供了一种机制可以对外界的访问进行过滤和改写
Proxy用于修改某些操作的默认行为等同于在语言层面做出修改所以属于一种“元编程”meta programming即对编程语言进行编程
ES6原生提供Proxy构造函数用来生成proxy实例对象。
Proxy可以理解成在目标对象之前架设一层“拦截”外界对该对象的访问都必须先通过这层拦截因此提供了一种机制可以对外界的访问进行过滤和改写。proxy这个词的原意是代理用在这里表示由它来“代理”某些操作。
ES6原生提供Proxy构造函数用来生成Proxy实例。
```javascript
@ -522,9 +524,31 @@ 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
@ -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()

View File

@ -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 6s 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