浅谈在JS中使用Object的watch方法监控对象属性

noONE 发布于2019-08-21 10:42 / 2469人阅读

摘要：对其的解释为概述监视一个对象的某个属性是否发生变化在该属性变化时立即触发指定的回调函数语法参数想要监视值是否发生变化的指定对象的某个属性的属性名称当指定的属性发生变化时执行的回调函数在内查看其声明如下可以看到这两个方法是只针对内核的浏览器使

MDN 对其的解释为:

概述:
    监视一个对象的某个属性是否发生变化,在该属性变化时立即触发指定的回调函数.
语法:
    object.watch(prop, handler)
参数:
    prop
    想要监视值是否发生变化的指定对象的某个属性的属性名称
    handler
    当指定的属性发生变化时执行的回调函数

在 DHTML.js内查看其声明如下:

可以看到这两个方法是只针对 Gecko 内核的浏览器使用的(FF 是使用的 Gecko 内核).
wacth 方法有两个参数,第一个参数是一个字符串,代表需要监视的属性名,第二个参数是个回调函数
unwatch 方法只有一个参数,代表需要取消监视的属性名.

使用举例:

var o = {p:1};
o.watch("p", function (id, oldValue, newValue) {
    console.log("o."+id +" 由 "+oldValue +" 变为 "+newValue);
    return newValue;//注意点
});
o.p = 2;
o.p = 3;
delete o.p;
o.p = 4;

输出结果为:

这里需要注意的是回调函数必须返回一个值,返回的值会覆盖原有的值(若无返回值默认返回的是 undefined),可以返回新值

使用watch 方法来监视对象的属性

//声明一个类
Person = function (name, age) {
    this.watch("age",Person.prototype._isValidAssignment);
    this.watch("name",Person.prototype._isValidAssignment);
    this.name = name;
    this.age = age;
};

Person.prototype.toString = function () {
    return this.name + " , " + this.age;
};
//定义语义上的私有方法
Person.prototype._isValidAssignment = function(id,oldVale,newValue){
    if(id == "name" && (!newValue || newValue.length > 30)){
        throw new RangeError("不合法的名字 "+ this);
    }
    if(id == "age" && (newValue <0 || newValue >200)){
        throw new RangeError("不合法的年龄 "+ this);
    }
    return newValue;//重点,必须返回
}

will = new Person("will",29);
console.log(will);

try{
    will.name = "";
}catch(e){
    console.log(e);
}

try{
    will.age = -4;
}catch(e){
    console.log(e);
}

输出结果如下:

最后引入 MDN 的一段描述与注意事项

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86047.html

浅谈Vue中计算属性computed的实现原理

摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。当某个属性发生变化，触发拦截函数，然后调用自身消息订阅器的方法，遍历当前中保存着所有订阅者的数组，并逐个调用的方法，完成响应更新。虽然目前的技术栈已由Vue转到了React，但从之前使用Vue开发的多个项目实际经历来看还是非常愉悦的，Vue文档清晰规范，api设计简洁高效，对前端开发人员友好，上手快，甚至个人认为在很多...

laznrbfe 2019-08-23 11:56 评论0 收藏0
做面试的不倒翁：浅谈 Vue 中 computed 实现原理

摘要：当某个属性发生变化，触发拦截函数，然后调用自身消息订阅器的方法，遍历当前中保存着所有订阅者的数组，并逐个调用的方法，完成响应更新。编者按：我们会不时邀请工程师谈谈有意思的技术细节，希望知其所以然能让大家在面试有更出色表现。也给面试官提供更多思路。 showImg(https://segmentfault.com/img/bVbgYyU?w=1200&h=600); 虽然目前的技术...

Anonymous1 2019-08-23 11:57 评论0 收藏0
细谈在HTML中使用JavaScript

摘要：前言是浏览器的内置脚本语言。避免，在结构生成之前调用节点，而产生错误前言 JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本，浏览器加载网页时，就会执行脚本，从而操作浏览器，实现各种动态效果 JavaScript代码嵌入网页的方法 1、元素直接嵌入代码 function sayHello() { alert(hello!); ...

eternalshallow 2019-08-22 17:30 评论0 收藏0
细谈在HTML中使用JavaScript

摘要：前言是浏览器的内置脚本语言。避免，在结构生成之前调用节点，而产生错误前言 JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本，浏览器加载网页时，就会执行脚本，从而操作浏览器，实现各种动态效果 JavaScript代码嵌入网页的方法 1、元素直接嵌入代码 function sayHello() { alert(hello!); ...

yacheng 2019-08-02 10:33 评论0 收藏0
2019前端面试题汇总（主要为Vue）

摘要：毕业之后就在一直合肥小公司工作，没有老司机没有技术氛围，在技术的道路上我只能独自摸索。于是乎，我果断辞职，在新年开工之际来到杭州，这里的互联网公司应该是合肥的几十倍吧。。。。毕业之后就在一直合肥小公司工作，没有老司机、没有技术氛围，在技术的道路上我只能独自摸索。老板也只会画饼充饥，前途一片迷茫看不到任何希望。于是乎，我果断辞职，在新年开工之际来到杭州，这里的互联网公司应该是合肥的几十...

arashicage 2019-08-23 15:21 评论0 收藏0