# 什么是 Proxy
Proxy 对象用于创建一个对象的代理，是用于监听一个对象的相关操作。代理对象可以监听我们对原对象的操作。
接下来我们将通过一个监听对象的属性操作来认识学习下什么是 Proxy 。
Proxy 对象需要传入两个参数，分别是需要被 Proxy 代理的对象和一系列的捕获器（PS：下面会讲）。
const obj = { | |
name: 'mengke', | |
}; | |
const objProxy = new Proxy(obj, {}); | |
console.log(objProxy); |
⏷ Proxy | |
🞂 [[Handler]]: Object | |
⏷ [[Target]]: Object | |
name: "mengke" | |
🞂 [[Prototype]]: Object | |
[[IsRevoked]]: false |
打印出来可以看到的是一个 Proxy 对象。下面我们开始看看 Proxy 中的捕获器对象。
# Proxy 捕获器
在实例化 Proxy 对象时，第二个参数传入的是捕获器集合，我们在其对象内定义一个 get 捕获器，用于监听获取对象值的操作。
// 定义一个普通的对象 obj | |
const obj = { | |
name: 'mengke', | |
}; | |
// 代理 obj 这个对象，并传入 get 捕获器 | |
const objProxy = new Proxy(obj, { | |
//get 捕获器 | |
get: function (target, key) { | |
console.log(`捕获到对象获取${key}属性的值操作`); | |
return target[key]; | |
}, | |
}); | |
// 通过代理对象操作 obj 对象 | |
console.log(objProxy.name); | |
// 捕获到对象获取 name 属性的值操作 | |
// mengke |
在 objProxy 对象的拦截器中新增一个捕获器 set ，用于监听对象的某个属性被设置时触发。
//set 捕获器 | |
set: function (target, key, val) { | |
console.log(`捕获到对象设置${key}属性的值操作,新值为${val}`); | |
target[key] = val; | |
} | |
console.log(objProxy.name = "AAAAA"); | |
// 捕获到对象设置 name 属性的值操作，新值为 AAAAA | |
console.log(objProxy.name); | |
// 捕获到对象获取 name 属性的值操作 | |
// AAAAA |
如果不想这个属性被设定这个值，你可以抛出异常告诉开发者，该值不能被设定。
set: function (target, key, val) { | |
if (key==='age' && typeof val === "number") { | |
target[key] = val; | |
} else { | |
throw new TypeError("该属性的值必须是Number类型"); | |
} | |
} |
我们也可以监听对象是否调用了 getPrototypeOf 操作，使用 getPrototypeOf 捕获器即可。
// 监听 getPrototypeOf | |
getPrototypeOf: () => { | |
console.log(`监听到对象getPrototypeOf操作`); | |
}, |
在 Proxy 中共有 13 个捕获器，它们用于我们对对象、函数的方法调用监听。下面是 Proxy 捕获器以及它们的触发条件。
| 对象中的方法 | 对应触发条件 |
|---|---|
| handler.getPrototypeOf() | handler.getPrototypeOf 方法的捕捉器 |
| handler.setPrototypeOf() | Object.setPrototypeOf 方法的捕捉器 |
| handler.isExtensible() | Object.isExtensible 方法的捕捉器 |
| handler.preventExtensions() | Object.preventExtensions 方法的捕捉器 |
| handler.getOwnPropertyDescriptor() | Object.getOwnPropertyDescriptor 方法的捕捉器 |
| handler.defineProperty() | Object.defineProperty 方法的捕捉器 |
| handler.has() | in 操作符的捕捉器 |
| handler.get() | 属性读取操作的捕捉器 |
| handler.set() | 属性设置操作的捕捉器 |
| handler.deleteProperty() | delete 操作符的捕捉器 |
| handler.ownKeys() | Object.getOwnPropertyNames 方法和 Object.getOwnPropertySymbols 方法的捕捉器 |
| handler.apply() | 函数被 apply 调用操作的捕捉器 |
| handler.construct() | new 操作符的捕捉器 |
# this 指向的问题
Proxy 对象可以对我们的目标对象进行访问，但没有做任何拦截时，也不能保证与目标对象的行为一致，因为目标对象内部的 this 会自动改变为 Proxy 代理对象。我们看下面这个例子就知道了。
const obj = { | |
name: 'mengke', | |
foo: function () { | |
return this === objProxy; | |
}, | |
}; | |
const objProxy = new Proxy(obj, {}); | |
console.log(obj.foo()); // false | |
console.log(objProxy.foo()); // true |
# 对象监听案例
某些场景下，需要监听一个对象的操作，当这个操作触发时执行另外的一个函数，就像 vue2 中的 watchApi ，它可以监听 data 数据中某个属性的改变并操作指定的函数。
我们看看下面这份代码，在 ES5 中使用 Object.defineProperty （对象属性描述符）对对象的监听，将一个对象进行遍历，并设定 getter 、 setter 方法进行监听和拦截。
// 定义一个 Object 对象 | |
const obj = { | |
name: 'mengke', | |
age: 18, | |
}; | |
Object.keys(obj).forEach((key) => { | |
let val = obj[key]; | |
Object.defineProperty(obj, key, { | |
get: function () { | |
console.log(key + '调用了 get 方法'); | |
return val; | |
}, | |
set: function (newVal) { | |
console.log(key + '调用了 set 方法'); | |
val = newVal; | |
}, | |
}); | |
}); | |
// 操作 obj 对象 | |
obj.name = 'AAAAA'; | |
//name 调用了 set 方法 | |
obj.age = 30; | |
//age 调用了 set 方法 | |
console.log(obj.name); | |
//name 调用了 get 方法 | |
// AAAAA |
Object.defineProperty 的设计初衷并不是为了去监听拦截一个对象中的属性，且他也实现不了更加丰富的操作，例如添加、删除属性等操作。所以在 ES6 中新增了 Proxy 对象，用于监听 Object 、 Function 的操作。
我们将上面通过 Object.defineProperty 实现对象监听的方法修改成 Proxy 方案。在 Vue3 框架中的响应式原理也是用到了 Proxy 对象进行对属性的监听操作。
const obj = { | |
name: 'mengke', | |
age: 18, | |
}; | |
const objProxy = new Proxy(obj, { | |
// 获取值时的捕获器 | |
get: function (target, key) { | |
console.log(`监听到了${key}被获取值`); | |
return target[key]; | |
}, | |
// 设置值时的捕获器 | |
set: function (target, key, newValue) { | |
console.log(`监听到了${key}被设置值`); | |
target[key] = newValue; | |
}, | |
}); | |
console.log(objProxy.name); | |
// 监听到了 name 被获取值 | |
// mengke | |
console.log(objProxy.age); | |
// 监听到了 age 被获取值 | |
// 18 | |
objProxy.name = 'AAAAA'; | |
// 监听到了 name 被设置值 | |
console.log(objProxy.name); | |
// 监听到了 name 被获取值 | |
// AAAAA |
# 总结
proxy 是一个的代理对象，它可以代理我们对原目标的操作。相比 Object.defineProperty 方法， Proxy 监听的事件效率更高。
