Proxy和Reflect学习

最近在网上看到一个很有意思的例子叫 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 (typeof prop !== '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 });
    }
});

然后访问百度

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

通过 Async/await 使用

const response = await www.baidu.com
console.log(response.ok) // ==> true
console.log(response.status); // ==> 200

一、什么是Proxy?

此处引用阮一峰在ES6教程中的话

Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。
Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。
https://es6.ruanyifeng.com/#docs/proxy

据我理解，Proxy 实际上重载（overload）了点运算符，即用自己的定义覆盖了语言的原始定义。

比如：

var obj = new Proxy({}, {
   get: function (target, propKey, receiver) {
     console.log(getting ${propKey}!);
     return Reflect.get(target, propKey, receiver);
   },
   set: function (target, propKey, value, receiver) {
     console.log(setting ${propKey}!);
     return Reflect.set(target, propKey, value, receiver);
   }
 });
 obj.count = 1
 //  setting count!
 ++obj.count
 //  getting count!
 //  setting count!
 //  2

二、什么是Reflect?

将Object对象的一些明显属于语言内部的方法（比如Object.defineProperty），放到Reflect对象上。现阶段，某些方法同时在Object和Reflect对象上部署，未来的新方法将只部署在Reflect对象上。也就是说，从Reflect对象上可以拿到语言内部的方法。
修改某些Object方法的返回结果，让其变得更合理。比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。
让Object操作都变成函数行为。某些Object操作是命令式，比如name in obj和delete obj[name]，而Reflect.has(obj, name)和Reflect.deleteProperty(obj, name)让它们变成了函数行为。
Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。这就让Proxy对象可以方便地调用对应的Reflect方法，完成默认行为，作为修改行为的基础。也就是说，不管Proxy怎么修改默认行为，你总可以在Reflect上获取默认行为

上面的Proxy方法用到了第4点

var loggedObj = new Proxy(obj, {
   get(target, name) {
     console.log('get', target, name);
     return Reflect.get(target, name);
   },
   deleteProperty(target, name) {
     console.log('delete' + name);
     return Reflect.deleteProperty(target, name);
   },
   has(target, name) {
     console.log('has' + name);
     return Reflect.has(target, name);
   }
 });

在Proxy中，你可以通过Refect 获取原对象的默认行为

改一下上面例子中的fetch函数，用axios代替，再来看看，好像看明白了(该例子安装axios即可运行)

const axios = require('axios')
 const www = new Proxy(new URL('https://www'), {
     get: function get(target, prop) {
         console.log(target)
         console.log(prop)
         let o = Reflect.get(target, prop);
         if (prop === 'then') {
             console.log(target)
             return Promise.prototype.then.bind(axios.get(target.toString()))
         }
         target = new URL(target);
         target.hostname += .${prop}
         return new Proxy(target, { get })
     }
 })
 www.baidu.com.then(response => {
     console.log(response)
 })

首先，www.baidu.com.then 遇到点就会执行Proxy拦截；第一次的时候 www.baidu 然后就会去Proxy里面调用get请求，target 就是 new URL('https://www') ，prop 就是baidu，然后他们满足prop === ‘then’ 的条件，就会再次将target进行代理，target也是URL对象，不同的是，target的hostname加上了.baidu这个。

后面类似，直到遇到then 的时候，就会通过axios对URL对象进行调用，发起http请求。

学会Proxy对象真的可以为所欲为~~~