入门javascript_现代javascript代理入门

JavaScript proxies were introduced in 2015 with ECMAScript 6. They allow us to intercept and override operations such as object property lookup and assignment. A Proxy object wraps another object and acts as a middleman.

JavaScript代理是在2015年随ECMAScript 6引入的。它们使我们能够拦截和覆盖诸如对象属性查找和赋值之类的操作。 Proxy对象包装另一个对象并充当中间人。

句法 (Syntax)

A proxy is created using the new Proxy constructor with two required arguments: the target and the handler.

使用具有两个必需参数的new Proxy构造函数创建new Proxy ： target和handler 。

let proxy = new Proxy(target, handler)

• target — The object we wrap.

  target —我们包装的对象。

• handler — An object that defines the methods (also called traps) to control the behaviors of the target.

  handler —一个对象，它定义控制目标行为的方法(也称为陷阱 )。

A Proxy creates an undetectable barrier around the target object that redirects all operations to the handler object. If we send in an empty handler, the proxy is just an empty wrapper around the original object.

Proxy在目标对象周围创建了不可检测的屏障，该屏障将所有操作重定向到处理程序对象。 如果我们发送一个空的handler ，则代理只是原始对象周围的一个空包装器。

To give the proxy meaning, we need to add some functionality to the handler.

为了赋予代理含义，我们需要向处理程序添加一些功能。

陷阱 (Traps)

Whenever you interact with an object, you are calling an internal method. Proxies allow you to intercept the execution of a given internal method with traps.

每当与对象进行交互时，就在调用内部方法。 代理允许您使用陷阱拦截给定内部方法的执行。

So when we run user.name we are telling the JavaScript engine to call the internal [[GET]] method to retrieve the name property.

因此，当我们运行user.name我们在告诉JavaScript引擎调用内部的[[GET]]方法来检索name属性。

When we run proxyUser.name the get trap calls the get() function defined in the handler to execute before sending the call through to the original object.

当我们运行proxyUser.name ， get陷阱将调用handler定义的get()函数以将调用发送给原始对象之前执行。

得到 (Get)

The get() method has two required parameters:

get()方法具有两个必需的参数：

• target — Object passed to the proxy.

  target —传递给代理的对象。

• property — Name of the accessed property.

  property访问的属性的名称。

To customize the proxy, we define functions on the handler object. Here we define the get method to log the access:

为了自定义代理，我们在handler对象上定义函数。 在这里，我们定义了get方法来记录访问：

To let the call through, we return target[property].

为了让呼叫通过，我们返回target[property] 。

Now, if we create a proxy with this handler and try to access the original object, we log the call:

现在，如果我们使用此处理程序创建代理并尝试访问原始对象，则记录调用：

We can see that when we access a property of the user object via the proxyUser object, the get() method fires in the handler object.

我们可以看到，当我们通过proxyUser对象访问user对象的属性时， get()方法将在handler对象中触发。

组 (Set)

The set trap controls behavior when a property of the target object is assigned.

当分配target对象的属性时， 设置陷阱控制行为。

Let’s validate the input of the age value:

让我们验证age值的输入：

If we try to assign a wrong type to `age` an error is thrown:

如果我们尝试为“年龄”分配错误的类型，则会引发错误：

proxyUser.age = ‘old’;// -> TypeError: Age is just a number.

In the line target[property] = value we set the age property of the user object.

在target[property] = value ，设置user对象的age属性。

The set() method should return a boolean value true to indicate that the assignment succeeded. If the JavaScript is run in strict mode, and a falsy value or nothing is returned, an error will be thrown.

set()方法应返回一个布尔值true以指示分配成功。 如果JavaScript在严格模式下运行，并返回falsy值或没有，错误将被抛出。

Uncaught TypeError: ‘set’ on proxy: trap returned falsish for property ‘age’

In addition to intercepting reads and modifications to properties, Proxy can intercept a total of 13 operations.

除了拦截读取和对属性的修改之外，Proxy还可拦截总共13个操作。

结论 (Conclusion)

We have learned how we can use a proxy to spy on objects. You should now be able to add behaviors to them by using trap methods in the handler object. We have only dipped our toes into proxies with a couple of basic examples but it’s enough to get started and inspired to explore the possibilities!

我们已经了解了如何使用代理来监视对象。 现在，您应该能够通过使用处理程序对象中的trap方法向其添加行为。 我们仅通过几个基本示例将脚趾深入到代理中，但是足以开始并启发您探索可能性！