diff --git a/docs/array.md b/docs/array.md index b4c0607..a544a5d 100644 --- a/docs/array.md +++ b/docs/array.md @@ -601,10 +601,3 @@ var a3 = ['x3', 'y3']; 数组推导需要注意的地方是,新数组会立即在内存中生成。这时,如果原数组是一个很大的数组,将会非常耗费内存。 -## Array.observe(),Array.unobserve() - -这两个方法用于监听(取消监听)数组的变化,指定回调函数。 - -它们的用法与`Object.observe`和`Object.unobserve`方法完全一致,也属于ES7的一部分,请参阅《对象的扩展》一章。 - -唯一的区别是,对象可监听的变化一共有六种,而数组只有四种:`add`、`update`、`delete`、`splice`(数组的`length`属性发生变化)。 diff --git a/docs/object.md b/docs/object.md index ff1f6a7..b6eb727 100644 --- a/docs/object.md +++ b/docs/object.md @@ -666,93 +666,6 @@ Object.getPrototypeOf(rec) === Rectangle.prototype // false ``` -## Object.observe(),Object.unobserve() - -Object.observe方法用来监听对象(以及数组)的变化。一旦监听对象发生变化,就会触发回调函数。 - -```javascript -var user = {}; -Object.observe(user, function(changes){ - changes.forEach(function(change) { - user.fullName = user.firstName+" "+user.lastName; - }); -}); - -user.firstName = 'Michael'; -user.lastName = 'Jackson'; -user.fullName // 'Michael Jackson' -``` - -上面代码中,Object.observer方法监听user对象。一旦该对象发生变化,就自动生成fullName属性。 - -一般情况下,Object.observe方法接受两个参数,第一个参数是监听的对象,第二个函数是一个回调函数。一旦监听对象发生变化(比如新增或删除一个属性),就会触发这个回调函数。很明显,利用这个方法可以做很多事情,比如自动更新DOM。 - -```javascript -var div = $("#foo"); - -Object.observe(user, function(changes){ - changes.forEach(function(change) { - var fullName = user.firstName+" "+user.lastName; - div.text(fullName); - }); -}); -``` - -上面代码中,只要user对象发生变化,就会自动更新DOM。如果配合jQuery的change方法,就可以实现数据对象与DOM对象的双向自动绑定。 - -回调函数的changes参数是一个数组,代表对象发生的变化。下面是一个更完整的例子。 - -```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方法指定的回调函数,接受一个数组(changes)作为参数。该数组的成员与对象的变化一一对应,也就是说,对象发生多少个变化,该数组就有多少个成员。每个成员是一个对象(change),它的name属性表示发生变化源对象的属性名,oldValue属性表示发生变化前的值,object属性指向变动后的源对象,type属性表示变化的种类。基本上,change对象是下面的样子。 - -```javascript -var change = { - object: {...}, - type: 'update', - name: 'p2', - oldValue: 'Property 2' -} -``` - -Object.observe方法目前共支持监听六种变化。 - -- 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浏览器从33版起就已经支持。 - ## 对象的扩展运算符 目前,ES7有一个[提案](https://github.com/sebmarkbage/ecmascript-rest-spread),将rest参数/扩展运算符(...)引入对象。Babel转码器已经支持这项功能。