proxy（代理）用法

最新推荐文章于 2024-06-05 09:12:40 发布

拳是套路

最新推荐文章于 2024-06-05 09:12:40 发布

阅读量6.8k

点赞数 12

本文链接：https://blog.csdn.net/weixin_43750811/article/details/107125173

版权

1、什么是Proxy?

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

语法

let p = new Proxy(target, handler);

参数

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);

在这里插入图片描述
上方的案例，我们首先创建了一个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";

在这里插入图片描述
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>

在这里插入图片描述

拳是套路

关注

12
点赞
踩
30

收藏

觉得还不错? 一键收藏
0
评论
proxy（代理）用法

1、什么是Proxy?Proxy 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。语法let p = new Proxy(target, handler);参数target ：需要使用Proxy包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。handler: 一个对象，其属性是当执行一个操作时
复制链接

扫一扫