ES6 的代理 Proxy

Proxy 代理对象

const target = {
  a: 1
}
​
const proxy = new Proxy(target, {
  get(target, property) {
    return target[property]
  },
  set(target, property, value) {
    target[property] = value
    return true // 严格模式下需要返回 true，否则会报错
  }
})
​
console.log('代理的 target.a 在这里：', proxy.a) // 1
console.log('真正的 target.a 在这里：', target.a) // 1
proxy.a = 3
console.log('代理的 target.a 被改成了：', proxy.a) // 3
console.log('真正的 target.a 被改成了：', target.a) // 3

Proxy 代理数组

const arr = [1, 2, 3]
​
const proxy = new Proxy(arr, {
  get(target, property) {
    return target[property]
  },
  set(target, property, value) {
    target[property] = value
    return true
  }
})
​
proxy[1] = 2333
console.log(arr) // [1, 2333, 3]

Proxy 代理函数

const fn = function () {}
fn.error = 404
const proxy = new Proxy(fn, {
  get(target, property) {
    return target[property]
  },
  set(target, property, value) {
    target[property] = value
    return true
  }
})
proxy.error = 500
console.log(fn.error) // 500

Proxy 和 Object.defineProperty 的区别

1、Proxy 可以代理引用类型，而 Object.defineProperty 只能代理对象类型。

2、Proxy 代理对象的已有属性，而 Object.defineProperty 是给对象新增属性。