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()