Proxy 简单使用

最新推荐文章于 2023-12-20 17:38:52 发布

兜里揣着星星

最新推荐文章于 2023-12-20 17:38:52 发布

阅读量173

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/MCCLS/article/details/131659063

版权

文章介绍了ES6中的Proxy特性，通过创建代理对象可以拦截并自定义对原对象的访问行为，包括读取属性（get）、设置属性（set）和删除属性（deleteProperty）。示例代码展示了如何使用Proxy来操作和监控一个用户对象的属性变化。

摘要由CSDN通过智能技术生成

Proxy 简单使用

介绍

ES6 新特性：window. Proxy
通过Proxy 可以创建一个代理对象

语法规则

const proxyObj = new Proxy(targetObj, {
  get(target, propertyName) {
    return target[propertyName]
  },
  set(target, propertyName, value) {
    target[propertyName] = value
  },
  deleteProperty(target, propertyName) {
    return delete target[propertyName]
  }
})

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

</body>
<script>
  const user = {
    name: 'zhangsan'
  }

  // 通过Proxy来生成代理对象
  // 代理模式的原理：通过代理对象去完成目标的对象的任务，同时还可以额外新增一些程序
  const userProxy = new Proxy(user, {
    // 主要通过这些配置项来完成响应式处理的：get set deleteproperty
    // 当你读取的时候，get执行
    // target 参数是代表目标对象
    // propertyName 参数代表的事目标对象上的属性名，是一个字符串
    get(target, propertyName) {
      console.log('读取了');
      return target[propertyName]
    },
    // 当你修改某个属性的时候，或者新增某个属性的时候，set执行
    // set方法有三个：
    // target 目标对象
    // propertyName 属性名
    // value 具体赋什么值
    set(target, propertyName, value) {
      console.log('修改了或者新增了');
      target[propertyName] = value
    },
    // 当你删除某个属性的时候，deleteProperty就会执行
    // deleteProperty 有两个参数
    // target 目标对象
    // propertyName 属性名
    deleteProperty(target, propertyName) {
      console.log('删除了');
      return delete target[propertyName]
    }
    // 注意: get deleteProperty 需要使用return
  })
  // 输出:
  // userProxy.name
  // index.html:63 读取了
  // 'zhangsan'

  // userProxy.name = 'lisi'
  // index.html:72 修改了或者新增了
  // 'lisi'

  // user
  // {name: 'lisi'}name: "lisi"[[Prototype]]: Object

  // userProxy.age = 20
  // index.html:72 修改了或者新增了
  // 20

  // user
  // {name: 'lisi', age: 20}

  // userProxy.age
  // index.html:63 读取了
  // 20

  // delete userProxy.age
  // index.html:80 删除了
  // true

  // userProxy
  // Proxy(Object) {name: 'lisi'}

  // user
  // {name: 'lisi'}
</script>

</html>