Proxy （详解）

作者：小民不言语 ^_^
喜欢请关注会不定时更新 ***

介绍

Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。说白了就是对目标进行代理！

语法

const proxy = new Proxy(target, handler)

参数

target
要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

handler
一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 proxy 的行为。

基础示例

下面实现一个空对象的代理，我们通过get对属性的拦截,让访问任何属性都返回 35

// 创建需要代理的对象
const target = { }
// 定义代理的行为
const handler = {
    get(){  // 获取对象属性时统一返回35
        return 35
    }
}
// 对目标对象进行代理
let proxy = new Proxy(target,handler)

console.log(proxy.name)

结果显示

上面示例我们用到了get属性，接下来我们来看一下handler的所有属性,
它本身一共有13中方法,每种方法都可以代理一种操作.其13种方法如下：


// 在读取代理对象的原型时触发该操作，比如在执行 Object.getPrototypeOf(proxy) 时。
handler.getPrototypeOf()

// 在设置代理对象的原型时触发该操作，比如在执行 Object.setPrototypeOf(proxy, null) 时。
handler.setPrototypeOf()
 
// 在判断一个代理对象是否是可扩展时触发该操作，比如在执行 Object.isExtensible(proxy) 时。
handler.isExtensible()
 
// 在让一个代理对象不可扩展时触发该操作，比如在执行 Object.preventExtensions(proxy) 时。
handler.preventExtensions()

// 在获取代理对象某个属性的属性描述时触发该操作，比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。
handler.getOwnPropertyDescriptor()
 
// 在定义代理对象某个属性时的属性描述时触发该操作，比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
andler.defineProperty()
 
// 在判断代理对象是否拥有某个属性时触发该操作，比如在执行 "foo" in proxy 时。
handler.has()

// 在读取代理对象的某个属性时触发该操作，比如在执行 proxy.foo 时。
handler.get()

// 在给代理对象的某个属性赋值时触发该操作，比如在执行 proxy.foo = 1 时。
handler.set()

// 在删除代理对象的某个属性时触发该操作，比如在执行 delete proxy.foo 时。
handler.deleteProperty()

// 在获取代理对象的所有属性键时触发该操作，比如在执行 Object.getOwnPropertyNames(proxy) 时。
handler.ownKeys()

// 在调用一个目标对象为函数的代理对象时触发该操作，比如在执行 proxy() 时。
handler.apply()
 
// 在给一个目标对象为构造函数的代理对象构造实例时触发该操作，比如在执行new proxy() 时。
handler.construct()

上面这一坨这么多，看不懂啊！肿么办？
接着往下看

--实现访问日志

首先我们来看一个类似日志功能的示例

// 创建需要代理的对象
let target = {
    name:'Tom'
}
// 定义代理行为
let handler = {
    get(target, key){
        console.log(key+'被获取了');
        return target[key];
    },
    set(target, key, value){
        console.log(key+'被设置了新的值：'+value);
        target[key] = value;
        return true;
    }
}
// 进行代理
let proxy = new Proxy(target,handler)

console.log(proxy.name) // 调用proxy.name 的时候，我们会触发get
proxy.name = 'Jerry'  // 调用proxy.name= 'Jerry' 的时候，我们会触发set

结果显示

name被获取了
Tom
name被设置了新的值：Jerry

解析

我们定义了一个target对象，然后new了一个proxy对target的进行代理，同时在handler中设置了get与set。
get用于拦截对象属性的获取，比如proxy.foo和proxy['foo']。
set用于代理拦截的对象属性的设置。比如proxy.foo = v或proxy['foo'] = v。
对于上述示例：
当我们调用proxy.name的时候，我们会触发get函数，进行console.log(）输出，再返回对象该属性的值回去。
当我们调用proxy.name = 'Jerry'的时候，我们会触发set函数，调用里面的console.log()。
这样，我们就通过proxy代理，实现了对target目标对象的监听。实现了一个简单的日志示例。

--实现私有属性

接下来我们来实现一个对象私有属性的功能。
我们来对上述示例稍加修改

// 实现私有属性
let target = {
  name: 'Tom',
  _key: 666,
}
let handler = {
  get(target, key) {
    if (key.startsWith('_')) {  // 判断是否是不是以_开头
      throw new TypeError('You can not get it')
    }
    return target[key]
  },
  set(target, key, value) {
    if (key.startsWith('_')) {  // 判断是否是不是以_开头
      throw new TypeError('You can not set it')
    }
    target[key] = value
  },
}

let proxy = new Proxy(target, handler)

// 以下操作会抛出错误
proxy._key = 888
console.log(proxy._key)

结果显示

TypeError: You can not set it

解析

我们在目标对象target中设置了两个属性name、_key,我们想让target中的以下划线_开头的属性定义为私有属性,即不能外部访问。
那么我们在设置代理的时候，会检测是否以_开头，如果有，就抛出异常。没有则正常返回。
这样，就实现了对象私有属性的功能。

--代理的撤销

那么，既然可以代理，与与之对应的，我们如何撤销对目标的代理尼？下面我们来看一个语法：

Proxy.revocable(target, handler)

该方法可以用来创建一个可撤销的代理对象。
返回值：该方法的返回值是一个对象，其结构为： {"proxy": proxy, "revoke": revoke}
·proxy就就是我们的代理对象。revoke()是撤销这个代理的方法。

接下来直接上示例：

// 创建一个可以撤销的代理
var revocable = Proxy.revocable({}, {
    get(target, name) {
        return "[[" + name + "]]";
    }
});
// 获取代理的对象
var proxy = revocable.proxy;
// 访问代理对象的属性
console.log(proxy.foo);
// 撤销代理
revocable.revoke();
// 撤销后访问代理对象的属性
console.log(proxy.foo);

结果输出

// 输出代理对象的属性
[[foo]]
// 报错，撤销对象不可被访问
TypeError: Cannot perform 'get' on a proxy that has been revoked

解析：

我们创建代理后，访问代理对象的属性成功。当我们调用revoke()方法撤销代理后，继续访问代理的对象会报错。说明代理的对象已经成功被撤销了。