1.所谓数据代理(也叫数据劫持),指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty()。
Object.defineProperty:增加属性 (默认下不能被修改,删除,枚举)
<script type="text/javascript">
let person={
name: 'ykw',
age: "18"
}
Object.defineProperty(person,'sex',{
value:'男'
})
console.log(person)
</script>
控制台输出:sex未添加的属性,所以比较淡,同时不可枚举,遍历时没有这个属性。
如果要遍历可以添加,修改,删除,枚举.
Object.defineProperty(person,'sex',{
value:'男',
enumerable:true,//控制属性是否枚举,就是展示遍历
writable:true,//控制属性可以被修改,默认为false
configurable:true//控制属性可以被删除
})
3.get函数(getter)
<script type="text/javascript">
let number=18
let person={
name: 'ykw',
age: "18"
}
Object.defineProperty(person,'sex',{
value:'男',
enumerable:true,//控制属性是否枚举,就是展示遍历
writable:true,//控制属性可以被修改,默认为false
configurable:true,//控制属性可以被删除
//当展示这个增加的属性时自动被调用
get:function (){
return number
}
})
console.log(person)
</script>
set函数:
//当有人修改增加这个属性,只包含被Object.defineProperty添加的属性时就会调用
<script type="text/javascript">
let number=18
let person={
name: 'ykw',
age: "18"
}
Object.defineProperty(person,'sex',{
// value:'男',
// enumerable:true,//控制属性是否枚举,就是展示遍历
// writable:true,//控制属性可以被修改,默认为false
// configurable:true,//控制属性可以被删除
//加入读取增加的属性时自动被调用
get:function (){
return number
},
//当有人修改就会调用
set(value){
alert(value)
number=value
}
})
console.log(person)
</script>
二:数据代理:通过一个对象代理对另一个对象属性就行读写
所谓数据代理(也叫数据劫持),指的是在访问或者修改对象的某个属性时,通过一段代码拦截这个行为,进行额外的操作或者修改返回结果。比较典型的是 Object.defineProperty()。
三:Vue中的数据代理
基本原理:
通过Object.defineProperty把data的所有属性添加到vm上,同时为每一个添加到的属性都有getter和setter,在getter/setter中去读写data中的属性。