监听对象

Object.defineProperty 的存储属性描述符来对
属性的操作进行监听。

image.png
缺点：

Object.defineProperty在设计之初并没有考虑监听对象的实现，只是为了定义对象的属性
对于一些对对象的操作，无法监听，如新增属性、删除属性，只能监听获取和设置属性

Proxy

在ES6中，新增了一个Proxy类，这个类从名字就可以看出来，是用于帮助我们创建一个代理的：

此时，如果我们希望监听一个对象的相关操作，那么我们可以先创建一个代理对象（Proxy对象）；
之后对该对象的所有操作，都通过代理对象来完成，代理对象可以监听我们想要对原对象进行哪些操作；
将上面的案例用Proxy来实现：
new Proxy对象，并且传入需要侦听的对象以及一个处理对象，可以称之为handler；
const p = new Proxy(target, handler)
之后的操作都是对Proxy的操作，而不是原有的对象，因为我们需要在handler里面进行侦听；

const obj = {
  name: "zs",
  age: 18,
};
const objProxy = new Proxy(obj, {});

有了代理对象，就可以监听到具体的操作，只需要在handler中添加对应的捕捉器（trap）
set和get分别对应的是函数类型；
pset函数有四个参数：

target：目标对象（侦听的对象）；
property：将被设置的属性key；
value：新属性值；
receiver：调用的代理对象；
get函数有三个参数：
target：目标对象（侦听的对象）；
property：被获取的属性key；
receiver：调用的代理对象；

使用案列：

const obj = {
  name: "zs",
  age: 18,
};
const objProxy = new Proxy(obj, {
  set: function (target, propety, newValue, receiver) {
    target[propety] = newValue;
  },
  has: function (target, key) {
    console.log("has捕捉器", key);
    return key in target;
  },

  get: function (target, key) {
    console.log("get捕捉器", key);
    return target[key];
  },

  deleteProperty: function (target, key) {
    console.log("delete捕捉器");
    delete target[key];
  },
});

console.log(objProxy.name);  //get捕捉器 name
                                                //zs

所有捕捉器

Proxy共有13个捕捉器

handler.getPrototypeOf()
Object.getPrototypeOf 方法的捕捉器。
handler.setPrototypeOf()
Object.setPrototypeOf 方法的捕捉器。
handler.isExtensible()
Object.isExtensible 方法的捕捉器。
handler.preventExtensions()
Object.preventExtensions 方法的捕捉器。
handler.getOwnPropertyDescriptor()
Object.getOwnPropertyDescriptor 方法的捕捉器。
handler.defineProperty()
Object.defineProperty 方法的捕捉器。
handler.ownKeys()
Object.getOwnPropertyNames 方法和
Object.getOwnPropertySymbols 方法的捕捉器。
handler.has()
in 操作符的捕捉器。
handler.get()
属性读取操作的捕捉器。
handler.set()
属性设置操作的捕捉器。
handler.deleteProperty()
delete 操作符的捕捉器。
handler.apply()
函数调用操作的捕捉器。
handler.construct()
new 操作符的捕捉器

construct和apply

捕捉器中的construct和apply，是应用于函数对象的：

onst obj = {
  name: "zs",
  age: 18,
};

function foo() {
  console.log("foo调用", this, arguments);
  return "foo";
}
const fooProxy = new Proxy(foo, {
  apply: function (target, thisArg, argArray) {
    console.log("函数的apply监听");
    return target.apply(thisArg, argArray);
  },
  construct(target, argArray, newTarget) {
    console.log(target, argArray, newTarget);
    return new target(...argArray);
  },
});

// 函数的apply监听
// foo调用 { name: 'zs', age: 18 } [Arguments] { '0': 1, '1': 2, '2': 3 }
fooProxy.apply(obj,[1,2,3])
//[Function: foo] [ 1, 2 ] [Function: foo]
//foo调用 foo {} [Arguments] { '0': 1, '1': 2 }
new fooProxy(1,2)

Reflect的使用

Reflect也是ES6新增的一个API，它是一个对象，字面的意思是反射
Reflect作用：提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法；

Reflect.getPrototypeOf(target)类似于 Object.getPrototypeOf()
Reflect.defineProperty(target, propertyKey, attributes)类似于Object.defineProperty()；

我们有Object可以做这些操作，那么为什么还需要有Reflect这样的新增对象呢？

在早期的ECMA规范中没有考虑到这种对对象本身的操作如何设计会更加规范，所以将这些API放到了Object上面；
Object作为一个构造函数，这些操作实际上放到它身上并不合适；
另外还包含一些类似于 in、delete操作符，让JS看起来是会有一些奇怪的；
在ES6中新增了Reflect，让我们这些操作都集中到了Reflect对象上；(专人专办)

Reflect的常见方法

与Proxy是一一对应的，也是13个：

Reflect.getPrototypeOf(target)
类似于 Object.getPrototypeOf()。
Reflect.setPrototypeOf(target, prototype)
设置对象原型的函数. 返回一个 Boolean，如果更新成功，则返
回true。
Reflect.isExtensible(target)
类似于 Object.isExtensible()
Reflect.preventExtensions(target)
类似于 Object.preventExtensions()。返回一个Boolean。
Reflect.getOwnPropertyDescriptor(target, propertyKey)
类似于 Object.getOwnPropertyDescriptor()。如果对象中存在
该属性，则返回对应的属性描述符, 否则返回 undefined.
Reflect.defineProperty(target, propertyKey, attributes)
和 Object.defineProperty() 类似。如果设置成功就会返回 true
Reflect.ownKeys(target)
返回一个包含所有自身属性（不包含继承属性）的数组。(类似于
Object.keys(), 但不会受enumerable影响).
Reflect.has(target, propertyKey)
判断一个对象是否存在某个属性，和 in 运算符的功能完全相同。
Reflect.get(target, propertyKey[, receiver])
获取对象身上某个属性的值，类似于 target[name]。
Reflect.set(target, propertyKey, value[, receiver])
将值分配给属性的函数。返回一个Boolean，如果更新成功，则返回true。
Reflect.deleteProperty(target, propertyKey)
作为函数的delete操作符，相当于执行 delete target[name]。
Reflect.apply(target, thisArgument, argumentsList)
对一个函数进行调用操作，同时可以传入一个数组作为调用参数。和Function.prototype.apply() 功能类似。
Reflect.construct(target, argumentsList[, newTarget])
对构造函数进行 new 操作，相当于执行 new target(...args)。
基于此，可以将Proxy中对原代替中的操作进行优化

 new Proxy(obj, {
  set: function (target, propety, newValue, receiver) {
    Reflect.set(target,key,newValue)
  },
  has: function (target, key) {
    console.log("has捕捉器", key);
    return Reflect.has(target,key)
  },

  get: function (target, key) {
    console.log("get捕捉器", key);
    return Reflect.get(target,key)
  },

  deleteProperty: function (target, key) {
    console.log("delete捕捉器");
    delete Reflect.deleteProperty(target,key)
  },
});