1
0
mirror of https://github.com/ruanyf/es6tutorial.git synced 2025-05-29 05:42:20 +00:00

delete object/Object.observe

This commit is contained in:
ruanyf 2015-12-01 17:24:36 +08:00
parent 85f0cfeb3f
commit 4929da48d9
2 changed files with 0 additions and 94 deletions

View File

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

View File

@ -666,93 +666,6 @@ Object.getPrototypeOf(rec) === Rectangle.prototype
// false // 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转码器已经支持这项功能。 目前ES7有一个[提案](https://github.com/sebmarkbage/ecmascript-rest-spread)将rest参数/扩展运算符(...引入对象。Babel转码器已经支持这项功能。