谈一下你对ES6的代理模式-Proxy的理解

我们都知道Vue3.0的数据响应式原理是基于ES6的Proxy实现的，那么ES6新增的Proxy到底是什么呢？它究竟是如何能够替代Object.defineProperty（）去实现数据响应式。这篇文章带你深入了解Proxy对象是如何做到拦截的

一、什么是代理模式

代理模式（英语：Proxy Pattern）是程序设计中的一种设计模式。

所谓的代理者是指一个类别可以作为其它东西的接口。代理者可以作任何东西的接口：网络连接、内存中的大对象、文件或其它昂贵或无法复制的资源。

著名的代理模式例子为引用计数（英语：reference counting）指针对象。

当一个复杂对象的多份副本须存在时，代理模式可以结合享元模式以减少内存用量。典型作法是创建一个复杂对象及多个代理者，每个代理者会引用到原本的复杂对象。而作用在代理者的运算会转送到原本对象。一旦所有的代理者都不存在时，复杂对象会被移除。

上面是维基百科中对代理模式的一个整体的定义.而在JavaScript中代理模式的具体表现形式就是ES6中的新增对象---Proxy

Proxy定义

Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

简单来说: Proxy 对象就是可以让你去对JavaScript中的一切合法对象的基本操作进行自定义.然后用你自定义的操作去覆盖其对象的基本操作.也就是当一个对象去执行一个基本操作时,其执行的过程和结果是你自定义的,而不是对象的。

使用 Proxy 的好处是：对象只需关注于核心逻辑，一些非核心的逻辑（如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等）可以让 Proxy 来做。从而达到关注点分离，降级对象复杂度的目的。

Proxy语法

let target = { /*目标对象的属性*/ }; //目标对象

let handler = { /*用来定制拦截操作*/ }; //拦截层对象

let proxy = new Proxy(target, handler); //实例化

Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法（所要使用的功能不同，写法不同）。

new Proxy()表示生成一个Proxy实例，作为代理对象；

target表示所要拦截的目标对象；

handler声明了代理 target 的指定行为，表示一个用来定制拦截行为的对象。

举个例子说明​​​​​​​

let target = { name: "张三" }; //target目标对象

console.log(target.name);

//未拦截时，结果是原来的 "张三"

let handler = {

get: function (target, prokey) {

console.log(target, prokey);

// target: 被代理对象本身 {name: '张三'}

// prokey: 当前读取or修改的对象键 'name'

return "李四"; //定制拦截行为，将 name 改为李四

},

};

//实例化一个proxy对象 调用 b(拦截层) 对 a(目标对象) 进行 拦截 与 修改

let p = new Proxy(target, handler); //代理对象实例化，参数是 target 和 handler

console.log(p.name); //结果改变了 '李四'

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

var target = {};

var proxy = new Proxy(target, {});

proxy.a = "a";

console.log(target.a); //a

二、Proxy实例的方法

ES6 中的proxy目前提供了13种可代理操作拦截的行为。

get（）

get方法用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身（严格地说，是操作行为所针对的对象），其中最后一个参数可选。

声明一个target对象，访问一个对象自身不存在的属性时，返回的是undefind，但是我们可以拦截该行为，并将该操作修改为error（抛出错误）

未拦截前​​​​​​​

let target = {

name: "李白",

};

console.log(target.age); //结果为undefind

拦截后​​​​​​​

let person = {

name: "李白",

};

let proxy = new Proxy(person, {

get: function (target, propKey) {

if (propKey in target) {

return target[propKey];

} else {

throw new ReferenceError(

'Prop name "' + propKey + '" does not exist.'

);

}

},

});

console.log(proxy.name); // "李白"

console.log(proxy.age); // 抛出一个错误

// ReferenceError: Prop name "age" does not exist.

前面说到，第三个参数是proxy本身，我们利用proxy提供的属性getReceiver与proxy比较验证​​​​​​​

let a = {}; //目标对象

let myProxy = new Proxy(a, {

get: function (target, key, receiver) {

return receiver;

},

});

