proxy（代理）用法_proxy()

作者：2023面试高手 | 2024-02-25 09:46:47

踩

proxy()

1、什么是Proxy?

Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。

语法

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

参数

target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。
handler: 一个对象，其属性是当执行一个操作时定义代理的行为的函数
proxy:是一个被代理后的新对象,它拥有target的一切属性和方法.只不过其行为和结果是在handler中自定义的

示例，一个简单的代理:

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

在这里插入图片描述
上方的案例，我们首先创建了一个test对象，里面有name属性，然后我们使用Proxy将其包装起来，再返回给test，此时的test已经成为了一个Proxy实例，我们对其的操作，都会被Proxy拦截。当我们对test对象查询时，就会进入我们写好的get函数，其他操作都是如此
使用set来拦截一些操作，并将get返回值更改

let xiaohong = {
    name: "小红",
    age: 15
  };
  xiaohong = new Proxy(xiaohong, {
    get(target, key) {
      let result = target[key];
      //如果是获取 年龄 属性，则添加 岁字
      if (key === "age") result += "岁";
      return result;
    },
    set(target, key, value) {
      if (key === "age" && isNaN(value)) {
        throw Error("age字段必须为Number类型");
      }
      return Reflect.set(target, key, value);
    }
  });
  console.log(`我叫${xiaohong.name}  我今年${xiaohong.age}了`);
  xiaohong.age = "aa";
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

在这里插入图片描述
get 拦截函数中添加了一个判断，如果是取 age 属性的值，则在后面添加岁。在 set 拦截函数中判断了如果是更改 age 属性时，类型不是 Number则抛出错误。

扩展使用代理实现双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>
        <span>年龄：</span>
        <input type="text" id="age" value="13">
    </p>
</body>
<script>
    const spanAge = document.getElementById("age");
    let user = {
        age:spanAge.value
    }
    let newuser = new Proxy(user,{
        set(target, key, value){
            if (key === "age" && isNaN(value)) {
                throw Error("age字段必须为Number类型");
            }
            spanAge.value = value;
            return Reflect.set(target, key, value);
        }
    })
    spanAge.onblur = function(){
        newuser.age = document.getElementById("age").value;
            console.log(user);
        }
        console.log(user)
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

在这里插入图片描述

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】

proxy（代理）用法_proxy()

1、什么是Proxy?

语法

参数

扩展 使用代理实现双向绑定

扩展使用代理实现双向绑定