Proxy

在目标对象之前架设一层拦截，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写 let proxy = new Proxy(target, handler);

• 对target对象做一层拦截，handle是具体拦截的内容，返回target的代理对象。
• target可以是任何类型的对象，包括原生数组，函数，甚至另一个代理
• 如果handler是一个空对象，没有任何拦截效果，访问proxy就等同于访问target。

使用

将 Proxy 对象，设置到object.proxy属性，从而可以在object对象上调用。

let object = { proxy: new Proxy(target, handler) };

Proxy 实例也可以作为其他对象的原型对象

let proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

let obj = Object.create(proxy);
obj.time // 35

这里需要注意原型链的概念

支持的拦截操作

Proxy 支持的拦截操作一览，一共 13 种。

• get(target, propKey, receiver)：拦截对象属性的读取，比如proxy.foo和proxy[‘foo’]。
• set(target, propKey, value, receiver)：拦截对象属性的设置，比如proxy.foo = v或proxy[‘foo’] = v，返回一个布尔值。
• has(target, propKey)：拦截propKey in proxy的操作，返回一个布尔值。
• deleteProperty(target, propKey)：拦截delete proxy[propKey]的操作，返回一个布尔值。
• ownKeys(target)：拦截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for…in循环，返回一个数组。该方法返回目标对象所有自身的属性的属性名，而Object.keys()的返回结果仅包括目标对象自身的可遍历属性。
• getOwnPropertyDescriptor(target, propKey)：拦截Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的描述对象。
• defineProperty(target, propKey, propDesc)：拦截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一个布尔值。
• preventExtensions(target)：拦截Object.preventExtensions(proxy)，返回一个布尔值。
• getPrototypeOf(target)：拦截Object.getPrototypeOf(proxy)，返回一个对象。
• isExtensible(target)：拦截Object.isExtensible(proxy)，返回一个布尔值。
• setPrototypeOf(target, proto)：拦截Object.setPrototypeOf(proxy, proto)，返回一个布尔值。如果目标对象是函数，那么还有两种额外操作可以拦截。
• apply(target, object, args)：拦截 Proxy 实例作为函数调用的操作，比如proxy(…args)、proxy.call(object, …args)、proxy.apply(…)。
• construct(target, args)：拦截 Proxy 实例作为构造函数调用的操作，比如new proxy(…args)。

get

get(target, propertyKey, receiver){}

• target是目标对象
• propertyKey是属性名
• receiver，可选。是操作行为所针对的对象，具体说就是直接使用proxy对象，receiver就是proxy对象，如果是以proxy对象为原型的对象obj使用，receiver就是obj。

const proxy = new Proxy({}, {
    get: function(target, property, receiver) {
    return receiver;
  }
});
proxy.getReceiver === proxy // true

const proxy = new Proxy({}, {
  get: function(target, property, receiver) {
    return receiver;
  }
});

const d = Object.create(proxy);
d.a === d // true

如果一个属性不可配置（configurable）且不可写（writable），则 Proxy 不能修改该属性，否则通过 Proxy 对象访问该属性会报错。

const target = Object.defineProperties({}, {
  foo: {
    value: 123,
    writable: false,
    configurable: false
  },
});

const handler = {
  get(target, propKey) {
    return 'abc';
  }
};

const proxy = new Proxy(target, handler);

proxy.foo
// TypeError: Invariant check failed

set

set(target, propKey, value, receiver){}

• target是目标对象
• propKey是属性名
• value是新设值
• receiver，可选。同get

可以用于做一些set校验，和一些私有变量的取值/赋值的拦截。 如果目标对象自身的某个属性，不可写且不可配置，那么set方法将不起作用。

const obj = {};
Object.defineProperty(obj, 'foo', {
  value: 'bar',
  writable: false,
});

const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = 'baz';
  }
};

const proxy = new Proxy(obj, handler);
proxy.foo = 'baz';
proxy.foo // "bar"

注意，严格模式下，set代理如果没有返回true，就会报错。

'use strict';
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    // 无论有没有下面这一行，都会报错
    return false;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';

apply

apply方法拦截函数的调用、call和apply操作。直接调用Reflect.apply方法，也会被拦截。

apply (target, ctx, args) {}

