浅谈 Object.observe

国际惯例:转载或引用时请注明原文出处。

今天看到了  Object.observe 这个方面,感觉不错,这里就来简单介绍下。
 
Object.observe 这个方法 可以监听到 某个 对象的属性改变情况。使用方法如下

Object.observe(user,function(changes){
    //code

console.log(changes);

});
当  user 的属性发生变化,update,delete,add 时,都会触发该函数。
注意 :只有user该对象的属性变化才会触发函数,user的 prototype 的改变和 delete user 是不会触发的。

还有一点要注意的是:这个函数什么时候执行呢? 并不是改变属性就马上执行,而是当主线程其他代码执行完后才会执行。

<div id="test_1">wwwww</div> 
 user={};

Object.observe(user,function(changes){

document.getElementById(‘test_1‘).innerHTML="qqqqq";

});

user.a=0;

console.log(document.getElementById(‘test_1‘).innerHTML); 
 
如果 是马上执行 那么,后来的 log  应该打出 qqqqq ,但结果却是 wwwww。

这一点还是蛮坑的,,,,,,

函数中的 changes 表示的是 所有改变的内容, 如下图:

是按 改变顺序进行排序的。  name 是 属性名, type 是改变方式(add,update,delete)。object  是 user 对象现在的值(这太坑了,,,不能实施获得对象的值)。 
PS: 连续2次给同一个属性赋同一个值是不会增加 change 的。

心得:这个函数不能及时反映对象的改变状况还是满坑的,并且次函数也不是被那么多浏览器支持。

时间: 2024-10-10 06:00:58

浅谈 Object.observe的相关文章

浅谈Object.create

在网上发现了Object.create的用法,感觉很是奇怪,所以学习记录下 1 var o = Object.create(null); 2 console.log(o); // {} 3 o.name = 'jian'; 4 var o2 = Object.create(o); 5 console.log(o2); // {} 6 console.log(o2.name); // 'jian', 百度了一下原理: 1 Object.create = function (o) { 2 var F

浅谈Object.assign()

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.返回值为目标对象. const obj = { name: "zs", age: 18, sex: "man" }; const newObj = Object.assign({ newname: "lisi" }, obj); console.log(newObj, obj); // { newname: 'lisi', name: 'zs', age:

JavaScript中toStirng()与Object.prototype.toString.call()方法浅谈

toStirng()与Object.prototype.toString.call()方法浅谈 一.toString()是一个怎样的方法?它是能将某一个值转化为字符串的方法.然而它是如何将一个值从一种类型转化为字符串类型的呢? 通过下面几个例子,我们便能获得答案: 1.将boolean类型的值转化为string类型: console.log(true.toString());//"true" console.log(false.toString());//"false&quo

.net中对象序列化技术浅谈

.net中对象序列化技术浅谈 2009-03-11 阅读2756评论2 序列化是将对象状态转换为可保持或传输的格式的过程.与序列化相对的是反序列化,它将流转换为对象.这两个过程结合起来,可以轻松地存储和传输数 据.例如,可以序列化一个对象,然后使用 HTTP 通过 Internet 在客户端和服务器之间传输该对象.反之,反序列化根据流重新构造对象.此外还可以将对象序列化后保存到本地,再次运行的时候可以从本地文件 中“恢复”对象到序列化之前的状态.在.net中有提供了几种序列化的方式:二进制序列化

【转】浅谈Java中的equals和==

浅谈Java中的equals和== 在初学Java时,可能会经常碰到下面的代码: 1 String str1 = new String("hello"); 2 String str2 = new String("hello"); 3 4 System.out.println(str1==str2); 5 System.out.println(str1.equals(str2)); 为什么第4行和第5行的输出结果不一样?==和equals方法之间的区别是什么?如果在初

安卓开发_浅谈ListView(自定义适配器)

ListView作为一个实际开发中使用率非常高的视图,一般的系统自带的适配器都无法满足开发中的需求,这时候就需要开发人员来自定义适配器使得ListView能够有一个不错的显示效果 有这样一个Demo ,实现图片文字混合列表 1 package com.example.work; 2 3 import java.util.ArrayList; 4 import java.util.HashMap; 5 import java.util.List; 6 7 8 import android.R.in

浅谈移动前端的最佳实践(转)

前言 这几天,第三轮全站优化结束,测试项目在2G首屏载入速度取得了一些优化成绩,对比下来有10s左右的差距: 这次优化工作结束后,已经是第三次大规模折腾公司框架了,这里将一些自己知道的移动端的建议提出来分享下,希望对各位有用 文中有误请您提出,以免误人自误 技术选型 单页or多页 spa(single page application)也就是我们常常说的web应用程序webapp,被认为是业内的发展趋势,主要有两个优点: ① 用户体验好 ② 可以更好的降低服务器压力 但是单页有几个致命的缺点:

浅谈Spring(四)AOP实例

在<浅谈Spring(三)AOP原理>中我详细的介绍了AOP的基本概念和实现原理,这里给出代码示例. 一.XML方式 1. TestAspect:切面类 package com.spring.aop; import org.aspectj.lang.JoinPoint; import org.aspectj.lang.ProceedingJoinPoint; public class TestAspect { public void doAfter(JoinPoint jp) { System

Qt浅谈之十六:TCP和UDP(之一)

一.简介 Qt使用QtNetwork模块来进行网络编程,提供了一层统一的套接字抽象用于编写不同层次的网络程序,避免了应用套接字进行网络编的繁琐(因有时需引用底层操作系统的相关数据结构).有较底层次的类如QTcpSocket.QTcpServer和QUdpSocket等来表示低层的网络概念:还有高层次的类如QNetworkRequest.QNetworkReply和QNetworkAccessManager使用相同的协议来执行网络操作:也提供了QNetworkConfiguration.QNetw