前端学习笔记(ES6)

164 阅读1分钟

1.proxy

  • proxy主要用于创建代理,用于各种数据拦截。数据拦截我们最熟悉的自然是defineProperty,vue2中使用该函数进行数据劫持,从而实现数据的监听和分发。但是有一个问题就是使用defineProperty只能监听数据的读写,对于对象属性的增删无法进行劫持。而proxy中可以拦截的类型多达13种,这也是为什么vue3改用proxy的原因。proxy最大的缺点就是浏览器支持不足。

代理其实是对对象加一层拦截器,实际上所有的拦截活动都通过代理接收者触发,而被代理对象的属性并不会被触发。

let obj = new Proxy({},{
    get(target,property,receiver){
        // target 代表被代理对象,本例中尾空对象
        // property 代表访问的属性
        // receiver 代表代理接收者,本里中为obj
    },
    set(target, property, value, receiver){
        // target 代表被代理对对象,本例中尾空对象
        // property 代表访问的属性
        // value 设置的值
        // receiver 代表代理接收者,本里中为obj
    },
    construct(target, args, newTarge){
        // target 代理对象
        // args 参数
        // newTarget 构造函数
        // new命令被拦截
    },
    has(target, key){
        // target 代理对象
        // key 属性
        // in运算符被拦截(for in 不拦截)
    },
    apply(target, ctx, args){
        // target 目标对象
        // ctx 目标对象的上下文对象
        // arg 参数
        // 函数调用,call,apply时调用
    }
})