• target是目标对象
• ctx是上下文对象(this)
• args是目标对象参数数组

  var twice = {
  apply (target, ctx, args) {
    return Reflect.apply(...arguments) * 2;
  }
  };
  function sum (left, right) {
  return left + right;
  };
  var proxy = new Proxy(sum, twice);
  proxy(1, 2) // 6
  proxy.call(null, 5, 6) // 22
  proxy.apply(null, [7, 8]) // 30
  

has

has方法用来拦截HasProperty操作，即判断对象是否具有某个属性时，这个方法会生效。典型的操作就是in运算符。

has(target, key){}

• target是目标对象
• key是查询属性名
• 返回true/false

var handler = {
  has (target, key) {
    if (key[0] === '_') {
      return false;
    }
    return key in target;
  }
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
'_prop' in proxy // false

如果原对象不可配置或者禁止扩展，这时has拦截会报错。

var obj = { a: 10 };
Object.preventExtensions(obj);

var p = new Proxy(obj, {
  has: function(target, prop) {
    return false;
  }
});

'a' in p // TypeError is thrown

如果某个属性不可配置（或者目标对象不可扩展），则has方法就不得“隐藏”（即返回false）目标对象的该属性。 has方法不判断一个属性是对象自身的属性，还是继承的属性。 has拦截对for…in循环不生效。

construct()

construct方法拦截new命令 construct (target, args, newTarget) {}

• target是目标对象
• args构造函数的参数对象
• newTarget是创造实例对象时，new命令作用的构造函数

construct方法返回的必须是一个对象，否则会报错。

var p = new Proxy(function() {}, {
  construct: function(target, argumentsList) {
    return 1;
  }
});

new p() // 报错

deleteProperty()

deleteProperty方法用于拦截delete操作，如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除。 deleteProperty (target, key) {}

• target是目标对象
• key是要删除的属性名

var handler = {
  deleteProperty (target, key) {
    invariant(key, 'delete');
    delete target[key];
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}

var target = { _prop: 'foo' };
var proxy = new Proxy(target, handler);
delete proxy._prop
// Error: Invalid attempt to delete private "_prop" property

目标对象自身的不可配置（configurable）的属性，不能被deleteProperty方法删除，否则报错。

ownKeys()

ownKeys方法用来拦截对象自身属性的读取操作。具体来说，拦截以下操作。

Object.getOwnPropertyNames() Object.getOwnPropertySymbols() Object.keys() for…in循环 返回的数组成员，只能是字符串或 Symbol 值。如果有其他类型的值，或者返回的根本不是数组，就会报错。

ownKeys(target) {}

• target是目标对象

const obj20 = {
    hello: 'world',
    a: 1,
    b: 2,
    c: 3,
    [Symbol.for('secret')]: '4',
};
Object.defineProperty(obj20, 'key', {
    enmuerable: false,
    configurable: true,
    writable: true,
    value: 'heihei'
});
const proxy20 = new Proxy(obj20, {
    ownKeys: function () {
        return ['a', 'key', 'd', Symbol.for('secret')];
    }
});

for (let key in proxy20) {
    console.log(key); // a
}

Object.keys方法之中，返回不存在的属性（d）、Symbol 值（Symbol.for(‘secret’)）、不可遍历的属性（key），结果都被自动过滤掉。

Proxy.revocable()

Proxy.revocable方法返回一个可取消的 Proxy 实例。

let target = {};
let handler = {};

let {proxy, revoke} = Proxy.revocable(target, handler);

proxy.foo = 123;
proxy.foo // 123

revoke();
proxy.foo // TypeError: Revoked

Proxy.revocable方法返回一个对象，该对象的proxy属性是Proxy实例，revoke属性是一个函数，可以取消Proxy实例。上面代码中，当执行revoke函数之后，再访问Proxy实例，就会抛出一个错误。 Proxy.revocable的一个使用场景是，目标对象不允许直接访问，必须通过代理访问，一旦访问结束，就收回代理权，不允许再次访问。

this问题

Proxy代理针对目标对象的访问，不是目标对象的透明代理，即不做任何拦截的情况下，也无法保证与目标对象的行为一致。主要原因就是目标对象内部的this关键字会指向Proxy代理。

const target = {
  m: function () {
    console.log(this === proxy);
  }
};
const handler = {};

const proxy = new Proxy(target, handler);

target.m() // false
proxy.m()  // true