ES6 Proxy 代理对象 | Reflect 反射 用于操作对象的接口

类似于 es5 中的 Object.defineProperty,但功能更强大。

Proxy 与 Reflect

Proxy 可以对读取对象和函数执行进行拦截 进行代理操作
Reflect 将 Object 的一些明显属于语言的方法移植到了 Reflect 对象上,如 proxy 的 get 和 set
两者接口方法一致

Proxy 可以实现响应式的数据追踪
Reflect 可以解决 proxy 的 this 绑定问题

Proxy 包含 target 、 handler

new Proxy(target, handler)

target 即目标对象, handler对象 定义代理 target 的行为

let exam = {
    name: "Tom",
    age: 24
}
let handler = {
    get: function(target, key, receiver){
        console.log("getting "+key);
        return Reflect.get(target,key);
    },
    set: function(target, key, value){
        console.log("setting "+key+" to "+value)
        Reflect.set(target, key, value);
    }
}
let proxy = new Proxy(exam, handler)

包含13种拦截方法,分别拦截对应行为

  • get 读取值
    get ==> (target, key, recevier) // recevier 上下文指向
  • set 写入值
    set ==> (target, key, value, recevier)
  • apply 函数调用
  • has in操作符
  • construct new操作
  • deleteProperty 删除操作

target 和 recevier 是一样的,主要保证上下文一致,避免代理出错

proxy 中方法 返回时应调用 reflect

为什么 Proxy 要配合 Reflect 使用

代理对象可能被劫持

posted @   海胆Sur  阅读(5)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· winform 绘制太阳,地球,月球 运作规律
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示