mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-24 10:22:23 +00:00
edit docs/object/observe
This commit is contained in:
parent
52386d10f6
commit
a49dcfd0a6
@ -206,3 +206,9 @@ var a3 = ["x3", "y3"];
|
||||
上面代码使用了数组推导,对字符串进行处理。
|
||||
|
||||
数组推导需要注意的地方是,新数组会立即在内存中生成。这时,如果原数组是一个很大的数组,将会非常耗费内存。
|
||||
|
||||
## Array.observe(),Array.unobserve()
|
||||
|
||||
这两个方法用于监听(取消监听)数组的变化,指定回调函数。
|
||||
|
||||
它们的用法与Object.observe()和Object.unobserve()完全一致,请参阅《对象的扩展》一章。唯一的区别是,对象可监听的变化一共有六种,而数组只有四种:add、update、delete、splice(数组的length属性发生变化)。
|
||||
|
@ -302,3 +302,48 @@ proxy.age // 抛出一个错误
|
||||
```
|
||||
|
||||
上面代码表示,如果访问目标对象不存在的属性,会抛出一个错误。如果没有这个拦截函数,访问不存在的属性,只会返回undefined。
|
||||
|
||||
## Object.observe(),Object.unobserve()
|
||||
|
||||
Object.observe()用来监听对象的变化。一旦监听对象发生变化,就会触发回调函数。
|
||||
|
||||
```javascript
|
||||
|
||||
var o = {};
|
||||
|
||||
function observer(changes){
|
||||
changes.forEach(function(change) {
|
||||
console.log('发生变动的属性:' + change.name);
|
||||
console.log('变动前的值:' + change.oldValue);
|
||||
console.log('变动后的值:' + change.object[change.name]);
|
||||
console.log('变动类型:' + change.type);
|
||||
});
|
||||
}
|
||||
|
||||
Object.observe(o, observer);
|
||||
|
||||
```
|
||||
|
||||
上面代码中,Object.observe()监听一个空对象o,一旦o发生变化(比如新增或删除一个属性),就会触发回调函数。
|
||||
|
||||
Object.observe()指定的回调函数,接受一个数组(changes)作为参数。该数组的成员与对象的变化一一对应,也就是说,对象发生多少个变化,该数组就有多少个成员。每个成员是一个对象(change),它的name属性表示发生变化源对象的属性名,oldValue属性表示发生变化前的值,object属性指向变动后的源对象,type属性表示变化的种类,目前共支持六种变化:add、update、delete、setPrototype、reconfigure(属性的attributes对象发生变化)、preventExtensions(当一个对象变得不可扩展时,也就不必再观察了)。
|
||||
|
||||
Object.observe()还可以接受第三个参数,用来指定监听的事件种类。
|
||||
|
||||
```javascript
|
||||
|
||||
Object.observe(o, observer, ['delete']);
|
||||
|
||||
```
|
||||
|
||||
上面的代码表示,只在发生delete事件时,才会调用回调函数。
|
||||
|
||||
Object.unobserve()用来取消监听。
|
||||
|
||||
```javascript
|
||||
|
||||
Object.unobserve(o, observer);
|
||||
|
||||
```
|
||||
|
||||
注意,Object.observe()和Object.unobserve()这两个方法不属于ES6,而是属于ES7的一部分,Chrome 36已经开始支持了。
|
||||
|
@ -25,6 +25,7 @@
|
||||
- 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.observer()的概念
|
||||
|
||||
## Generator
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user