ES5 代理对象笔记

最新推荐文章于 2024-07-26 11:41:15 发布

黃麗.

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量91

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45538360/article/details/125607167

版权

Object.defineProperty(obj, prop, descriptor)

 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'