JS中的Proxy代理详解

前言

就目前而言，前端框架基本上被 Vue 和 React 瓜分得差不多了。如果你去面试一个前端岗位，那么或多或少都会问你一些关于 Vue 和 React 框架得知识，无论是原理还是使用，我们都有必要去了解一番。

数据响应式可以说是这些框架的一大特色与核心，这里我们就拿 Vue 来说。在 Vue2.x 时代，实现数据响应式主要是使用 Object.defineProperty()这个 API 来实现的，而到了 Vue3.x 时代，数据响应式主要是使用 Proxy()来实现的。

如果你还不了解 Proxy，那么你很有必要跟着本篇文章学习一下！

1.基本概念

想要学习一个新的 API 或者知识，不能一上来就看它怎么使用。我们要学习从基本概念入手，这样才能做到有始有终。

Proxy 是在 ES6 中才被标准化的，而 Vue2.x 版本是基于 ES6 版本之前的 Object.defineProperty()设计的，我们先来看下官方是怎么解释 Proxy 的。

官网解释：

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

为了方便大家好理解，这里先抓几个关键词出来：

• 对象
• 创建对象代理
• 拦截
• 自定义

从上面的关键词大家应该能够揣摩个一二了，首先 Proxy 是一个对象，它可以给另外一个对象创建一个代理，代理可以简单理解为代理某一个对象，然后通过这个代理对象，可以针对于该对象提前做一些操作，比如拦截等。

通俗的解释：

假如我们有一个对象 obj，使用 Proxy 对象可以给我们创建一个代理，就好比我们打官司之前，可以先去律师事务所找一个律师，律师全权代理我们。有了这个代理之后，就可以对这个 obj 做一些拦截或自定义，比如对方想要直接找我们谈话时，我们的律师可以先进行拦截，他来判断是否允许和我谈话，然后再做决定。这个律师就是我们对象的代理，有人想要修改 obj 对象，必须先经过律师那一关。

基本概念其实不复杂，有些小伙伴不太理解的原因大多是平时写代码的时候，以为对象就是一个独立的变量，比如声明了一个对象 obj={name:"小猪课堂"}，我们通常也不会去做什么拦截，想改就改。

这就是一个惯性思维！

2.如何使用

既然我们知道了 Proxy 的作用，那么我们如何使用它呢？或者说如何给一个对象创建代理。

Proxy 的使用非常简单，我们可以使用 new 关键字实例化它。

代码如下：

const p = new Proxy(target, handler)

代码非常的简单，重点是我们需要掌握 Proxy 接收的参数。

参数说明

target:

需要被代理的对象，它可以是任何类型的对象，比如数组、函数等等，注意不能是基础数据类型。

示例代码：

<script>
  let obj = {
    name: '小猪课堂',
    age: 23
  }
  let p = new Proxy(obj, handler);
</script>

handler:

它是一个对象，该对象的属性通常都是一些函数，handler 对象中的这些函数也就是我们的处理器函数，主要定义我们在代理对象后的拦截或者自定义的行为。handler 对象的的属性大概有下面这些，具体使用方法我们在后面章节详解：

• handler.apply()
• handler.construct()
• handler.defineProperty()
• handler.deleteProperty()
• handler.get()
• handler.getOwnPropertyDescriptor()
• handler.getPrototypeOf()
• handler.has()
• handler.isExtensible()
• handler.ownKeys()
• handler.preventExtensions()
• handler.set()
• handler.setPrototypeOf()

我们使用 new 关键词后生成了一个代理对象 p，它就和我们原来的对象 obj 一样，只不过它是一个 Proxy 对象，我们打印出来看看就能更好理解了。

示例代码：

<script>
  let obj = {
    name: '小猪课堂',
    age: 23
  }
  let p = new Proxy(obj, {});
  console.log(obj);
  console.log(p);
</script>

输出结果：

3.Handler 对象详解

上一节的使用只是简单的初始化了一个代理对象，而我们需要重点掌握的是 Proxy 对象中的 handler 参数。因为我们所有的拦截操作都是通过这个对象里面的函数而完成的。

就好比律师全权代理了我们，那他拦截之后能做什么呢？或者说律师拦截之后他有哪些能力呢？这就是我们 handler 参数对象的作用了，接下来我们就一一来讲解下。

