数据劫持作用:
双向数据绑定的核心方法,主要是做数据劫持操作(监控数据变化),同时是后期ES6中很多语法糖底层实现的核心方法。
数据描述符
使用Object.defineProperty(对象,属性,{}),Object.defineProperty函数传入三个参数,一第一个对象,第二个是对象属性,第三个数据描述符,其中
1.value为对象值
2.writable为可写入,js内置代码不可写比如Function
3.configurable 为可配置的,挂载到window的属性不可配置delete不可删除
4.enumerable为可枚举的,Object.prototype里的属性不可枚举
var obj = {}
Object.defineProperty(obj,'name' ,{
value : 'aa',
writable :true ,//默认false
configurable : true ,//默认false
enumerable: true //默认false
})
console.log(obj.name) //aa
存取描述符
使用set和get时,value和writable不可使用。以为都是设置值,和写入值。 1.get方法 get(){}写入值
Object.defineProperty(obj,'name' ,{
// value : 'aa',
// writable :true ,//默认false
configurable : true ,//默认false
enumerable: true, //默认false
get: function () {
return 'aa'
},
set: function (newValue) {
}
})
console.log(obj.name) //aa
2.set方法 set(){}更新时监听的值,里面必须穿一形参
var tempName = ''
Object.defineProperty(obj,'name' ,{
// value : 'aa',
// writable :true ,//默认false
configurable : true ,//默认false
enumerable: true, //默认false
get: function () {
return tempName
},
set: function (newValue) {
console.log(newValue) // bb
tempName = newValue
}
})
obj.name = 'bb'
console.log(obj.name)// bb
上面写法可以简化:
var obj = {
tempValue : 'aa',
get name() {
return this.tempValue
},
set name(newValue) {
this.tempValue = newValue
}
}
console.log(obj.name) //aa
obj.name = 'bb'
console.log(obj.name) //bb
代理Proxy
代理Proxy是一个构造函数,通过new使用,传入第一个参数为obj,第二个参数为{},里面方法get,set与数据劫持差不多,但有区别。
let obj = {
val:'aa'
}
let oProxyObj = new Proxy(obj,{
get(target,key,receuver) { //对象,对象的属性,代理的对象(一般不用)
console.log(target,key,receuver) // obj,val,oProxyObj
return Reflect.get(target,key) //相当于 return target[key]
},
set (target,key,newVal,receuver) { //对象,对象的属性, 设置的值,代理的对象(一般不用)
console.log(target,key,newVal,receuver) //obj ,val ,bb , oProxyObj
Reflect.set(target,key,newVal)
},
has (target,key){
return true
}
})
console.log(oProxyObj.val) //aa
oProxyObj.val = 'bb'
console.log(oProxyObj.val)//bb
有错误欢迎指出,谢谢观看。
广告:
作者github:github.com/webxukai
作者gitee:gitee.com/webxukai
作者微信:e790134972
作者QQ:我想你应该知道了!
作者QQ邮箱:同上,呵呵!