if (myProxy.getReceiver === myProxy) {

console.log("true");

} else {

console.log("false");

}

set（）

set用于拦截某个属性的赋值操作，依次为目标对象、属性名、属性值和 proxy 实例本身，其中最后一个参数可选。

举个例子：假设目标对象的age属性，利用set给age属性的属性值添加条件，保证age的属性值符合要求​​​​​​​

let a = {}; //目标对象

let b = {

set: function (target, key, value) {

if (key === "age") {

if (value > 100) {

//抛出一个错误

throw new RangeError("The age seems invalid");

}

}

//满足条件 直接保存值

target[key] = value;

return true;

},

};

let myproxy = new Proxy(a, b);

myproxy.age = 80; //命名一个小于100的值，正常运行

console.log(myproxy.age); //正常运行

myproxy.age = 200; //命名一个大于100的值

console.log(myproxy.age);

利用proxy调用第四个参数判断是否与已知值全等​​​​​​​

let b = {

set: function (target, key, value, receiver) {

target[key] = receiver;

return true;

},

};

let myproxy = new Proxy({}, b);

myproxy.name = myproxy; //将name属性赋值为myproxy

if (myproxy.name === myproxy) {

//判断是否为myproxy

console.log("true");

} else {

console.log("false");

}

结果

apply（）

apply（）拦截函数的调用，接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。

举个例子:​​​​​​​

var target = function () {

return "target";

};

var handler = {

apply: function () {

return "proxy";

},

};

const p = new Proxy(target, handler);

console.log(p()); // proxy

变量p是 Proxy 的实例，当它作为函数调用时p(），就会被apply方法拦截，返回一个字符串。

    has（）

has（）用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。接受两个参数，分别是目标对象、需查询的属性名。​​​​​​​

var handler = {

has(target, key) {

return key in target;

},

};

var target = { prop: "foo" };

var proxy = new Proxy(target, handler);

console.log("prop" in proxy); // true

console.log("propa" in proxy); // false

如果原对象不可配置或者禁止扩展，这时has拦截会报错。​​​​​​​

const obj = { a: 10 };

Object.preventExtensions(obj);

var p = new Proxy(obj, {

has: function (target, prop) {

return false;

},

});

console.log("a" in p);

has方法拦截的是HasProperty操作，而不是HasOwnProperty操作，即has方法不判断一个属性是对象自身的属性，还是继承的属性。

construct()

construct()拦截了new操作，接受三个参数，目标对象，构造函数的参数对象，new命令作用的构造函数。​​​​​​​

const p = new Proxy(function () {}, {

construct: function (target, args) {

console.log("called: " + args.join(", "));

return { value: args[0] * 10 };

},

});

new p(1).value;

construct()返回的必须是一个对象，否则会报错。

const p = new Proxy(function () {}, {

construct: function (target, argumentsList) {

return 1;

},

});

new p(); // 报错

// Uncaught TypeError: 'construct' on proxy: trap returned non-object ('1')

更多的处理函数

handler对象内还有以下处理函数：

defineProperty()：拦截对对象的 Object.defineProperty() 操作

getOwnPropertyDescriptor()：Object.getOwnPropertyDescriptor 调用劫持

getPrototypeOf() ：拦截对象原型的读取操作

isExtensible()：拦截对对象的 Object.isExtensible()

ownKeys()：Object.getOwnPropertyNames 和Object.getOwnPropertySymbols的调用劫持

preventExtensions()：对Object.preventExtensions()的拦截

setPrototypeOf()：拦截 Object.setPrototypeOf()

总结

深入了解了Proxy之后，真的会被它强大的代理拦截功能所折服，在它的基础上我们可以创建几乎任何我们想要的响应式系统，它像是一个硕大的地基，至于地基之上需要建筑什么，全由我们自己掌握！

看完本篇文章相信你已经对Proxy有了深入的理解，学习Proxy是我们学习像Vue3这种响应式原理的第一步，大家加油！