What is the es6 proxy mode?

es6 proxy mode is a design pattern, which refers to a category that can be used as an interface for other things. The specific form of expression is the new Proxy object in es6; the Proxy object is used to define the customization of basic operations. Behavior, the syntax is "let p=new Proxy(target,handler);".

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What is the es6 proxy pattern?

The proxy pattern (English: Proxy Pattern) is a design pattern in programming.

The so-called agent refers to a category that can serve as an interface for other things. Brokers can interface with anything: network connections, large objects in memory, files, or other expensive or irreproducible resources.

The specific manifestation of the proxy mode in JavaScript is the new object in ES6---Proxy

The explanation of Proxy is:

Proxy objects are used to define custom behaviors for basic operations (such as property lookups, assignments, enumerations, function calls, etc.).

Simply put: The Proxy object allows you to customize the basic operations of all legal objects in JavaScript. Then use your customized operations to override the basic operations of its objects. That is, when a When an object performs a basic operation, the execution process and results are customized by you, not by the object.

:sweat: Well, it may be too complicated to express in words. Let’s go directly to the code. Right.

The syntax of Proxy is:

let p = new Proxy(target, handler);

• target is the object you want to proxy. It can be any legal object in JavaScript. For example: (array, object, function, etc.)

• handler is a collection of operation methods you want to customize.

• p is a The new object after being proxied has all the properties and methods of the target. However, its behavior and results are customized in the handler.

Then let us look at this code :

let obj = {
 a: 1,
 b: 2,
}
 
const p = new Proxy(obj, {
 get(target, key, value) {
  if (key === 'c') {
   return '我是自定义的一个结果';
  } else {
   return target[key];
  }
 },
 
 set(target, key, value) {
  if (value === 4) {
   target[key] = '我是自定义的一个结果';
  } else {
   target[key] = value;
  }
 }
})
console.log(obj.a) // 1
console.log(obj.c) // undefined
console.log(p.a) // 1
console.log(p.c) // 我是自定义的一个结果
obj.name = '李白';
console.log(obj.name); // 李白
obj.age = 4;
console.log(obj.age); // 4
p.name = '李白';
console.log(p.name); // 李白
p.age = 4;
console.log(p.age); // 我是自定义的一个结果

From the above code, I can clearly see the role of the Proxy object. It is the custom behavior used to define basic operations. The same get and set operations. The result of an object without a proxy is obtained by the execution mechanism of JavaScript itself. The result of a proxy object is our own.

The compatibility of Proxy is as follows:

[Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is the es6 proxy mode?. For more information, please follow other related articles on the PHP Chinese website!