3.1 handler.apply

该方法主要用于函数调用的拦截，比如我们代理的对象是一个函数，那么我们代理这个函数之后，可以在它调用之前做一些我们想做的事。

语法：

// 函数拦截
let p1 = new Proxy(target, {
  apply: function (target, thisArg, argumentsList) {
  }
});

参数解释：

• target：被代理对象，也就是目标函数
• thisArg：调用时的上下文对象，也就是 this 指向，它绑定在 handler 对象上面
• argumentsList：函数调用的参数数组

使用案例：

function sum(a, b) {
  return a + b;
}
let p1 = new Proxy(sum, {
  apply: function (target, thisArg, argumentsList) {
    return argumentsList[0] + argumentsList[1] * 100;
  }
});
// 正常调用
console.log(sum(1, 2)); // 3
// 代理之后调用
console.log(p1(1, 2)); // 201

上段代码中我们代理了 sum 函数对象，并产生了新的 p1 代理对象，在 p1 代理对象里面，我们对函数的调用做了拦截，让它返回了新的值。

注意：

我们这里代理的函数对象必须是可调用的，也就是 target 可调用，否则会报错。

3.2 handler.construct

该方法主要是用于拦截 new 操作符的，我们通常使用 new 操作符都是在函数的情况下，但是我们不能说 new 操作符只能作用与函数，确切的说 new 操作符必须作用于自身带有[[Construct]]内部方法的对象上，而这种对象通常就是函数，总之一句话，使用 new targe 是必须有效的。

语法：

// 构造函数拦截
let p2 = new Proxy(target, {
  construct: function (target, argumentsList, newTarget) {
  }
});

参数解释：

• target：被代理对象，需要能够使用 new 操作符初始化它的实例，通常就是一个函数
• argumentsList：使用 new 操作符是传入的参数列表
• newTarget：被调用的构造函数，也就是 p2

使用案例：

let p2 = new Proxy(function () { }, {
  construct: function (target, argumentsList, newTarget) {
    return { value: '我是' + argumentsList[0] };
  }
});
console.log(new p2("小猪课堂")); // {value: '我是小猪课堂'}

上段代码中 p2 就是一个构造函数，只不过是代理之后的新函数，我们使用 new 操作符实例化它的，首先就会去执行 handler 里面的 construct 方法。

注意：

这里有两个点需要大家注意

• target 必须能够使用 new 操作符初始化
• construct 必须返回一个对象

3.3 handler.defineProperty

这个方法其实比较有意思，Object.defineProperty 方法本身就有拦截对象的意思在里面，但是我们的 Proxy 对象可以正针对 Object.defineProperty 操作进行拦截，对于 Object.defineProperty 方法不熟悉的同学可以先去学学。

语法：

// 拦截 Object.defineProperty
let p3 = new Proxy(target, {
  defineProperty: function (target, property, descriptor) {
  }
});

参数解释：

• target：被代理对象
• property：属性名，也就是当我们使用 Object.defineProperty 操作的对象的某个属性
• descriptor：待定义或修改的属性的描述符

使用案例：

let p3 = new Proxy({}, {
  defineProperty: function (target, property, descriptor) {
    descriptor.enumerable = false; // 修改属性描述符
    console.log(property, descriptor);
    return true;
  }
});
let desc = { configurable: true, enumerable: true, value: 10 };
Object.defineProperty(p3, 'a', desc); // a {value: 10, enumerable: false, configurable: true}

上段代码中我们使用 Proxy 代理了一个空对象，并产生了新的代理对象 p3，当使用 Object.defineProperty 操作 p3 对象时，就会触发 handler 中的 defineProperty 方法。

注意：

• 被代理的对象必须要能被扩展
• hanlder 中的 defineProperty 方法必须返回一个 Boolean 值
• 不能添加或者修改一个属性为不可配置的，如果它不作为一个目标对象的不可配置的属性存在的话

3.4 handler.deleteProperty

该方法用于拦截对对象属性的 delete 操作，我们经常使用 delete 删除对象中的某个属性，我们可以使用 deleteProperty 方法对该做进行拦截。

语法：

