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

edit docs/object/observe

This commit is contained in:
ruanyf 2014-05-22 08:18:09 +08:00
parent 52386d10f6
commit a49dcfd0a6
3 changed files with 52 additions and 0 deletions

View File

@ -206,3 +206,9 @@ var a3 = ["x3", "y3"];
上面代码使用了数组推导,对字符串进行处理。
数组推导需要注意的地方是,新数组会立即在内存中生成。这时,如果原数组是一个很大的数组,将会非常耗费内存。
## Array.observe()Array.unobserve()
这两个方法用于监听(取消监听)数组的变化,指定回调函数。
它们的用法与Object.observe()和Object.unobserve()完全一致请参阅《对象的扩展》一章。唯一的区别是对象可监听的变化一共有六种而数组只有四种add、update、delete、splice数组的length属性发生变化

View File

@ -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已经开始支持了。

View File

@ -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 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.observer()的概念
## Generator