Object.defineProperty 方法的重要性
Vue底层很多地方都会用到 Object.defineProperty方法,例如:
- 数据劫持
- 数据代理
- 计算属性
defineProperty 直译: 给 方法 定义 属性。
源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>回顾Object.defineproperty方法</title>
</head>
<body>
<script type="text/javascript" >
let number = 18
let person = {
name:'张三',
sex:'男',
//错误写法举例: 这种写法只会在一开始会把number的值18给age, 如果以后number值变的话并不会同步给age.
//age:number
}
//为 person 对象定义一个属性 age : //这种方法虽然麻烦,但是比较高级:从控制台可以到后添加的 age属性的颜色淡一些(表示不可以枚举)。
//
Object.defineProperty(person,'age',{
// value:18,
//控制属性:
// enumerable:true, //控制属性是否可以枚举,默认值是false
// writable:true, //控制属性是否可以被修改,默认值是false
// configurable:true //控制属性是否可以被删除,默认值是false
//★★★
//当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
//get:function 函数名(){} 的缩写形式: //去掉 : ,然后去掉 function, 去掉 函数名
get(){
console.log('有人读取age属性了')
//返回上面变量number的值:
return number
},
//★★★
//当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set(value){
console.log('有人修改了age属性,且值是',value)
//修改上面变量number的值:
number = value
}
})
// console.log(Object.keys(person)) // Object.keys() 功能:可以把传入的参数对象中的所有属性名提取出来变为一个数组。
//功能: 遍历 person 对象中每个属性的属性值.
//此处可以验证:日志中无法看到 通过 Object.defineProperty(person,'age',{ value:18}) 添加的属性值18 。 原因:Object.defineProperty() 追加的属性无法被枚举(即 不能被遍历)。
for(let key in person)
{
console.log('@', person[key])
}
console.log(person)
</script>
</body>
</html>