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'
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值