Proxy代理（ES6）

Proxy

在 ES6 标准中新增的一个非常强大的功能是 Proxy，它可以自定义一些常用行为如查找、赋值、枚举、函数调用等。通过 Proxy 这个名称也可以看出来它包含了“代理”的含义，只要有“代理”的诉求都可以考虑使用 Proxy 来实现。

基本语法

语法

let p = new Proxy(target, handler)

解释

MDN 给出的解释偏官方，通俗的讲第一个参数 target 就是用来代理的“对象”，被代理之后它是不能直接被访问的，而 handler 就是实现代理的过程。

常用拦截操作

get

拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。

let arr = [7, 8, 9]
arr = new Proxy(arr, {
   
    get(target, prop) {
   
        // console.log(target, prop)
        return prop in target ? target[prop] : 'error'
    }
})
console.log(arr[1])
console.log(arr[10])
let dict = {
   
    'hello': '你好',
    'world': '世界'
}
dict = new Proxy(dict, {
   
    get(target, prop) {
   
        return prop in target ? target[prop] : prop
    }
})
console.log(dict['world'])
console.log(dict['imooc'])

set

拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。

let arr = []
arr = new Proxy(arr, {
   
    set(target, prop, val) {
   
        if (typeof val === 'number') {
   
            target[prop] = val