ES6中的Proxy

作者: 李傲娢 | 来源:发表于2020-03-27 14:34 被阅读0次

代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问。在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用。

Proxy

在ES6中新增了一个API叫Proxy,Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。

比较抽象,我用一句话总结就是:Proxy可以覆盖原有的方法,实现自定义的默认方法的功能。
基础语法

let p = new Proxy(target, handler);
/**
*  target
*    用Proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)
*    一个对象,其属性是当执行一个操作时定义代理的行为的函数
**/

还是用一段代码来演示一下吧

let person = {
  name: 'Tom',
  age: 18
}

let newP = new Proxy(person, {
  get(target, prop) {
    if(!(prop in target)) {
      return '没有对应的属性'
    }
    return target[prop]
  }
})

console.log(person.name)  // Tom
console.log(person.age)  // 18
console.log(person.amount)  // undefined
console.log(newP.name) // Tom
console.log(newP.age)  // 18
console.log(newP.amount) // 没有对应的属性

通过以上代码,可以看到当访问newP对象中的属性时,实际上是调用了自定义的get方法,就是说我们自定义了一个get方法覆盖了原用的get方法。

Proxy的Handler

在Proxy中可以使用到的handler方法如下

handler.getPrototypeOf()
  在读取代理对象的原型时触发该操作,比如在执行 Object.getPrototypeOf(proxy) 时。
handler.setPrototypeOf()
  在设置代理对象的原型时触发该操作,比如在执行 Object.setPrototypeOf(proxy, null) 时。
handler.isExtensible()
  在判断一个代理对象是否是可扩展时触发该操作,比如在执行 Object.isExtensible(proxy) 时。
handler.preventExtensions()
  在让一个代理对象不可扩展时触发该操作,比如在执行 Object.preventExtensions(proxy) 时。
handler.getOwnPropertyDescriptor()
  在获取代理对象某个属性的属性描述时触发该操作,比如在执行 Object.getOwnPropertyDescriptor(proxy, "foo") 时。
handler.defineProperty()
  在定义代理对象某个属性时的属性描述时触发该操作,比如在执行 Object.defineProperty(proxy, "foo", {}) 时。
handler.has()
  在判断代理对象是否拥有某个属性时触发该操作,比如在执行 "foo" in proxy 时。
handler.get()
  在读取代理对象的某个属性时触发该操作,比如在执行 proxy.foo 时。
handler.set()
  在给代理对象的某个属性赋值时触发该操作,比如在执行 proxy.foo = 1 时。
handler.deleteProperty()
  在删除代理对象的某个属性时触发该操作,即使用 delete 运算符,比如在执行 delete proxy.foo 时。
handler.ownKeys()
  Object.getOwnPropertyNames 和Object.getOwnPropertySymbols 的陷阱。
handler.apply()
  函数调用操作的陷阱。
handler.construct()
  new 运算符的陷阱。

Proxy的兼容性

image.png

参考
MDN

相关文章

  • ES6——Reflect 与 Proxy

    ES6 之 Proxy 介绍深入实践 ES6 Proxy & Reflect 1.Proxy Proxy 可以对目...

  • 前端小白成长05--Proxy

    JavaScript中的Proxy 翻译过来就是代理的意思,Proxy是ES6中提供的新的API,可以用来定义对象...

  • 你了解vue3.0响应式数据怎么实现吗?

    从 Proxy 说起 什么是Proxy proxy翻译过来的意思就是”代理“,ES6对Proxy的定位就是targ...

  • ES6中的Reflect与Proxy(个人笔记)

    概述 Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。 Proxy:Proxy 可以对目...

  • es6 proxy

    # ES6之proxy ## 是什么 Proxy是一个构造器。通过new Proxy(原对象,{代理列表})的方式...

  • es6中的proxy

    proxy相当于是一个预处理操作,可以把它当成是一个json的方法的扩充。 上面的是添加了get的方法,即每次获取...

  • ES6中的Proxy

    代理模式的定义:为其他对象提供一种代理以控制对这个对象的访问。在某些情况下,一个对象不适合或者不能直接引用另一个对...

  • ES6中的Proxy

    第一次接触proxy这个单词的时候,还是在设置浏览器代理的时候 ,今天注意到在es6新语法中,也出现了这个词,才准...

  • 阮一峰es6要点总结——Proxy

    笔记,完全摘录自阮一峰 proxy的概念 proxy英文原意是代理的意思,在ES6中,可以翻译为"代理器"。它主要...

  • ES6:proxy代理和Reflect反射

    在ES6中JavaScript新增了proxy来替代ES5中的Object.defineProperty方法来实现...

网友评论

    本文标题:ES6中的Proxy

    本文链接:https://www.haomeiwen.com/subject/hwszehtx.html