如何监测一个对象的变化

Posted RunningAndRunning

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何监测一个对象的变化相关的知识,希望对你有一定的参考价值。

熟悉vue和react的大家应该都知道,当数据变化的时候,我们会触发相应的DOM更新,那有没有思考过,怎么样监听到一个对象属性的变化呢?

答案是,ES5中提供了一个函数,Object.defineProperty(obj, key, {属性})

let obj = {name: ‘hello‘}
Object.defineProperty(obj, ‘name‘, {
    configurable: true, // 表示能否通过delete删除属性默认为true
    enumerable: true, // 表示能否通过for-in返回属性默认为true
    get () {
        console.log(obj[‘name‘])
    },
    set (newValue) {
        console.log(‘您设置了新的值‘ + newValue)
    }
})

1、数据属性:

configurable: 表示能否通过delete删除属性默认为true

enumerable:表示能否通过for-in返回属性默认为true
writable: 是否可写

value: 值
2、访问器属性:
configurable: 表示能否通过delete删除属性默认为true

enumerable:表示能否通过for-in返回属性默认为true

get:callback

set:callback

这两组属性默认不能一起写,否则会报错,比如下面这段代码将会报错

Uncaught TypeError: Invalid property descriptor. Cannot both specify accessors and a value or writable attribute, #<Object>
at Function.defineProperty (<anonymous>)

let person = {
    name: ‘qihr‘
}
Object.defineProperty(person, ‘age‘, {
    enumerable: true,
    configurable: true,
    value: ‘10‘,
    get: function () {}
})

将configurable设置为false,表示不能从对象中通过delete删除掉属性。如果调用delete属性,非严格模式下没什么作用,但是在严格模式下则会报错。而且,如果一旦把属性定义为不可配置的,就不能把他变为可配置的了。这时,再调用Object.defineProperty()方法修改除writable之外的特性,都会导致错误:

let person = {
    name: ‘qihr‘
}
Object.defineProperty(person, ‘age‘, {
    value: 20,
    configurable: false
})
// 下面的代码将会抛出错误
Object.defineProperty(person, ‘age‘, {
    value: 20,
    configurable: true
})

 

 




以上是关于如何监测一个对象的变化的主要内容,如果未能解决你的问题,请参考以下文章

IP动态变化如何监测——WGCLOUD

为啥尽管源代码没有变化,但从一个系统到另一个系统的片段数量却有很大差异?

有一个实时监控的项目,现在我想要在C#代码中监测mysql数据库中一张表的更新变化的情况,

angularJS 里的$watch的用法

监测UITextField的变化

watch监听(数组或者对象)