JavaScript监听一个变量的变化

JavaScript监听一个变量的变化

监听变量，当变量的值发生改变时执行相应的函数。就类似于我们现在主流前端框架中数据绑定功能一样，通过修改对应变量的数据，数据发生改变后调用相应的函数进而改变视图

Object.defineProperty

Object.defineProperty()是一个用于修改已有属性或为对象定义新属性的函数

Object.defineProperty(obj, prop, desc)

参数名	类型	描述	可否省略
obj	object	需要定义属性的对象	否
prop	string	要定义或修改的属性名	否
desc	object	属性的描述符（配置）	否

下面就是desc属性描述符的一些配置项，我们了解到可以通过为描述符里的get和set设置对应的getter和setter函数来实现对数据读取或者赋值时的监听，并执行对应的函数

名称	类型	描述	默认值
value	object	属性的值	undefined
writable	bool	属性是否可以修改	false
enumerable	bool	属性是否可以被循环遍历枚举	false
configurable	bool	属性是否可以删除,描述符是否可以配置	false
get	function	属性被读取时调用的函数	undefined
set	function	属性被赋值时调用的函数	undefined

下面将通过对对象tool的type属性进行监听，当读取或者修改type时会在控制台输出

var tool={
    type:'pointer'//object一开始没有任何属性也可以
}
Object.defineProperty(tool,'type', {
    configurable:true,
    set:function(newVal){
       this._type=newVal 
        console.log('set:'+this._type)
    },
    get:function(){
        console.log('get:'+this._type)
        return this._type
    }
})

必须要注意的是其中type已经被我们配置了getter和setter方法，不用用于存值了，所以需要其他变量带存储type的值，这里采用的是_原来的变量名的形式，以_开头在变量在一些javascript编程规范中约定俗成为私有的变量，刚好可以用于新属性的存值

//通过对属性进行赋值和读取来触发相应的函数
tool.type="brush"//	> set:brush
var type=tool.type//> get:brush

Object.defineProperties

Object.defineProperties()和Object.defineProperty是一个用于修改已有属性或为对象定义新属性的函数，不过它一次性对多个属性进行配置

Object.defineProperty(obj, desc)

参数名	类型	描述	可否省略
obj	object	需要定义属性的对象	否
desc	object	多个属性的描述符（配置）	否

描述符和上面一样，只不过desc将包含不止一个新属性的描述符配置

var tool={
    type:'pointer'//object一开始没有任何属性也可以
    color:"#ffffff"
}
Object.defineProperty(tool,{
    type: {
        configurable:true,
        set:function(newVal){
           this._type=newVal 
            console.log('set:'+this._type)
        },
        get:function(){
            console.log('get:'+this._type)
            return this._type
        }
    },
    color: {
        configurable:true,
        set:function(newVal){
           this._color=newVal 
            console.log('set:'+this._color)
        },
        get:function(){
            console.log('get:'+this._color)
            return this._color
        }
    }
})

文章参考过一下内容
深入浅出Object.defineProperty()