How to use proxy and reflect and application example analysis

This article describes how to use ES6 proxy and reflect. Share it for your reference, as follows:

proxy and reflect are both new APIs provided by es6 to better operate objects. Next, let’s discuss the role of the two and connect them.

Design proxy, reflect function:

The role of proxy:

Proxy is designed to (modify the programming language) and modify the default behavior of certain operating methods.

It is equivalent to making modifications at the language level, which is meta programming.For example, modify the set and get method

The function of reflect:

1. Mapping some methods that obviously belong to the object language are currently coexisting inObjectand Reflect, only on Reflect in the future

2. Modify someObjectThe method returns the result, reducing exception throwing, making it more reasonable

3. LetObjectAll operations become function behavior (main function)

4，ReflectObject methods andProxyThe object methods correspond one by one (main function)

How to proxy and reflect:

Example method of proxy:

var person = {
 name: "Zhang San"
};
 
var proxy = new Proxy(person, {
 get: function(target, property) {
  if (property in target) {
   return target[property];
  } else {
   throw new ReferenceError("Property \"" + property + "\" does not exist.");
  }
 }
});

Note:Inside the target objectthisThe keyword will point to the Proxy proxy

Your own method:Method returns a cancelable Proxy instance

static method of reflect:

Corresponding to proxy, reflect has 13 static methods, one by one, corresponding to the proxy instance methods.

proxy and reflect contact: the instance method of proxy and the static method of reflect correspond one by one

Example: Implementation of Observer Mode

const queuedObservers = new Set();
 
const observe = fn => (fn);//Receive a function fnconst observable = obj => new Proxy(obj, {set});//Receive an object obj, use the set function to intercept and set obj 
function set(target, key, value, receiver) {
 const result = (target, key, value, receiver);
 (observer => observer());
 return result;
}

Interested friends can use itOnline HTML/CSS/JavaScript code running tool：http://tools./code/HtmlJsRunTest the above code running effect.

For more information about JavaScript, please view the special topic of this site: "Summary of JavaScript DOM skills》、《Summary of JavaScript page element operation skills》、《A complete collection of JavaScript event-related operations and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript Errors and Debugging Skills》

I hope this article will be helpful to everyone's JavaScript programming.