07 ES6标准入门(Proxy)-优快云博客

本文链接：https://blog.youkuaiyun.com/duola8789/article/details/80000999

本文介绍了ES6中的Proxy构造函数，用于创建Proxy实例以拦截对象的访问、属性读取、设置及函数调用等操作。通过示例详细解释了get、set、apply方法的使用，并探讨了Proxy在Web服务客户端的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概述

Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

var obj = new Proxy({}, {
  get: function (target, key, receiver) {
   
    console.log(`getting ${key}!`);
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, value, receiver) {
   
    console.log(`setting ${key}!`);
    return Reflect.set(target, key, value, receiver);
  }
});

上面的 Proxy 实质上拦截了对象的 get 和 set 方法

obj.count = 1
//  setting count!
++obj.count
//  getting count!
//  setting count!
//  2

ES6 原生提供 Proxy 构造函数，用来生成 Proxy 实例。

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法，都是上面这种形式，不同的只是 handler 参数的写法。其中，new Proxy() 表示生成一个 Proxy 实例，target 参数表示所要拦截的目标对象，handler 参数也是一个对象，用来定制拦截行为。

var proxy = new Proxy({}, {
  get: function(target, property) {
   
    return 35;
  }
});

proxy.time // 35
proxy.name // 35
proxy.title // 35

上面代码中，作为构造函数，Proxy 接受两个参数。第一个参数是所要代理的目标对象（上例是一个空对象），即如果没有 Proxy 的介入，操作原来要访问的就是这个对象；第二个参数是一个配置对象，对于每一个被代理的操作