VUE·09：Object.defineproperty() 方法详解（重点）
一、Object.defineproperty() 作用小贴士
1.主要功能：用来为一个对象添加新属性
2.它的英文翻译是：对象.定义 属性()，功能可想而知
二、Object.defineproperty() 的 使用范例1
1.格式
Object.defineproperty(xxx,'xxx',{xxx})
2.代码示例：直接书写 value 属性
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>回顾Object.defineproperty方法title>
head>
<body>
<script type="text/javascript" >
let person = {
name:'张三',
sex:'男',
}
// 为 person对象 传输了一个新属性 “age”，并且设定它的值为 18
Object.defineProperty(person,'age',{
value=18
})
// console.log(Object.keys(person))
console.log(person)
script>
body>
html>
三、Object.defineProperty 的 属性
0.Object.defineProperty()属性0 · value（直接传值）
Object.defineProperty(person,'age',{
value=18
})
1.Object.defineProperty()属性1 · enumerable（可被遍历）
1.1 代码的 console控制台 输出结果：
我们能够发现，最开始没有在 person = { } 中写的 属性“age”，竟然出现在了console中！
原因就是我们在 Object.defineProperty() 函数中 为 person对象 传输了一个新属性 “age”，并且设定它的值为 18
1.2 细节：在上面的 console 输出中，我们能发现 “age” 属性的颜色是浅色的，这是为什么？
原因：浅色代表不可被枚举。在使用Object.defineProperty() 方法为对象添加新属性的时候，这个新属性是不能被枚举的。也就是说，不能被遍历到。
1.3 怎么让 Object.defineProperty() 添加的属性可以被遍历到 ？！
方法：在Object.defineProperty() 中添加一个属性“enumerable”
这个属性的默认值为“false”，我们现在给它赋值为“true”，请看代码：
2.Object.defineProperty()属性2 · writable（可被修改）
2.1 如果未指定 writable:true 的结果：
如果直接将新增属性写在 实例对象 中，比如：
那么其实我们能够在f12的console中修改这个age值，并且遍历结果也会改变。
但如果我们写在 Object.defineProperty() 中，但是未指定 writable:true，那么我们就就算在 console 中修改了age值，也不会被重新遍历到：
2.2 解决办法：非常简单，在Object.defineProperty()中定义属性 writable:true 即可：
现在再在 console 中修改属性之后遍历，就能达到和在 实例对象 中直接定义一样的效果：
3.Object.defineProperty()属性1 · enumerable（可被遍历）
1.1 代码的 console控制台 输出结果：
· 如果我们直接在 对象实例 中删除某个属性，那么可以删掉：
· 但我们如果想要删除 Object.defineProperty() 添加的数据，却删不掉！
1.2 解决办法：添加一个属性 configurable:true，就可以删除啦！
三、Object.defineProperty() 的 隐式函数 get()方法（getter） & set()方法
1.get()方法（getter）
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:'男',
}
Object.defineProperty(person,'age',{
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log('有人读取age属性了')
return number
}
})
script>
body>
html>mg-blog.csdnimg.cn/1089ef92ffb749dca0d8611a3719f7c5.png)
显示结果：
2.set()方法（setter）
set() 方法的使用方法 和 getter 同理
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:'男',
}
Object.defineProperty(person,'age',{
//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
get(){
console.log('有人读取age属性了')
return number
},
//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
set(value){
console.log('有人修改了age属性，且值是',value)
number = value
}
})
script>
body>
html>