一、写在前面
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

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