let p4 = new Proxy(target, {
  deleteProperty: function (target, property) {
  }
});

参数解释：

• target：被代理的目标对象
• property：将要被删除的属性

使用案例：

let p4 = new Proxy({}, {
  deleteProperty: function (target, property) {
    console.log("将要删除属性：", property)
  }
});
delete p4.a; // 将要删除属性：a

当我们删除 p4 对象的属性时，便会执行 handler 中的 deleteProperty 方法。

注意：

代理的目标对象的属性必须是可配置的，即可以删除，否则会报错。

3.5 handler.get

该方法用于拦截对象的读取属性操作，比如我们要读取某个对象的属性，就可以使用该方法进行拦截。

语法：

// 拦截读取属性操作
let p5 = new Proxy(target, {
  get: function (target, property, receiver) {
  }
});

参数解释：

• target：被代理的目标对象
• property：想要获取的属性名
• receiver：Proxy 或者继承 Proxy 的对象

使用案例：

// 拦截读取属性操作
let p5 = new Proxy({}, {
  get: function (target, property, receiver) {
    console.log("属性名：", property); // 属性名：name
    console.log(receiver); // Proxy {}
    return '小猪课堂'
  }
});
console.log(p5.name); // 小猪课堂

可以看到我们代理的对象其实是一个空对象，但是我们获取 name 属性是是返回了值的，其实是在 handler 对象中的 get 函数返回的。

注意：

代理的对象属性必须是可配置的，get 函数可以返回任意值。

3.6 handler.getOwnPropertyDescriptor

该方法用于拦截 Object.getOwnPropertyDescriptor 操作，也可以说它是该方法的钩子，如果对 getOwnPropertyDescriptor 还不熟悉的小伙伴可以先去了解一下。

语法：

let p6 = new Proxy(target, {
  getOwnPropertyDescriptor: function (target, prop) {
  }
});

参数解释：

• target：被代理的目标对象
• prop：返回属性名称的描述

使用案例：

let p6 = new Proxy({ name: '小猪课堂' }, {
  getOwnPropertyDescriptor: function (target, prop) {
    console.log('属性名称：' + prop); // 属性名称：name
    return { configurable: true, enumerable: true, value: '张三' };
  }
});
console.log(Object.getOwnPropertyDescriptor(p6, 'name').value); // 张三

上段代码中我们在拦截其中重新设置了属性描述，所以最后打印的 value 是”张三“。

注意：

• getOwnPropertyDescriptor 必须返回一个 object 或 undefined。
• 使用 getOwnPropertyDescriptor 时，目标对象的该属性必须存在

3.7 handler.getPrototypeOf

当我们读取代理对象的原型时，会触发 handler 中的 getPrototypeOf 方法。

语法：

let p7 = new Proxy(obj, {
  getPrototypeOf(target) {
  }
});

参数解释：

• target：被代理的目标对象

使用案例：

let p7 = new Proxy({}, {
  getPrototypeOf(target) {
    return { msg: "拦截获取对象原型操作" }
  }
});
console.log(p7.__proto__); // {msg: '拦截获取对象原型操作'}

以下操作会触发代理对象的该拦截方法：

• Object.getPrototypeOf()
• Reflect.getPrototypeOf()
• __proto__
• Object.prototype.isPrototypeOf()
• instanceof

注意：

getPrototypeOf 方法必须返回一个对象或者 null。

3.8 handler.has

该拦截方法主要是针对 in 操作符的，in 操作符通常用来检测某个属性是否存在某个对象内。

语法：

let p8 = new Proxy(target, {
  has: function (target, prop) {
  }
});

参数解释：

• target：被代理的目标对象
• prop：需要检查是否存在的属性

以下操作可以触发该拦截函数：

• 属性查询：foo in proxy
• 继承属性查询：foo in Object.create(proxy)
• with 检查: with(proxy) { (foo); }
• Reflect.has()

使用案例：

let p8 = new Proxy({}, {
  has: function (target, prop) {
    console.log('检测的属性: ' + prop); // 检测的属性: a
    return true;
  }
});
console.log('a' in p8); // true

上段代码中我们代理对象是其实没有 a 属性，但是我们拦截之后直接返回的一个 true。

