Object.defineProperty的基本使用
<script> let personObj={ name:'何西亚', sex:'男' } //我们想给这个对象添加一个属性 // 第一个参数是你要添加的对象名， // 第二个参数你要添加的key值 // 第三个参数是 一个配置项 是个对象 Object.defineProperty(personObj,'age',{ value:35 }) //输出 {name: "何西亚", sex: "男", age: 35} console.log( personObj); </script>
为啥要使用 Object.defineProperty 添加key值
有的同学可能会说，我使用通过点和[]的方式难道不好吗
<script> let personObj={ name:'何西亚', sex:'男' } personObj['age']=35 personObj.height=1.86 //使用这一种方式也可以添加key值，难道这样不香吗 console.log(personObj); </script>
这样是可以的，但是我使用 Object.defineProperty
是非常高级的
那么高级在哪里呢？
咳咳咳，使用 Object.defineProperty添加的key值，
是不会参与枚举
枚举:简单点说就是不会参与循环。[这样描述可能不太准确]
我们可以证明一下：Object.defineProperty添加的key值不会被遍历
Object.defineProperty添加的key值不会被遍历
<script> let personObj={ name:'何西亚', sex:'男' } Object.defineProperty(personObj,'age',{ value:35 }) // Object.keys()返回对象键名key组成的数组 console.log(Object.keys(personObj)); // [name,sex ] //在这里我们发现age这个属性没有返回 //所以说明了【Object.defineProperty添加的key值不会被遍历】 </script>
想要 Object.defineProperty添加的key值被遍历
有的同学喜欢去钻牛角尖，说我非要去让它遍历。
也不是不可以，我们之前说过 Object.defineProperty
第三个参数是 一个配置项 是个对象
这样配置enumerable:true 表示可以枚举
let personObj={ name:'何西亚', sex:'男' } // Object.defineProperty(personObj,'age',{ value:35, enumerable:true }) // Object.keys()返回对象键名key组成的数组 console.log(Object.keys(personObj)); // [name,sex,age ] //这个时候我们发现是可以枚举了
Object.defineProperty中key值是否可以被修改
<script> let personObj={ name:'何西亚', sex:'男' } Object.defineProperty(personObj,'age',{ value:35, enumerable:true }) personObj.age='350' // 通过这样的方式，是不可以被修改的哈 console.log(personObj.age); //输出 35 </script> 如果我们想要age可以被修改，我们配置 let personObj={ name:'何西亚', sex:'男' } //配置 enumerable:true, Object.defineProperty(personObj,'age',{ value:35, enumerable:true,writable:true }) personObj.age='350' // 这样就可以修改年龄了 console.log(personObj.age); //输出 350
Object.defineProperty中新增的key值可以被删除
let personObj={ name:'何西亚', sex:'男' } // configurable:true 表示后面可以删除age这个属性， // 正常情况下age是不可以被删除的哦！ Object.defineProperty(personObj,'age',{ value:35, configurable:true }) delete personObj.age console.log(personObj) 输出 { name:'何西亚', sex:'男'}
需求描述
我们想这样操作：
一个对象中的某一个属性值去读取某一个变量
当这个变量的值发生变化后，对象中的那个属性值发生变化
let num=35 let personObj={ name:'何西亚', sex:'男', age:num } //输出35 console.log('修改前', personObj.age ) num=36 //修改后仍然输出35,但是我想让它输出36 console.log('修改后',personObj.age );
Object.defineProperty的get函数的使用
这个时候，Object.defineProperty的get函数的来帮助我们了!
<script> let num=35 let personObj={ name:'何西亚', sex:'男', age:num } num=36 Object.defineProperty(personObj,'age',{ //当有人读取 personObj的age属性的时候 // 就会触发get函数【getter】，该函数就会被调用 // 函数的返回值就是age的值 get:function(){ console.log('读取age属性的时候回触发该函数') return num } }) console.log('修改后',personObj.age ); //输出36 </script>
使用Object.defineProperty的set函数的原因
<script> let num = 35 let personObj = { name: '何西亚', sex: '男', age: num } num = 36 //可以修改age的值 Object.defineProperty(personObj, 'age', { //当有人读取 personObj的age属性的时候 // 就会触发get函数【getter】，该函数就会被调用 // 函数的返回值就是age的值 get: function () { console.log('读取age属性的时候回触发该函数') return num } }) //后面通过这样的方式修改age的值会失败 personObj.age='350' //本来我们期待是350，但是实际上是 36 console.log('修改后', personObj.age); 这个时候我们就需要使用set函数了，它就可以解决这个问题 </script>
Object.defineProperty中set函数的使用
<script> let num=35 let personObj={ name:'何西亚', sex:'男', age:num } num=36 Object.defineProperty(personObj,'age',{ //当有人读取 personObj的age属性的时候 // 就会触发get函数【getter】，该函数就会被调用 // 函数的返回值就是age的值 get:function(){ console.log('读取age属性的时候回触发该函数') return num }, // 当有人修改age属性的时候，set函数【setter】就会被触发 // 且会收到修改的具体值 set:function(value){ console.log('修改age了',value) // 修改后需要进行赋值，否者通过personObj.age='350'修改会失败 num=value } }) personObj.age='350' console.log('修改后',personObj.age ); //输出350
