怎么使用Proxy来代理Js中的类-创新互联

这篇文章将为大家详细讲解有关怎么使用Proxy来代理Js中的类，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

Proxy对象（Proxy）是ES6的一个非常酷却鲜为人知的特性。虽然这个特性存在已久，但是我还是想在本文中对其稍作解释，并用一个例子说明一下它的用法。如何使用Proxy来代理Js中的类？

如何使用代理Proxy

正如MDN上简单而枯燥的定义：

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

虽然这是一个不错的总结，但是我却并没有从中搞清楚Proxy能做什么，以及它能帮我们实现什么。

首先，Proxy的概念来源于元编程。简单的说，元编程是允许我们运行我们编写的应用程序（或核心）代码的代码。例如，臭名昭著的eval函数允许我们将字符串代码当做可执行代码来执行，它是就属于元编程领域。

ProxyAPI允许我们在对象和其消费实体中创建中间层，这种特性为我们提供了控制该对象的能力，比如可以决定怎样去进行它的get和set，甚至可以自定义当访问这个对象上不存在的属性的时候我们可以做些什么。

如何使用代理Proxy的API

varp=newProxy(target,handler);

Proxy构造函数获取一个target对象，和一个用来拦截target对象不同行为的handler对象。你可以设置下面这些拦截项：

has— 拦截in操作。比如，你可以用它来隐藏对象上某些属性。

get— 用来拦截读取操作。比如当试图读取不存在的属性时，你可以用它来返回默认值。

set—用来拦截赋值操作。比如给属性赋值的时候你可以增加验证的逻辑，如果验证不通过可以抛出错误。

apply—用来拦截函数调用操作。比如，你可以把所有的函数调用都包裹在try/catch语句块中。

这只是一部分拦截项，你可以在MDN上找到完整的列表。

下面是将Proxy用在验证上的一个简单的例子：

constCar={
　　maker:'BMW',
　　year:2018,
　　};
　　constproxyCar=newProxy(Car,{
　　set(obj,prop,value){
　　if(prop==='maker'&&value.length<1){
　　thrownewError('Invalidmaker');
　　}
　　if(prop==='year'&&typeofvalue!=='number'){
　　thrownewError('Invalidyear');
　　}
　　obj[prop]=value;
　　returntrue;
　　}
　　});
　　proxyCar.maker='';//throwexception
　　proxyCar.year='1999';//throwexception

可以看到，我们可以用Proxy来验证赋给被代理对象的值。

关于“怎么使用Proxy来代理Js中的类”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。