(五) -Proxy-对象级别——给对象设值更方便，是ES6新增属性 & target-目标对象， key-obj目标对象中的某个属性，value-设置的新的值_proxy取target值

作者：Cpp五条 | 2024-02-25 10:01:56

踩

proxy取target值

Proxy-对象级别——给对象设值更方便，是ES6新增属性 & target-目标对象， key-obj目标对象中的某个属性，value-设置的新的值

Object.defineProperty()方法-属性级别

参考资料：

MDN - Proxy
阮一峰 - Proxy

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

语法

let p = new Proxy(target, handler);
1

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中：

new Proxy()表示生成一个Proxy实例
target参数表示所要拦截的目标对象
- 可以是任意类型的对象，包括原生数组，函数，甚至是另一个 Proxy
handler参数也是一个对象，用来定制拦截行为。
- 其属性是当执行一个操作时定义代理的行为的函数

实例：Proxy.html中

<body>
  <script>
    var obj = {
      name: 'zs',
      age: 18
    }

//obj-目标对象 ， { }-给对象配置的选项
    var p = new Proxy(obj, {
      get (target, key) {  //target-目标对象 ， key-obj目标对象中的某个属性
        console.log(key)
          //属性中有name 和 age ，没有变量key， key里是属性数组成员
        return target[key]
      },
        //target-目标对象 ， key-obj目标对象中的某个属性 ，value-设置的新的值
      set (target, key, value) {
        console.log(key, value)
        target[key] = value
      }
    })
 
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

控制台操作打印-Proxy方法操作值

在这里插入图片描述

注：

Object.defineProperty 和 Proxy，都可以实现描述符get（获取数据）和set（修改数据），区别是：

Object.defineProperty()方法-属性级别，给属性设值；

Proxy-对象级别，给对象设值；给对象设值更方便，是ES6新增属性

给对象的多个属性设值，需要循环遍历各个属性值，需要分别调用defineProperty()方法，实现起来麻烦，性能也比Proxy差

如果有一个定义的实例对象-p代理了数据操作，后期操作目标对象-obj 通过代理对象设属性值即可

示例

const data = {}

var proxy = new Proxy(data, {
  get: function(target, property) {
    return 35;
    // return property in target ? target[property] : 37;
  }
});

1
2
3
4
5
6
7
8
9

注意：要使得Proxy起作用，必须针对Proxy实例（上例是proxy对象）进行操作，而不是针对目标对象（上例是data）进行操作。

示例

如果handler没有设置任何拦截，那就等同于直接通向原对象。

let target = {};
let p = new Proxy(target, {});

p.a = 37;   // 操作转发到目标

console.log(target.a);    // 37. 操作已经被正确地转发
1
2
3
4
5
6

上面代码中，handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/140220

(五) -Proxy-对象级别——给对象设值更方便，是ES6新增属性 & target-目标对象 ， key-obj目标对象中的某个属性 ，value-设置的新的值_proxy取target值

Proxy-对象级别——给对象设值更方便，是ES6新增属性 & target-目标对象 ， key-obj目标对象中的某个属性 ，value-设置的新的值

语法

(五) -Proxy-对象级别——给对象设值更方便，是ES6新增属性 & target-目标对象， key-obj目标对象中的某个属性，value-设置的新的值_proxy取target值

Proxy-对象级别——给对象设值更方便，是ES6新增属性 & target-目标对象， key-obj目标对象中的某个属性，value-设置的新的值