@@ -666,93 +666,6 @@ Object.getPrototypeOf(rec) === Rectangle.prototype
666666// false
667667```
668668
669- ## Object.observe(),Object.unobserve()
670-
671- Object.observe方法用来监听对象(以及数组)的变化。一旦监听对象发生变化,就会触发回调函数。
672-
673- ``` javascript
674- var user = {};
675- Object .observe (user, function (changes ){
676- changes .forEach (function (change ) {
677- user .fullName = user .firstName + " " + user .lastName ;
678- });
679- });
680-
681- user .firstName = ' Michael' ;
682- user .lastName = ' Jackson' ;
683- user .fullName // 'Michael Jackson'
684- ```
685-
686- 上面代码中,Object.observer方法监听user对象。一旦该对象发生变化,就自动生成fullName属性。
687-
688- 一般情况下,Object.observe方法接受两个参数,第一个参数是监听的对象,第二个函数是一个回调函数。一旦监听对象发生变化(比如新增或删除一个属性),就会触发这个回调函数。很明显,利用这个方法可以做很多事情,比如自动更新DOM。
689-
690- ``` javascript
691- var div = $ (" #foo" );
692-
693- Object .observe (user, function (changes ){
694- changes .forEach (function (change ) {
695- var fullName = user .firstName + " " + user .lastName ;
696- div .text (fullName);
697- });
698- });
699- ```
700-
701- 上面代码中,只要user对象发生变化,就会自动更新DOM。如果配合jQuery的change方法,就可以实现数据对象与DOM对象的双向自动绑定。
702-
703- 回调函数的changes参数是一个数组,代表对象发生的变化。下面是一个更完整的例子。
704-
705- ``` javascript
706- var o = {};
707-
708- function observer (changes ){
709- changes .forEach (function (change ) {
710- console .log (' 发生变动的属性:' + change .name );
711- console .log (' 变动前的值:' + change .oldValue );
712- console .log (' 变动后的值:' + change .object [change .name ]);
713- console .log (' 变动类型:' + change .type );
714- });
715- }
716-
717- Object .observe (o, observer);
718- ```
719-
720- 参照上面代码,Object.observe方法指定的回调函数,接受一个数组(changes)作为参数。该数组的成员与对象的变化一一对应,也就是说,对象发生多少个变化,该数组就有多少个成员。每个成员是一个对象(change),它的name属性表示发生变化源对象的属性名,oldValue属性表示发生变化前的值,object属性指向变动后的源对象,type属性表示变化的种类。基本上,change对象是下面的样子。
721-
722- ``` javascript
723- var change = {
724- object: {... },
725- type: ' update' ,
726- name: ' p2' ,
727- oldValue: ' Property 2'
728- }
729- ```
730-
731- Object.observe方法目前共支持监听六种变化。
732-
733- - add:添加属性
734- - update:属性值的变化
735- - delete:删除属性
736- - setPrototype:设置原型
737- - reconfigure:属性的attributes对象发生变化
738- - preventExtensions:对象被禁止扩展(当一个对象变得不可扩展时,也就不必再监听了)
739-
740- Object.observe方法还可以接受第三个参数,用来指定监听的事件种类。
741-
742- ``` javascript
743- Object .observe (o, observer, [' delete' ]);
744- ```
745-
746- 上面的代码表示,只在发生delete事件时,才会调用回调函数。
747-
748- Object.unobserve方法用来取消监听。
749-
750- ``` javascript
751- Object .unobserve (o, observer);
752- ```
753-
754- 注意,Object.observe和Object.unobserve这两个方法不属于ES6,而是属于ES7的一部分。不过,Chrome浏览器从33版起就已经支持。
755-
756669## 对象的扩展运算符
757670
758671目前,ES7有一个[ 提案] ( https://github.com/sebmarkbage/ecmascript-rest-spread ) ,将rest参数/扩展运算符(...)引入对象。Babel转码器已经支持这项功能。
0 commit comments