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>

Proxy 简单使用

Proxy 简单使用

介绍

语法规则

代码

猜你喜欢