异步请求 - ES6 - Proxy

Proxy概述

Proxy - 代理

问：何为代理？
答：
 1.用 new 创建一个目标对象（target | 也叫被代理对象）的 #虚拟化对象#。
 2.不直接操作目标对象，而是通过操作代理对象实现对目标对象的操作。

简单用法

const p = new Proxy(target, handler);

target

要使用Proxy包装的目标对象（MDN说法是被虚拟化的对象）（可以是任何类型的对象，包括数组、函数...）。

handler

一个通常以函数作为属性的对象（代理的处理对象）。各属性中的函数分别定义了在执行各种操作时代理P的行为。 处理器对象，用来监视数据及数据的操作。 get方法监视属性的访问，set方法监视对象属性的更新。

handler.set() - 用于拦截 #设置属性值# 的操作

let data = {
    name: 'Elio'
}
let handler = {
    set(target, prop, value) {
        // targer - 目标对象
        // prop - 更新的属性的属性名称
        // value - 更新的属性值
        console.log('set --' ,target, prop, value);
        return Reflect.set(target, prop, value);
    }
}

let proxy = new Proxy(data, handler);
console.log(proxy);

proxy.name = 'Marical'; // 触发handler.set()
console.log(proxy) // Proxy{name: 'Marial'}
console.log(data) // {name: 'Marial'}

handler.get() - 接收两个参数 target/prop

let data = {
    name: 'Elio'
}
let handler = {
    get(target, prop) {
        // target - 目标属性
        // prop - 外部访问的属性的属性名
        console.log('get -- ' ,target, prop);
        return Reflect.get(target,prop);
    }
}
let p = new Proxy(data, handler);
console.log(p); // 触发handler.get()

有注意到在set/get方法中，都会出现一个Reflect, 下面就来简析一下Reflect。

Reflect

Reflect对象与Proxy对象一样，也是ES6为了操作对象而提供的新的API。
我们需要在handler.set()中return一个Reflect.set(...arguments)来进行赋值给目标对象。

// 补充
Reflect是ES6中提供的一个全新的内置对象。
如果按照Java这类的语言的说法，Reflect属于静态类，无需通过new的方式去构建实例对象，只能通过类名调用静态类中的方法

Reflect.set()

// Reflect.set方法设置target对象的name属性等于value。如果name属性设置了赋值函数，则赋值函数的this绑定receiver。

Reflect.get()

// Reflect.get方法查找并返回target对象的name属性，如果没有改属性，则返回undefined。