Proxy

描述：Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。

语法

const p = new Proxy(target, handler)

参数

• target

要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。

• handler

一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。

方法

handler.get()

handler.get() 方法用于拦截对象的读取属性操作。

语法

var p = new Proxy(target, {
  get: function(target, property, receiver) {
  }
});

参数

以下是传递给 get 方法的参数，this 上下文绑定在handler 对象上。

target 目标对象
property 被获取的属性名 key。
receiver Proxy 或者继承 Proxy 的对象

返回值

get 方法可以返回任何值。

---

handler.set()

描述：handler.set() 方法用于拦截设置属性值的操作。

语法

const p = new Proxy(target, {
  set: function(target, property, value, receiver) {
  }
});

参数

以下是传递给 set() 方法的参数。this 绑定在 handler 对象上。

target 目标对象。
property 将被设置的属性名或 Symbol。
value 新属性值。
receiver 最初被调用的对象。通常是 proxy 本身，但 handler 的 set 方法也有可能在原型链上，或以其他方式被间接地调用（因此不一定是 proxy 本身）。

返回值

set() 方法应当返回一个布尔值。

• 返回 true 代表属性设置成功。
• 在严格模式下，如果 set() 方法返回 false，那么会抛出一个 TypeError 异常。

set() get()方法示例代码

let o = {
  name: 'linuxcc',
  age: 18
}

const oProxy = new Proxy(o, {
  set: function (target, property, newValue) {
    console.log(`监视：设置属性 ${property} 成功！新值为：${newValue}`)
    target[property] = newValue
  },
  get: function (target, property, receiver) {
    // console.log(target, property, receiver);
    console.log(`监视：获取属性 ${property} 成功！`)
    return target[property]
  }
})
console.log('o.name', oProxy.name)
oProxy.name = 'linuxcc.cn'
console.log('o.name', oProxy.name)

oProxy.adderss = "中国"

说明：

使用Proxy代理的方式检测对象属性时添加和删除属性都可以监听

handler.deleteProperty()

描述：handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作。

语法

var p = new Proxy(target, {
  deleteProperty: function(target, property) {
  }
});

参数

deleteProperty 方法将会接受以下参数。this 被绑定在 handler 上。

target 目标对象
property 待删除的属性名。

返回值

deleteProperty 必须返回一个 Boolean 类型的值，表示了该属性是否被成功删除。

deleteProperty示例代码

let o = {
  name: 'linuxcc',
  age: 18
}
const oProxy = new Proxy(o, {
  deleteProperty: function(target, property) {
    console.log(`删除属性${property}成功！`)
    delete target[property]
    return true
  }
})
delete oProxy.age
console.log(o)

handler.has()

描述：handler.has() 方法是针对 in 操作符的代理方法，也可以看作是针对  in 操作的钩子。

语法

var p = new Proxy(target, {
  has: function(target, property) {
  }
});

参数

下面是传递给 has 方法的参数

target 目标对象。
property 需要检查是否存在的属性。

返回值
has 方法返回一个 boolean 属性的值。

has 方法示例代码

has: function (target, property) {
  console.log(`监听：属性${property} 存在！`)
  return property in target
}
console.log('name' in oProxy)

Reflect

描述

• Reflect 是一个内置的对象，它提供拦截 JavaScript 操作的方法。这些方法与 proxy handlers 的方法相同。Reflect不是一个函数对象，因此它是不可构造的。
• 与大多数全局对象不同 Reflect 并非一个构造函数，所以不能通过new 运算符对其进行调用，或者将Reflect对象作为一个函数来调用。Reflect的所有属性和方法都是静态的（就像Math对象）。

方法

Reflect.set()

描述：静态方法 Reflect.set() 工作方式就像在一个对象上设置一个属性。

语法

Reflect.set(target, propertyKey, value[, receiver])

参数

target 设置属性的目标对象。
propertyKey 设置的属性的名称。
value 设置的值。
receiver 如果遇到 setter，receiver则为 setter调用时的this值。

示例代码

let o = {
  name: 'linuxcc', age: 18
}

const oProxy = new Proxy(o, {
  set: function (target, propertyKey, newValue) {
    console.log(` 监视：属性 ${propertyKey} 修改了！`)
    let flag = Reflect.set(target, propertyKey, newValue)
    if (!flag) throw new Error(`Error: set ${propertyKey} failure!`)
  }
})
oProxy.name = 'linuxcc.cn'
console.log('o', o)

Reflect.get()

描述

Reflect.get方法允许你从一个对象中取属性值。就如同属性访问器 语法，但却是通过函数调用来实现。

语法

Reflect.get(target, propertyKey[, receiver])

参数

target 需要取值的目标对象
propertyKey 需要获取的值的键值
receiver 如果target对象中指定了getter，receiver则为getter调用时的this值。

例子

let o = {
  _name: 'linuxcc',
  set name(newValue) {
    this._name = newValue
  },
  get name() {
    return this._name
  }
}

const oProxy = new Proxy(o, {
  set: function (target, propertyKey, newValue, receiver) {
    console.log(` 监视：属性 ${propertyKey} 修改了！`)
    let flag = Reflect.set(target, propertyKey, newValue, receiver)
    if (!flag) throw new Error(`Error: set ${propertyKey} failure!`)
  },
  get: function (target, propertyKey, receiver) {
    console.log(  propertyKey +'调用了');
    Reflect.get(target, propertyKey, receiver)
  }
})
oProxy.name