一、写在前面
Proxy的意思是代理,我们可以把它理解为一个拦截器,就是当我们操作对象时,它都会对对象的操作进行拦截,从而进行监测和改写。
为什么要存在Proxy?
因为在ES6之前,我们使用Object.defineProperty()来设置监听器,来监听对象属性的获取和改写。但是如果其中存在其他的一些操作,我们是无法监测到的,所以为了解决这样一个问题,在ES6中增加了Proxy代理。Proxy可以帮助我们监听对象的十三中操作。
二、两者对比
Object.defineProperty

let info = {
  name: 'dmc',
  age: 20
}

Object.defineProperty(info, 'name', {
  get() {
    console.log('获取info的name值')
    return 'dl'
  },
  set() {
    console.log('设置info的name值')
  }
})

console.log(info.name)
info.name = 'dmc'

Proxy

let info = {
  name: 'dmc',
  age: 20
}

let infoProxy = new Proxy(info, {
  get(target, key) {
    console.log('获取对象属性')
    return target[key]
  },
  set(target, key, newValue) {
    console.log('设置对象属性')
    target[key] = newValue
  },
  has(target, key) {
    console.log('触发has捕获器')
  }
})

三、Proxy其他捕获器类型
Proxy存在13种捕获器类型,常用的有has(), get(), set(), deleteProperty(),construt()和apply()主要用于函数
在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