ES6——Proxy与Reflect浅析

ES6——Proxy与Reflect浅析

关于ES6的proxy，先从Object.defineProperty开始了解

1、监听对象操作

• 通过属性描述符Object.defineProperty

//当我们需要获取对象属性值或者设置值的时候，可以使用get、set
const obj = {
  name: 'byj',
  age: 18,
};
//通过遍历对象每一个属性
Object.keys(obj).forEach(key => {
  let value = obj[key];
  Object.defineProperty(obj, key, {
    get: function () {
      console.log(`监听到obj对象的${key}属性被访问了`);
      return value;
    },
    set: function (newValue) {
      console.log(`监听到obj对象的${key}属性被设置值`);
      value = newValue;
    },
  });
});

obj.name = 'abc';
obj.age = 30;

console.log(obj.name);
console.log(obj.age);

通过属性描述符Object.defineProperty确实可以监听对象中的所有属性，但是通过这种方式监听对象存在一些缺点：

• Object.defineProperty设计的初衷，不是为了去监听截止一个对象中
  所有的属性的，而是用于定义普通的属性
• 其次，使用Object.defineProperty无法监听新增属性、删除属性的操作

2、Proxy类

1、Proxy用途

• proxy用于创建一个代理，用于监听对象的相关操作
• 之后对创建出来的对象的所有操作，都通过proxy代理对象来完成，不修改原对象，并且可以监听具体操作

2、捕捉器

如果我们想要侦听某些具体的操作，那么就可以在handler中添加对应的捕捉器（Trap），同时可以在捕捉器中做一些额外的操作。

比较常用的捕捉器有：

1、get

get捕捉器有三个参数

• target：目标对象（侦听的对象）
• property：被获取的属性key
• receiver：调用的代理对象

2、set

set捕捉器有四个参数

• target：目标对象（侦听的对象）
• property：将被设置的属性key
• value：新属性值
• receiver：调用的代理对象

3、has

has捕捉器有两个参数

• target：目标对象
• prop：将被设置的属性key

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

4、deleteProperty

常用捕捉器使用

const obj = {
  name: 'byj', // 数据属性描述符
  age: 18,
};

const objProxy = new Proxy(obj, {
  // 获取值时的捕获器
  get: function (target, property) {
    console.log(`监听到对象的${property}属性被访问了`, target);
    return target[key];
  },

  // 设置值时的捕获器
  set: function (target, property, newValue) {
    console.log(`监听到对象的${property}属性被设置值`, target);
    target[key] = newValue;
  },

  // 监听in的捕获器
  has: function (target, prop) {
    console.log(`监听到对象的${prop}属性in操作`, target);
    return key in target;
  },

  // 监听delete的捕获器
  deleteProperty: function (target, key) {
    console.log(`监听到对象的${key}属性in操作`, target);
    delete target[key];
  },
});

//获取值操作别get捕捉
console.log(objProxy.name)
console.log(objProxy.age)

//赋值操作被set捕捉
objProxy.name = "kobe"
objProxy.age = 30

// in操作符,被has捕捉
console.log('name' in objProxy);

// delete操作，被delete捕捉
delete objProxy.name;

5、函数捕捉器apply

6、函数捕捉器construc

function foo() {

}

const fooProxy = new Proxy(foo, {
  apply: function(target, thisArg, argArray) {
    console.log("对foo函数进行了apply调用")
    return target.apply(thisArg, argArray)
  },
  construct: function(target, argArray, newTarget) {
    console.log("对foo函数进行了new调用")
    return new target(...argArray)
  }
})

fooProxy.apply({}, ["abc", "cba"])
new fooProxy("abc", "cba")

其他捕捉器方法以及对应参数查阅MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

3、Reflect对象

1、基本使用

Reflect也是ES6新增的一个API，它是一个对象，字面的意思是反射。

• 主要提供了很多操作JavaScript对象的方法，有点像Object中操作对象的方法；
• Reflect和Object有一定的关联，Reflect时ES6将部分Object操作符归结到Reflect对象上

关于Object和Reflect对象之间的API关系，可以参考MDN文档：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect/Comparing_Reflect_and_Object_methods

Reflect常用方法：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

对之前的Proxy案例使用Reflect改造：

const obj = {
  name: 'byj',
  age: 18,
};

const objProxy = new Proxy(obj, {
  get: function (target, key, receiver) {
    return Reflect.get(target, key);
  },
  set: function (target, key, newValue, receiver) {
    // 普通赋值
    target[key] = newValue;
    // 通过Reflect对象赋值，赋值的时候可以拿到result，可以做进一步的操作，拓展性更强
    const result = Reflect.set(target, key, newValue);
    if (result) {
    } else {
    }
  },
});

objProxy.name = 'abc';
console.log(objProxy.name);

这里可能会有疑问，在Proxy中是可以直接赋值或者获取值，为什么还需要额外使用Reflect

知乎上有一个回答可以参考一下：https://www.zhihu.com/question/460133198/answer/1894905415

2、Receiver

在get和set中有一个Receiver，可以通过receiver来改变里面的this

const obj = {
  _name: 'byj',
  get name() {
    // 通过receiver改变后这个this不再指向obj而是指向objProxy
    return this._name;
  },
  set name(newValue) {
    this._name = newValue;
  },
};

const objProxy = new Proxy(obj, {
  get: function (target, key, receiver) {
    // receiver即创建出来的代理对象
    console.log(receiver === objProxy); //true
    return Reflect.get(target, key, receiver);
  },
  set: function (target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver);
  },
});
objProxy.name = 'abc';