Object.defineProperty的使用

一、Object.defineProperty的作用

 Object.defineProperty方法直接在一个对象上定义一个新属性，或者修改一个已经存在的属性， 并返回这个对象。

二、语法

Object.defineProperty 需要三个参数（object , propName , descriptor）

1 object 对象 => 给谁加

2 propName 属性名 => 要加的属性的名字 【类型：String】

3 descriptor 属性描述 => 加的这个属性有什么样的特性【类型：Object】

可以添加的特性：

1 value: 设置属性的值

2 writable: 值是否可以重写。true | false

3 enumerable: 目标属性是否可以被枚举。true | false

4 configurable: 目标属性是否可以被删除或是否可以再次修改特性 true | false

5 set: 目标属性设置值的方法

6 get：目标属性获取值的方法

三、代码实现

//定义一个对象
var user = {
    age:26,
};
//方法的特性
Object.defineProperty(user, 'name', {
    value: '狂奔的蜗牛', //属性值可以为number function object boolean等任何数据类型
    writable:true, //value 是否可以被重新赋值,默认为false
    enumerable:true, // 该属性是否可以被遍历,默认为false
    configurable:true, // 该属性可以被删除和重新定义特性
});

//value 为其他复杂数据类型
Object.defineProperty(user, 'sayHi', {
      value(){ //value 为函数
          console.log("Hi");
      }
});
Object.defineProperty(user, 'birth', {
      value:{ //value 为对象
          date:"2022-3-15",
          hour:"14.41",
      }, 
});

Vue中数据代理的原理

//getter和setter
//定义一个对象
var user = {};
var count = 18;
Object.defineProperty(user,'age',{
         //当使用了getter或setter方法，不允许使用writable和value这两个属性，如果使用会直接报错
         get(){
             //get 获取值的时候会被调用，不设置时为 undefined
             return count;
         },
         set(newVal){ // newVal将要被修改成的属性值
             //set 设置值的时候会被调用，不设置时为 undefined
             count = newVal;
         }
});
console.log("修改前:",user.age); //18
user.age = 30; //修改 user.age 的值，会调用setter方法 
console.log("修改后:",user.age); //30