Proxy and Reflect understand

origin

---

Recently, a lot of children's shoes have asked me privately about this issue. I just have a little time, so I wrote an article to popularize science!

The relationship between proxy and Reflect

---

Similarities: APIs are the same, often mixed use
Differences: proxy can be regarded as a proxy, middleware, and Reflect is the API provided by the operation object, which can be regarded as an upgraded version of Object, which increases compatibility and is friendly to browsers and users!

The more difficult point in the proxy

---

For details about proxy, you can read the documentation. The more difficult point is actually how to proxy functions. Let’s take some time to read carefully.

Here we look at 2 APIs

• apply
• construct

apply is call interception, simply speaking, it is interception when calling.
Example 1:

var target = function () { return 'target'; };
var handler = {
  apply: function () {
    return 'proxy';
  }
};

var p = new Proxy(target, handler);

p()  // "proxy"

Example 2:

var handler = {
  apply (target, ctx, args) {
  console.log(args)
    return Reflect.apply(...arguments);
  }
};
var target = function () { return 'target'; };
var p = new Proxy(target, handler);

p(1, 2) 
// [1, 2]
// 'target'

Let's look at example 1 first. The p() call directly goes to the apply proxy and returns 'proxy'.
Also look at example 2, p(1, 2) call, go directly to the apply agent, print args, and the incoming [1, 2] appears, Reflect.apply(...arguments) is actually Reflect.apply(target, ctx, args ), and because Reflect can be regarded as Object/function, everything is an object, so Function.apply(target, ctx, args), that is, target.apply(ctx, args), so 'target' appeared

Example 3:

var handler = {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments);
  }
};
var target = function (a, b) { return a + b; };
var p = new Proxy(target, handler);

p(1, 2) 
// 3

According to the above logic, it is inferred that it is 3, is it very simple?

Next, let's talk about construct, this is the constructor, which is to trigger interception when new

Example 4:

const p = new Proxy(function () {}, {
  construct: function(target, args) {
    console.log('start: ' + args.join(', '));
    return { v: args[0] * 100 };
  }
});

(new p(1,2)),v
// start: 1,2
//100

This is very easy, pass in 1,2, construct intercepts, print out start: 1,2, args[0] is 1, and the value is naturally 100

Using proxy to implement an observer pattern

---

To put it bluntly, the observer mode is a linkage mode. When one side changes, the other side changes naturally. See the code

const observers = new Set();

const observed = fn => observers.add(fn);
const observable = obj => new Proxy(obj, {
	set: function(target, key, value, receiver) {
  		const result = Reflect.set(target, key, value, receiver);
  		observers.forEach(observer => observer());
  		return result;
	}
});

To put it simply, new Set an observer, and then add the monitored function to it. If you are not afraid of repetition, an array is also fine, and then use the set proxy of the proxy. As long as the set is triggered, the monitored object in the observed will be triggered at the same time, that's it Simple!

end

---

Good times are always short, and that’s all for today’s sharing, you have learned it!