ES5 代理对象笔记

Object.defineProperty(obj, prop, descriptor)

• obj

•  Object，Required，要在其上定义属性的对象。 
  

• prop

•  String|Symbol，Required，要定义或修改的属性的名称。 
  

• descriptor

•  Object，Required，将被定义或修改的属性描述符。
  

Object.defineProperty(obj, prop, descriptor) 的descriptor 是描述属性
描述属性分为数据描述符和存取描述符

• 数据描述符

•  configurable  是否可以删除元素 是否可以再次修改
  

•  enumerable  是否可以被Object.keys 找到
  

•  value 默认值
  

•  writable 是否可以修改默认值
  

• 存取描述符

•  get
  

•  set
  

注意 get，set 不可和 value writablle同时使用

1.向对象中添加一个属性并设置数据描述符

	const obj1 = {};
    Object.defineProperty(obj1, "a", {
      value: 1, // 默认值
      writable: true, // 可以修改值
      enumerable: true, // 可以通过Object.keys 被枚举
      configurable: true, // 可以删除元素
    });
    // 如果writable:false  那么obj1.a = 1 不会生效
    // 如果enumerable:true  那么 Object.keys(obj1) 是 ["a"]
    // 如果configurable:false 那么 delete obj1.a 不会生效
    console.log(obj1.a); // {a:1}

2.存储属性的用法

	const obj1 = {};
    var bValue;
    Object.defineProperty(obj1, "b", {
      get(){
        return bValue
      },
      set(newValue){
        bValue = newValue;
      },
      enumerable: true,
      configurable: true,
    });
    obj1.b = "2" //走set方法
    console.log(obj1.b); // 会走get方法
    console.log(bValue);

Object.defineProperties()

静态方法Object.defineProperty(obj, prop, descriptor)只能每次对一个属性设置元数据配置信息，即每次只能对一个属性设置getter和setter，为了能够对多个属性同时设置元数据配置信息，Object还提供了静态方法Object.defineProperties(obj, props)。参数props是包含多个key-value的键值对对象，其中key是就是静态方法Object.defineProperty(obj, prop, descriptor)中的 prop 参数，value就是静态方法Object.defineProperty(obj, prop, descriptor)中的 descriptor 参数。

个人理解:只要定义了Object.defineProperties(obj1, {}) 方法 那么调用方法里面的obj 就会走props里面的get set方法 (复制get 取值set)

const obj1 = {
      firstName: "",
      lastName: "",
      _job: "",
    };

    Object.defineProperties(obj1, {
      fullName: {
        get: function () {
          return this.firstName + " " + this.lastName;
        },

        set: function (v) {
          const names = v.split(" ");
          this.firstName = names[0];
          this.lastName = names[1];
        },
      },

      job: {
        get: function () {
          return this._job.toString().toUpperCase();
        },

        set: function (v) {
          this._job = v;
        },
      },
    });

    obj1.fullName = 'Jackie Chan';
    console.log(obj1.fullName); // 输出: 'Jackie Chan'
    console.log(obj1.firstName); // 输出: 'Jackie'
    console.log(obj1.lastName); // 输出: 'Chan'

    obj1.job = 'web developer';
    console.log(obj1.job); // 输出: 'WEB DEVELOPER'