From a49dcfd0a6491779803a6a52a7ad872b1da481fa Mon Sep 17 00:00:00 2001 From: ruanyf Date: Thu, 22 May 2014 08:18:09 +0800 Subject: [PATCH] edit docs/object/observe --- docs/array.md | 6 ++++++ docs/object.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ docs/reference.md | 1 + 3 files changed, 52 insertions(+) diff --git a/docs/array.md b/docs/array.md index 69b3e35..f2b0b3c 100644 --- a/docs/array.md +++ b/docs/array.md @@ -206,3 +206,9 @@ var a3 = ["x3", "y3"]; 上面代码使用了数组推导，对字符串进行处理。 数组推导需要注意的地方是，新数组会立即在内存中生成。这时，如果原数组是一个很大的数组，将会非常耗费内存。 + +## Array.observe()，Array.unobserve() + +这两个方法用于监听（取消监听）数组的变化，指定回调函数。 + +它们的用法与Object.observe()和Object.unobserve()完全一致，请参阅《对象的扩展》一章。唯一的区别是，对象可监听的变化一共有六种，而数组只有四种：add、update、delete、splice（数组的length属性发生变化）。 diff --git a/docs/object.md b/docs/object.md index c32eeec..430f8aa 100644 --- a/docs/object.md +++ b/docs/object.md @@ -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已经开始支持了。 diff --git a/docs/reference.md b/docs/reference.md index 5fa05ca..6d2df3a 100644 --- a/docs/reference.md +++ b/docs/reference.md @@ -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