When I checked github today, I saw this code from JustJavac Po (justJavac /proxy-www) :

const www = new Proxy(new URL('https://www'), {
    get: function get(target, prop) {
        let o = Reflect.get(target, prop);
        if (typeof o === 'function') {
            return o.bind(target)
        }
        if (typeofprop ! = ='string') {
            return o;
        }
        if (prop === 'then') {
            return Promise.prototype.then.bind(fetch(target));
        }
        target = new URL(target);
        target.hostname += `.${prop}`;
        return new Proxy(target, { get }); }});Copy the code

It may seem obscure at first, but it’s amazing to use! You can access the url directly as a variable:

www.baidu.com.then(response= > {
    console.log(response.status);
    / / = = > 200
})
Copy the code

The async/await syntax makes it even simpler:

const response = await www.baidu.com

console.log(response.ok)
// ==> true

console.log(response.status);
/ / = = > 200
Copy the code

All of this comes from ES6’s Proxy and Reflect syntax, so let’s use this code to learn about them

A Proxy is a Proxy. Friends who have studied computer networks are certainly familiar with this word. In the computer network, proxy refers to the client does not directly connect to the server, but through some intermediate machines to transfer requests, so as to achieve the requirements of improving access speed and security.

Proxies in javascript work similarly, but instead of blocking servers and clients, they block objects and the users who use them. In this example, the Proxy is sandwiched between the new URL(” WWW “) and the user who wants to access or modify the URL:

const www = new Proxy(new URL('https://www'), {... }});Copy the code

Adding an additional layer of proxies naturally requires some customization, as the Proxy hijacks internal methods such as [[Get]], [[Set]] of the object by passing in a second parameter. This code hijacks [[Get]] :

const www = new Proxy(new URL('https://www'), {
    get: function get(target, prop) {... }});Copy the code

The replacement [[Get]] function takes two arguments: target, the original object, is the URL; Prop is the name of the object that needs to be accessed. For the www.baidu.com example, the first layer prop is “baidu” and the second layer prop is “com”.

Continuing with this code, we come across Reflect. Reflect is developed in conjunction with Proxy, which translates internal functions like [[Get]] and [[Set]] into functional calls. Reflect is often used in conjunction with a Proxy to re-impose a hijacked action on the original object. Here:

let o = Reflect.get(target, prop);
Copy the code

Can also be understood as:

let o = target[prop]
Copy the code

The rest of the code is easy to understand:

const www = new Proxy(new URL('https://www'), {
    get: function get(target, prop) {
        let o = Reflect.get(target, prop);
        // When the attribute of '[[Get]]' is' URL ', the existing function is returned
        / / fill: such as www.justjavac.com.toString ()
        if (typeof o === 'function') {
            return o.bind(target)
        }
        // Returns the current property when 'prop' is not a string
        // Add: The object key can only be a string and Symbol.
        // The usage scenario is www.justjavac.com + 'foo/bar'
        if (typeofprop ! = ='string') {
            return o;
        }
        // If 'prop' is' then ', the 'URL' is converted to 'after' fetch '
        / / ` Promise `. (As a result, the url 'www.then.com' cannot be called.)
        if (prop === 'then') {
            return Promise.prototype.then.bind(fetch(target));
        }
        // For the rest of the case, add the newly added string to the domain name and repackage a layer of 'Proxy'.
        target = new URL(target);
        target.hostname += `.${prop}`;
        return new Proxy(target, { get }); }});Copy the code

Note: Thanks for the author’s comments!

So at this point, do you understand this code? Do you have a basic understanding of how Proxy and Reflect are used? If you want to understand them in more depth, I recommend Proxy and Reflect by Wang Xiaojiang.