Javascript 监听简单对象的属性变化

Stella981
• 阅读 722
//简单对象的属性的变化监控
//通过setAttr改变属性的值

var o = {
  'a':2,
  'b':3
};
function watch(obj, attr, callback){
   if(typeof obj.defaultValues == 'undefined'){
      obj.defaultValues = {};
      for(var p in obj){
        if(typeof obj[p] !== 'function' && typeof obj[p] !== 'object') 
            obj.defaultValues[p] = obj[p];
      }
   }
   if(typeof obj.setAttr == 'undefined'){
      obj.setAttr = function(attr, value){  
              if(this[attr] != value){
                this.defaultValues[attr] = this[attr];
                this[attr] = value;
                return callback(this);
              }
              return this;              
       };
   } 
}
watch(o, 'a', function(obj){
  console.log(obj);
});
o.setAttr('a',4);
点赞
收藏
评论区
推荐文章
Souleigh ✨ Souleigh ✨
3年前
JavaScript - 关于 var、let、const 的区别使用
一、var在ES5中,顶层对象的属性和全局变量是等价的,用var声明的变量既是全局变量,也是顶层变量注意:顶层对象,在浏览器环境指的是window对象,在Node指的是global对象var a  10;console.log(window.a) // 10使用var声明的变量存在变量提升的情况console.log(a) // undefine
ZY ZY
3年前
js堆和栈
浅析js中堆内存和栈内存我们常遇见的varletconst区别cont定义的基本类型不能改变,但是定义的对象是可以通过修改对象属性等方法来改变的consta1;console.log(a)//a;cosnole.log(a2)//报错constb;b.name1;console.log(b)//name:1con
Wesley13 Wesley13
3年前
java8新特性
Stream将List转换为Map,使用Collectors.toMap方法进行转换背景:User类,类中分别有id,name,age三个属性。List集合,userList,存储User对象1、指定keyvalue,value是对象中的某个属性值。 Map<Integer,StringuserMap1userList.str
LinMeng LinMeng
3年前
Object.keys()详解
Object.keys():遍历对象的所有属性,该方法返回一个数组,数组内容就是对象的所有键名。传入对象,返回属性名varobj{'a':'meng','b':'lin'}console.log(Object.keys(obj));//'a','b'varobj{100:"a",2:"b",7:"c"};cons
LinMeng LinMeng
3年前
vue的watch监听
vue的watch监听函数watch用来响应数据的变化,watch的用法大致有以下三种:1.监听某个变量watch:{name(newName,oldName){console.log(newName)//改变前的值console.log(oldName)//改变后的值
Dax Dax
3年前
Vue中计算属性和 watch的区别
通俗来讲,既能用computed实现又可以用watch监听来实现的功能,推荐用computed,重点在于computed的缓存功能computed计算属性是用来声明式的描述一个值依赖了其它的值,当所依赖的值或者变量改变时,计算属性也会跟着改变;watch监听的是已经在data中定义的变量,当该变量变化时,会触发watch中的方法;根据
Souleigh ✨ Souleigh ✨
4年前
实现深拷贝的多种方式
实现深拷贝的多种方式简单来说,深拷贝主要是将另一个对象的属性值拷贝过来之后,另一个对象的属性值并不受到影响,因为此时它自己在堆中开辟了自己的内存区域,不受外界干扰。浅拷贝主要拷贝的是对象的引用值,当改变对象的值,另一个对象的值也会发生变化。1.简单深拷贝(一层浅拷贝)①for循环拷贝//只复制第一层的浅拷贝javascriptfunc
Stella981 Stella981
3年前
JS 对象数组Array 根据对象object key的值排序sort,很风骚哦
有个js对象数组varary\{id:1,name:"b"},{id:2,name:"b"}\需求是根据name或者id的值来排序,这里有个风骚的函数函数定义:function keysrt(key,desc) {  return function(a,b){    return desc ? ~~(ak
Stella981 Stella981
3年前
Redis 数据结构与编码总结(6)
数据结构总结对象对象type属性值type命令输出底层可能的存储结构objectencoding字符串对象OBJ\_STRING"string"OBJ\_ENCODING\_INT\\OBJ\_ENCODING\_EMBSTR\\OBJ\_ENCODING\_RAWint\\embstr\\r
Stella981 Stella981
3年前
API之Object.keys()
一、语法Object.keys(obj)参数:枚举自身属性的对象。返回值:一个表示给定对象的所有可枚举属性的字符串数组。二、处理对象,返回可枚举的属性数组varobj{projId:'SM31726327362187',pro