首页 计算机科学 前端 JavaScript

js 代理机制

# 前言

proxy 也就是代理，可以帮我们完成很多的事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，就是在我们的访问加了一层拦截，卡哇伊过滤很多的操作，，而这些过滤有自己来决定。

想要了解更多，请观看官网文档

1
let p = new Proxy(target, handler);

# 参数

  1. target 需要被 proxy 包裹的目标对象（该目标对象可以是任意类型，可以实原生数组，函数，甚至是另外一个代理）
  2. handler 一个对象，其属性是当执行一个操作时定义代理的行为的函数（可以理解为拦截行为函数），具体的操作函数可以看官方文档

1
2
3
4
5
6
7
8
9
10
11
let test={
    a=1
}
const test=new Proxy(test,{
get(target,key)
    {
        console.log("获取了getter属性")
        return target[key]
    }
})
console.log(test.a)

我们在先是定义了一个 test 对象，关键是第二个参数，操作时函数有 get () 和 set () 两个函数，我们在 proxy 使用了拦截函数 get (), 我们可以在 get 函数中自定义操作对数据进行处理。

操作时拦截函数参数

# 两个基础操作函数

*get（）* 的参数

  1. target 目标对象，第一个参数与之对应
  2. key 对应目标对象的键值
  3. receiver 代理对象

*set（）* 的参数

  1. target 目标对象，第一哥参数与之对应
  2. key 对应目标对象的键值
  3. value 修改目标对象修改的值
  4. receiver 代理对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let obj={
a:1,
b:2
}

const handler={
    get(target,key,receiver){
        console.log(key)
        return Reflect.get(target,key,receiver)
    },
    set(target,key,newvalue,receiver){
        console.log(key)
        return Reflect.set(target,key,newvalue,receiver)
    }
}
let proxy1=new Proxy(obj,handler)
proxy1.a=5
proxy1.b=6
console.log(proxy1.a,proxy1.b)