Object.defineProperty 的基本使用

defineProperty 方法的特点

  可以直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。

defineProperty 用法

• Object.defineProperty(obj, prop, descriptor)
• obj：需要操作的对象
• prop：需要操作的属性
• descriptor：属性描述符

Object.defineProperty(obj, 'name', {
    // 可以通过 value 来告诉 defineProperty 方法新增的属性的取值是什么
    value: 'tanran',
    // 默认情况下通过 defineProperty 新增的属性的取值是不能修改的
    // 如果想修改, 那么就必须显示的告诉 defineProperty 方法
    writable: true,
    // 默认情况下通过 defineProperty 新增的属性是不能删除的
    // 如果想删除, 那么就必须显示的告诉 defineProperty 方法
    configurable: true,
    // 默认情况下通过 defineProperty 新增的属性是不能迭代的
    // 如果想迭代, 那么就必须显示的告诉 defineProperty 方法
    enumerable: true
});

defineProperty 方法

1. defineProperty 除了可以动态修改 / 新增对象的属性以外
   还可以在修改 / 新增的时候给该属性添加 get/set 方法
2. defineProperty get/set 方法特点
   只要通过 defineProperty 给某个属性添加了 get/set 方法
   那么以后只要获取这个属性的值就会自动调用 get, 设置这个属性的值就会自动调用 set
3. 注意点:
   如果设置了 get/set 方法, 那么就不能通过 value 直接赋值, 也不能编写 writable: true

   let obj = {};
   let oldValue = '坦然';
   Object.defineProperty(obj, 'name', {
       // value: oldValue,
       // writable: true,
       configurable: true,
       enumerable: true,
       get(){
           console.log("get方法被执行了");
           return oldValue;
       },
       set(newValue){
           if(oldValue !== newValue){
               console.log("set方法被执行了");
               oldValue = newValue;
           }
       }
   });
   console.log(obj.name); // get方法被执行了   坦然
   obj.name = 'tanran'; // set方法被执行了