proxy 代理对象 set get delete has ownkeys

目录

proxy的概念

语法

handler对象的方法

get

set

deleteProperty

---

proxy的概念

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

proxy在目标对象的外层搭建了一层拦截，外界对目标对象的某些操作（后文会说明，有哪些操作可以拦截），必须通过这层拦截。

语法

var proxy = new Proxy(target, handler);

target

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

handler

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

注意：当我们配置好代理后，应该避免操作 原对象 ，而是操作 配置好的代理对象

let obj = {...}
let proxy = new Proxy(obj,{...})

比如现在我们需要操作 proxy 而不是 obj

handler对象的方法

get

拦截对象的读取属性操作。

三个参数:

target: 目标对象,

property: 被获取的属性名,

receiver: Proxy 或者继承 Proxy 的对象

函数中 return 的是读取对象属性时 拿到的值：正常返回如下

var per = new Proxy({name:"张三",age:16}, {
  get: function(target, property, receiver) {
        return target[property]
  }
});

比如他的年龄不到 18 不让他读取值

var per = new Proxy({name:"张三",age:16}, {
  get: function(target, property, receiver) {
        if(target.age < 18){
            return "未成年"
        } 
        return target[property]
  }
});
        

set

拦截设置属性值操作 包括新增 修改

四个参数:

target: 目标对象,

property: 被获取的属性名,

value: 新属性值,

receiver: Proxy 或者继承 Proxy 的对象

函数中 return 的是是否修改成功，修改成功需要 return true 否则 返回 false

在严格模式下，如果 set() 方法返回 false，那么会抛出一个 异常。

let proxy = new Proxy({name:"张三",age:16},{
    set(target,property,value){
        if(property == 'name'&&target.age< 18){
            console.log("未成年人不允许改名字");
        } else { target[property] = value }
    }
})

deleteProperty