Skip to content

Commit a49dcfd

Browse files
committed
edit docs/object/observe
1 parent 52386d1 commit a49dcfd

File tree

3 files changed

+52
-0
lines changed

3 files changed

+52
-0
lines changed

docs/array.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -206,3 +206,9 @@ var a3 = ["x3", "y3"];
206206
上面代码使用了数组推导,对字符串进行处理。
207207

208208
数组推导需要注意的地方是,新数组会立即在内存中生成。这时,如果原数组是一个很大的数组,将会非常耗费内存。
209+
210+
## Array.observe(),Array.unobserve()
211+
212+
这两个方法用于监听(取消监听)数组的变化,指定回调函数。
213+
214+
它们的用法与Object.observe()和Object.unobserve()完全一致,请参阅《对象的扩展》一章。唯一的区别是,对象可监听的变化一共有六种,而数组只有四种:add、update、delete、splice(数组的length属性发生变化)。

docs/object.md

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,3 +302,48 @@ proxy.age // 抛出一个错误
302302
```
303303

304304
上面代码表示,如果访问目标对象不存在的属性,会抛出一个错误。如果没有这个拦截函数,访问不存在的属性,只会返回undefined。
305+
306+
## Object.observe(),Object.unobserve()
307+
308+
Object.observe()用来监听对象的变化。一旦监听对象发生变化,就会触发回调函数。
309+
310+
```javascript
311+
312+
var o = {};
313+
314+
function observer(changes){
315+
changes.forEach(function(change) {
316+
console.log('发生变动的属性:' + change.name);
317+
console.log('变动前的值:' + change.oldValue);
318+
console.log('变动后的值:' + change.object[change.name]);
319+
console.log('变动类型:' + change.type);
320+
});
321+
}
322+
323+
Object.observe(o, observer);
324+
325+
```
326+
327+
上面代码中,Object.observe()监听一个空对象o,一旦o发生变化(比如新增或删除一个属性),就会触发回调函数。
328+
329+
Object.observe()指定的回调函数,接受一个数组(changes)作为参数。该数组的成员与对象的变化一一对应,也就是说,对象发生多少个变化,该数组就有多少个成员。每个成员是一个对象(change),它的name属性表示发生变化源对象的属性名,oldValue属性表示发生变化前的值,object属性指向变动后的源对象,type属性表示变化的种类,目前共支持六种变化:add、update、delete、setPrototype、reconfigure(属性的attributes对象发生变化)、preventExtensions(当一个对象变得不可扩展时,也就不必再观察了)。
330+
331+
Object.observe()还可以接受第三个参数,用来指定监听的事件种类。
332+
333+
```javascript
334+
335+
Object.observe(o, observer, ['delete']);
336+
337+
```
338+
339+
上面的代码表示,只在发生delete事件时,才会调用回调函数。
340+
341+
Object.unobserve()用来取消监听。
342+
343+
```javascript
344+
345+
Object.unobserve(o, observer);
346+
347+
```
348+
349+
注意,Object.observe()和Object.unobserve()这两个方法不属于ES6,而是属于ES7的一部分,Chrome 36已经开始支持了。

docs/reference.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
- Axel Rauschmayer, [Handling required parameters in ECMAScript 6](http://www.2ality.com/2014/04/required-parameters-es6.html)
2626
- Axel Rauschmayer, [ECMAScript 6’s new array methods](http://www.2ality.com/2014/05/es6-array-methods.html): 对ES6新增的数组方法的全面介绍
2727
- Nicholas C. Zakas, [Creating defensive objects with ES6 proxies](http://www.nczonline.net/blog/2014/04/22/creating-defensive-objects-with-es6-proxies/)
28+
- Addy Osmani, [Data-binding Revolutions with Object.observe()](http://www.html5rocks.com/en/tutorials/es7/observe/): 介绍Object.observer()的概念
2829

2930
## Generator
3031

0 commit comments

Comments
 (0)