深入浅出ES6的标准内置对象Proxy

Proxy是ES6规范定义的标准内置对象，可以对目标对象的读取、函数调用等操作进行拦截。一般来说，通过Proxy可以让目标对象“可控”，比如是否能调用对象的某个方法，能否往对象添加属性等等。

const originalObj = {
   
    name: 'xialei'
};
const publicObj = new Proxy(originalObj, {
   
    set(target, prop, value) {
   
        // 将属性值转化为大写
        target[prop] = value.toString().toUpperCase();
    }
});

publicObj.name = 'xialei';
console.log(publicObj.name); // XIALEI

从上例可以看出Proxy不需要更改目标对象(也就是originalObj)，就可以对originalObj的行为进行拦截。

语法

let obj = new Proxy(target, handler);

target Object 目标对象。可以是任何类型的对象，甚至包括原生对象（比如数组，函数，另一个Proxy对象）
handler Object 代理行为对象。访问目标对象时会自动触发该handler的对应属性。

和大多数开发者一样，刚开始学习Proxy的时候，这个handler不知道是个什么东西，什么时候能触发。

先看一个简单的例子，看看handler到底是什么东西。假设我们开发一个游戏脚本，由于内存修改器的盛行，我们需要对内存中的数据进行安全处理，但是不能影响外部使用，我们使用Proxy完成这个功能。

const gameObj = {
   
    hp: 0
  };
  
  const publicGameObj = new Proxy(gameObj, {
   
    get(target, prop) {
   
      return target[prop]/2;
    },
    set(target, prop, value) {
   
      target[prop] = value*2;
    }
  });

  publicGameObj.hp = 10000;
  console.log(publicGameObj.hp, gameObj); // 10000 {hp: 20000}

gameObj是我们在内存中真实存储数据的地方，可以看到HP是20000，但是publicGameObj.hp是10000，外部使用publicGameObj.hp即可(比如UI层展示HP为10000);

例程handler使用到的属性

get publicGameObj.hp进行了读取操作，因此会自动触发handler的get方法
set publicGameObj.hp=10000进行了赋值操作，因此为自动触发handler的set方法

handler对象

handler对象是Proxy的核心基础，所有对目标对象的操作都需要通过handler来处理，虽然内容有点多，但是常用的不多。

说明

目标对象 被代理的对象。外部不能直接访问(当然语法上是可以访问的，你都用上Proxy了，还访问他干嘛?)
代理对象 new Proxy的返回值。外部直接访问。目标对象会作为handler对应函数的参数传入
带*号的是常用属性

所有访问都是对代理对象访问才会触发，直接访问目标对象不会触发(代理对象压根没参与进来，如果触发那一定是出bug了)

handler.getPrototypeOf(target)

说明：获取目标对象的原型

触发时机：Object.getPrototypeOf(代理对象)

参数：

target Object 目标对象

返回值：

Object 对象的原型

const array = [];
const myArray = new Proxy(array, {
   
  getPrototypeOf(target) {
   
		console.log('读取对象原型');
    return Object.getPrototypeOf(array);
  }
});
console.log(Object.getPrototypeOf(myArray));
// 输出
// 读取对象原型
// []

handler.setPrototypeOf(target, prototype)

说明：设置对象的原型

触发时机：Object.setPrototypeOf(代理对象, 原型)
参数：

target Object 目标对象
prototype Object 原型对象或null

返回值：

boolean 设置成功返回true，否则返回false(比如不让设置)

const array = [