注意：

has 函数返回的必须是一个 Boolean 值。

3.9 handler.isExtensible

Object.isExtensible()方法主要是用来判断一个对象是否可以扩展，handler 中的 isExtensible 方法可以拦截该操作。

语法：

// 拦截 Object.isExtensible()
let p9 = new Proxy(target, {
  isExtensible: function (target) {
  }
});

参数解释：

• target：被代理的目标对象

使用案例：

let p9 = new Proxy({}, {
  isExtensible: function (target) {
    console.log('操作被拦截了');
    return true;
  }
});
console.log(Object.isExtensible(p9));

注意：

isExtensible 方法必须返回一个 Boolean 值或可转换成 Boolean 的值。

3.10 handler.ownKeys

静态方法 Reflect.ownKeys() 返回一个由目标对象自身的属性键组成的数组。handler 对象的 ownKeys 方法可以拦截该操作，除此之外，还有一些其它操作也会触发 ownKeys 操作。

语法：

let p10 = new Proxy(target, {
  ownKeys: function (target) {
  }
});

参数解释：

• target：被代理的目标对象

以下操作会触发拦截：

• Object.getOwnPropertyNames()
• Object.getOwnPropertySymbols()
• Object.keys()
• Reflect.ownKeys()

使用案例：

let p10 = new Proxy({}, {
  ownKeys: function (target) {
    console.log('被拦截了');
    return ['a', 'b', 'c'];
  }
});
console.log(Object.getOwnPropertyNames(p10)); // ['a', 'b', 'c']

注意：

ownKeys 的结果必须是一个数组，数组的元素类型要么是一个 String，要么是一个 Symbol。

3.11 handler.preventExtensions

Object.preventExtensions()方法让一个对象变的不可扩展，也就是永远不能再添加新的属性。handler.preventExtensions 可以拦截该项操作。

语法：

let p11 = new Proxy(target, {
  preventExtensions: function (target) {
  }
});

参数解释：

• target：被代理的目标对象

使用案例：

let p11 = new Proxy({}, {
  preventExtensions: function (target) {
    console.log('被拦截了');
    Object.preventExtensions(target);
    return true
  }
});


Object.preventExtensions(p11);

以下操作会触发拦截：

• Object.preventExtensions()
• Reflect.preventExtensions()

注意：

如果目标对象是可扩展的，那么只能返回 false

3.12 handler.set

当我们给对象设置属性值时，将会触发该拦截。

语法：

let p12 = new Proxy(target, {
  set: function (target, property, value, receiver) {
  }
});

参数解释：

• target：被代理的目标对象
• property：将要被设置的属性名
• value：新的属性值
• receiver：最初被调用的对象，通常就是 proxy 对象本身

以下操作会触发拦截：

• 指定属性值：proxy[foo] = bar 和 proxy.foo = bar
• 指定继承者的属性值：Object.create(proxy)[foo] = bar
• Reflect.set()

使用案例：

let p12 = new Proxy({}, {
  set: function (target, property, value, receiver) {
    target[property] = value;
    console.log('property set: ' + property + ' = ' + value); // property set: a = 10
    return true;
  }
});
p12.a = 10; 

注意：

set() 方法应当返回一个布尔值

3.13 handler.setPrototypeOf

Object.setPrototypeOf() 方法设置一个指定的对象的原型，当调用该方法修改对象的原型时就会触发该拦截。

语法：

let p13 = new Proxy(target, {
  setPrototypeOf: function (target, prototype) {
  }
});

参数解释：

• target：被代理的目标对象
• prototype：对象新原型或者为 null

使用案例：

let p13 = new Proxy({}, {
  setPrototypeOf: function (target, prototype) {
    console.log("触发拦截"); // 触发拦截
    return true;
  }
});
Object.setPrototypeOf(p13, {name: '小猪课堂'})

注意：

如果成功修改了[[Prototype]], setPrototypeOf 方法返回 true,否则返回 false。

总结

很多小伙伴可能因为 Vue3 的原因知道了 Proxy 代理的存在，但是很多都只了解 set、get 等方法，其实 Proxy 提供了很多拦截供我们使用，具体在什么场景下使用什么拦截函数，还需要自己独立思考。