JS proxy

Proxy

Concept

One Proxy Object wraps another object and intercepts things like reads / Write properties and other operations , You can choose to handle them yourself , Or transparently allow the object to handle them .

Proxy Used in many libraries and some browser frameworks . In this paper , We will see many practical applications .

grammar

let proxy = new Proxy(target, handler)

Parameters

• target —— Is the object to be wrapped , It could be anything , Include function .

• handler —— Agent configuration ： with “ Catcher ”（“traps”, That is, the method of intercepting operations ） The object of . such as get The catcher is used to read target Properties of ,set The catcher is used to write target Properties of , wait .

  Yes proxy To operate , If in handler There is a corresponding catcher in , Then it will run , also Proxy Have the opportunity to deal with it , Otherwise, it will directly affect target To deal with .

Example

let target = {
    };
let proxy = new Proxy(target, {
    }); //  Empty  handler  object 

proxy.test = 5; //  write in  proxy  object  (1)
alert(target.test); // 5,test  The attribute appears in  target  in ！

alert(proxy.test); // 5, We can also from  proxy  Object to read it  (2)

for(let key in proxy) alert(key); // test, Iterations also work  (3)

Because there is no catcher , All right proxy All operations are forwarded directly to target.

1. Write operation proxy.test= Will write the value to target.
2. Read operation proxy.test From target Return the corresponding value .
3. iteration proxy From target Return the corresponding value .

We can see , There are no snaps ,proxy It's a target Transparent wrapper for （wrapper）.

Common traps

get

To intercept read operations ,handler Should have get(target, property, receiver) Method .

Parameters

• target —— It's the target , This object is passed as the first parameter to new Proxy,
• property —— Target property name ,
• receiver —— If the target attribute is a getter Accessor properties , be receiver This is where the attribute is read this time this object . Usually , This is it. proxy Object itself （ perhaps , If we're from proxy Inherit , From this proxy Inherited objects ）.

Example ：

let numbers = [0, 1, 2];

numbers = new Proxy(numbers, {
    
  get(target, prop) {
    
    if (prop in target) {
    
      return target[prop];
    } else {
    
      return 0; //  The default value is 
    }
  }
});

alert( numbers[1] ); // 1  Note that if numbers = [0, 2, 1] The result is 2. Because the return is target[prop]
alert( numbers[123] ); // 0（ Without this array item ）

Be careful

The proxy should completely replace the target object everywhere . After the target object is proxied , No one should ever reference the target object again . Otherwise, it's easy to screw up .

set

Suppose we want an array dedicated to numbers . If you add other types of values , You should throw an error .

When writing an attribute set The catcher is triggered .

set(target, property, value, receiver)

Parameters

• target —— It's the target , This object is passed as the first parameter to new Proxy,
• property —— Target attribute name ,
• value —— The value of the target property ,
• receiver —— And get The catcher is similar to , Only with setter Accessor properties are related .

Example

let numbers = [];

numbers = new Proxy(numbers, {
     // (*)
  set(target, prop, val) {
     //  Block write attribute operations 
    if (typeof val == 'number') {
    
      target[prop] = val;
      return true;
    } else {
    
      return false;
    }
  }
});

numbers.push(1); //  Add success 
numbers.push(2); //  Add success 
alert("Length is: " + numbers.length); // 2

numbers.push("test"); // TypeError（proxy  Of  'set'  return  false）

alert("This line is never reached (error in the line above)");

Don't forget to return true

about set operation , It must return... On successful writing true.

Other traps

Internal methods	Handler Method	When the trigger
[[Get]]	get	read attribute
[[Set]]	set	Write properties
[[HasProperty]]	has	in The operator
[[Delete]]	deleteProperty	delete The operator
[[Call]]	apply	Function call
[[Construct]]	construct	new The operator
[[GetPrototypeOf]]	getPrototypeOf	Object.getPrototypeOf
[[SetPrototypeOf]]	setPrototypeOf	Object.setPrototypeOf
[[IsExtensible]]	isExtensible	Object.isExtensible
[[PreventExtensions]]	preventExtensions	Object.preventExtensions
[[DefineOwnProperty]]	defineProperty	Object.defineProperty, Object.defineProperties
[[GetOwnProperty]]	getOwnPropertyDescriptor	Object.getOwnPropertyDescriptor, for..in, Object.keys/values/entries
[[OwnPropertyKeys]]	ownKeys	Object.getOwnPropertyNames, Object.getOwnPropertySymbols, for..in, Object.keys/values/entries