关于阅读 ES6- Proxy 整理的问题

1、Proxy是什么？

答：用来修改默写默认操作的行为，在语言层面上修改，是属于一种‘元编程’，即对编程语言进行编程。
Proxy可以理解成在目标对象前架设了一个‘拦截层’。外界想要访问这个对象，需要经过这层拦截，
因此proxy也被称为‘拦截器’。例如，在获取或添加某个对象的属性前进行拦截

var obj = new Proxy({b: 2}, {
 get: function(target, key,  receiver){ // target是目标对象，key是对象属性 ，receiver是Proxy实例本身
   console.log('您正在访问对象的属性')
   return Reflect.get(target, key, receiver)
 },
 set: function(target, key, value, receiver){
   console.log('您正在为对象增加属性并赋值');
   return Reflect.set(target, key, value, receiver)
 }
})
obj.a = 111 // 您正在为对象增加属性并赋值
obj.a // 您正在访问对象的属性 111

2、Proxy构造函数

答：ES6原生提供了Proxy构造函数，可以通过new关键字生成Proxy实例：new Proxy(target, handler)；
target是所要拦截的目标对象 handler是拦截函数（行为）；
如果handler没有设置任何的拦截，那么等同于直接通向原来的对象。

let target = {}, handler = {}
var p = new Proxy(target,  handler)
p.a = 1;
target.a // 1 没有做任何的拦截操作，那么访问proxy就等同于访问 target

3、怎么实现对对象默认操作的拦截

答：有两种方式。一种是直接将Proxy对象实例设置到其他对象proxy属性上，这样可以在对象上进行调用
二是将Proxy实例作为其他对象的原型对象。

var obj = { //设置到对象proxy属性上
  proxy: new Proxy(target, handler)
}
// 将Proxy实例作为其他对象的原型对象，这样其他对象虽然没有设置拦截，但是根据原型链的继承，可以被有效拦截
var proxy = new Proxy({}, {
  get: function(target, key, receiver){
    return 111
  }
})
var obj = Object.create(proxy)
obj.aa // 111

4、Proxy实例上的拦截函数handler有多少种拦截行为呢

答：13种。
get(target, prop, receiver)-----------------拦截对象属性的读取
set(target, prop, value, receiver)---------拦截对象属性的获取，返回布尔值
has(target, prop)---------拦截 key in obj 操作，返回布尔值
deleteProperty(target, prop)---------------拦截 delete obj[key] 操作，返回布尔值
ownKeys(target)–拦截 Object.getOwnPropertyNames(obj)、Object.getOwnPropertySymbols(obj)、Object.keys()、for…in，返回一个数组
getOwnPropertyDescriptor(target, prop)-----拦截Object.getOwnPropertyDescriptor(obj, prop)，返回描述对象
defineProperty(target, prop, propDecription) --拦截 Object.defineProperty(obj, prop, propDecription)、Object.defineProperties(obj, propDecription)，返回一个布尔值。
getPrototypeOf(obj)—拦截 Object.getPrototypeOf(obj),返回一个对象
setPrototypeOf(target, prototype)—拦截Object.setPrototypeOf(obj, prototype)，返回一个布尔值
apply(target, object, args)—拦截Proxy实例作为函数调用的操作。比如 proxy()、proxy.call(obj, …args)、proxy.apply(obj, null, arrArgs)
preventExtensions(target)—拦截Object.preventExtensions(obj),返回一个布尔值
isExtensible(target)–拦截Object.isExtensible(obj)，返回一个布尔值
construct(target, args) —拦截Proxy实例作为构造函数调用的操作，比如 new proxy(…args)

5、Proxy实例的get(target, prop,receiver)方法

答：get()用来拦截对象的属性读取操作。
如果一个属性是不可配置（configurable）或不可写（writable）那么这个属性就不能被代理，Proxy对象访问该属性也会报错。
get()方法可以接受3个参数，依次为目标对象、属性名和 Proxy 实例本身，其中最后一个参数可选。

var person = { name: "张三"};
var proxy = new Proxy(person, {
  get: function(target, propKey) {
    if (propKey in target) {
      return target[propKey];
    } else {
      throw new ReferenceError("Prop name \"" + propKey + "\" does not exist.");
    }
  }
});
proxy.name // "张三"
proxy.age // 抛出一个错误
// 也可以使用继承的方式来拦截对象的属性获取操作
let proto = new Proxy({}, {
  get(target, propertyKey, receiver) {
    console.log('GET ' + propertyKey);
    return target[propertyKey];
  }
});
let obj = Object.create(proto);
obj.foo // "GET foo"

6、Proxy实例的set(target, prop, value, receiver)方法

答：用来拦截对象的属性赋值操作
如果一个属性是不可配置（configurable）或不可写（writable）那么这个属性就不能被代理，Proxy对象访问该属性也会报错。
get()方法可以接受四个参数，依次为目标对象、属性名、属性值和 Proxy 实例本身，其中最后一个参数可选。
严格模式下，set代理返回false或者undefined，都会报错。

const handler = {
  get (target, key) {
    invariant(key, 'get');
    return target[key];
  },
  set (target, key, value) {
    invariant(key, 'set');
    target[key] = value;
    return true;
  }
};
function invariant (key, action) {
  if (key[0] === '_') {
    throw new Error(`Invalid attempt to ${action} private "${key}" property`);
  }
}
const target = {};
const proxy = new Proxy(target, handler);
proxy._prop // Error: Invalid attempt to get private "_prop" property
proxy._prop = 'c' // Error: Invalid attempt to set private "_prop" property
// 下面是set方法第四个参数的例子:
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    return true;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar';
proxy.foo === proxy // true
// 严格模式下，set代理返回false或者undefined，都会报错，例如：
'use strict';
const handler = {
  set: function(obj, prop, value, receiver) {
    obj[prop] = receiver;
    return false;// 无论有没有下面这一行，都会报错
  }
};
const proxy = new Proxy({}, handler);
proxy.foo = 'bar'; // TypeError: 'set' on proxy: trap returned falsish for property 'foo'

7、Proxy实例的apply(target, ctx, arguments)方法

答：apply方法是用来拦截函数的调用、call和apply操作。
apply方法可以接受三个参数，分别是目标对象、目标对象的上下文对象（this）和目标对象的参数数组。

var target = function () { return 'I am the target'; };
var handler = {
  apply: function () {
    return 'I am the proxy';
  }
};
var p = new Proxy(target, handler);
p() // "I am the proxy"

8、Proxy实例的has(target, prop) 方法

答：该方法用来拦截hasProperty操作，判断对象是否存在某个属性，最典型的操作就是对象的in操作。
如果一个属性是不可配置（configurable）或禁止扩展，那么使用has方法就会报错；
这个拦截操作对 for…in 不起作用。

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

9、Proxy实例的construct(target, arguments, newTarget)方法

答：该方法用来拦截 new命令，可以接受三个参数，分别是目标对象、构造函数的参数数组、创造实例对象时，new命令作用的构造函数
该方法必须返回一个对象，否则会报错
construct()拦截的是构造函数，所以它的目标对象必须是函数，否则就会报错。
construct()方法中的this指向的是handler，而不是实例对象。

const handler = {
  construct: function(target, args) {
    console.log(this === handler);
    return new target(...args);
  }
}
let p = new Proxy(function () {}, handler);
new p() // true

10、Proxy实例的deleteProperty(target, prop)方法

答：deleteProperty方法用于拦截delete操作，如果这个方法抛出错误或者返回false，当前属性就无法被delete命令删除。
如果目标对象自身的不可配置（configurable）的属性，不能被deleteProperty方法删除，否则报错。

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

11、Proxy实例的defineProperty(target, prop, propDescription)方法

答： defineProperty()方法拦截了Object.defineProperty()操作。
如果目标对象不可扩展（non-extensible），则defineProperty()不能增加目标对象上不存在的属性，否则会报错。
另外，如果目标对象的属性不可写（writable）或不可配置（configurable），则defineProperty()方法不得改变这两个设置。
如果该方法只返回false，会导致添加新属性总是无效。但这里的false只是用来提示操作失败，本身并不能阻止添加新属性。

var handler = {
  defineProperty (target, key, descriptor) {
    return false;
  }
};
var target = {};
var proxy = new Proxy(target, handler);
proxy.foo = 'bar' // 不会生效

12、Proxy实例的getOwnPropertyDescriptor(target, prop)方法

答：该方法用来拦截Object.getOwnPropertyDescriptor()，返回一个属性描述对象或者undefined。

var handler = {
  getOwnPropertyDescriptor (target, key) {
    if (key[0] === '_') {
      return;
    }
    return Object.getOwnPropertyDescriptor(target, key);
  }
};
var target = { _foo: 'bar', baz: 'tar' };
var proxy = new Proxy(target, handler);
Object.getOwnPropertyDescriptor(proxy, 'wat') // undefined
Object.getOwnPropertyDescriptor(proxy, '_foo') // undefined
Object.getOwnPropertyDescriptor(proxy, 'baz') // { value: 'tar', writable: true, enumerable: true, configurable: true }

13、Proxy实例的getPrototypeOf(target)方法

答：该方法主要用来拦截获取对象原型，涉及的操作有：
Object.prototype.proto 、Object.prototype.isPrototypeOf()
Object.getPrototypeOf() 、Reflect.getPrototypeOf() 、instanceof
getPrototypeOf()方法的返回值必须是对象或者null，否则报错。
如果目标对象不可扩展（non-extensible）， getPrototypeOf()方法必须返回目标对象的原型对象。

var proto = {};
var p = new Proxy({}, {
  getPrototypeOf(target) {
    return proto;
  }
});
Object.getPrototypeOf(p) === proto // true

14、Proxy实例的isExtensible(target)方法

答：isExtensible()方法拦截Object.isExtensible()操作。
该方法只能返回布尔值，否则返回值会被自动转为布尔值。
这个方法有一个强限制，它的返回值必须与目标对象的isExtensible属性保持一致，否则就会抛出错误。

var p = new Proxy({}, {
  isExtensible: function(target) {
    return false;
  }
});
Object.isExtensible(p) // 报错：Uncaught TypeError: 'isExtensible' on proxy: trap result does not reflect extensibility of proxy target (which is 'true')

15、Proxy实例的ownKeys(target)方法

答：ownKeys()方法用来拦截对象自身属性的读取操作。
拦截的操作有Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()、Object.keys()、for…in循环；
如果目标对象自身包含不可配置的属性，则该属性必须被ownKeys()方法返回，否则报错。
如果目标对象是不可扩展的（non-extensible），这时ownKeys()方法返回的数组之中，必须包含原对象的所有属性，且不能包含多余的属性，否则报错。
使用Object.keys()方法时，ownKeys()会过滤目标对象上不存在的属性、Symbol类型的属性、不可遍历的属性（key）都会被自动过滤掉，不会返回。
ownKeys()方法返回的数组成员，只能是字符串或 Symbol 值。如果有其他类型的值，或者返回的根本不是数组，就会报错。

var obj = {};
var p = new Proxy(obj, {
  ownKeys: function(target) {
    return [123, true, undefined, null, {}, []];
  }
});
Object.getOwnPropertyNames(p) // 报错 ：Uncaught TypeError: 123 is not a valid property name

16、Proxy实例的preventExtensions(target)方法

答：该方法用来拦截 Object.preventExtensions()。
该方法返回一个布尔值，如果不是布尔值，会进行转换成布尔值。
当目标对象不可扩展时（即Object.isExtensible(proxy)为false），该方法才能返回true，不然会报错。

var proxy = new Proxy({}, {
  preventExtensions: function(target) {
    console.log('called');
    Object.preventExtensions(target); // 必须加上该代码，目的是为了防止Object.isExtensible()为true
    return true;
  }
});
Object.preventExtensions(proxy) // "called"           Proxy {}

17、Proxy实例的setPrototype(target, proto)方法

答：该方法用来拦截 Object.setPrototypeOf()方法。
该方法只能返回布尔值，如果不是布尔会被自动转为布尔值。
如果目标对象不可扩展，那么这个方法不得改变目标对象的原型。

var handler = {
  setPrototypeOf (target, proto) {
    throw new Error('Changing the prototype is forbidden');
  }
};
var proto = {};
var target = function () {};
var proxy = new Proxy(target, handler);
Object.setPrototypeOf(proxy, proto); // Error: Changing the prototype is forbidden

18、Proxy.revocable(target，handler)方法

答：该方法返回一个可取消的Proxy实例。
运用场景是：当需求是只能通过代理进行访问，目标对象不可以进行直接访问，
访问结束就收回代理权且不允许再次访问，可以使用该方法。

let target = {};
let handler = {};
let {proxy, revoke} = Proxy.revocable(target, handler);
proxy.foo = 123;
proxy.foo // 123
revoke(); // 函数revoke可以取消 Proxy实例
proxy.foo // 报错 TypeError: Revoked

19、利用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

20、目标对象的构造函数中的this会指向目标对象的Proxy代理吗？

答：不会

const _name = new WeakMap();
class Person {
  constructor(name) {
    _name.set(this, name);
  }
  get name() {
    return _name.get(this);
  }
}
const jane = new Person('Jane');
jane.name // 'Jane'
const proxy = new Proxy(jane, {});
proxy.name // undefined  

21、Proxy 拦截函数内部的this指向哪里

答：指向handler对象

const handler = {
  get: function (target, key, receiver) {
    console.log(this === handler);
    return 'Hello, ' + key;
  },
  set: function (target, key, value) {
    console.log(this === handler);
    target[key] = value;
    return true;
  }
};
const proxy = new Proxy({}, handler);
proxy.foo // true            Hello, foo
proxy.foo = 1 // true

22、所有原生对象中的内部属性能被Proxy代理吗

答：不能，例如：

const target = new Date();
const handler = {};
const proxy = new Proxy(target, handler);
proxy.getDate(); //报错：因为 getDate()方法只能在Date对象实例上面拿到，如果this不是Date对象实例就会报错。
// this绑定原始对象，就可以解决上面的问题。
const target = new Date('2015-01-01');
const handler = {
  get(target, prop) {
    if (prop === 'getDate') {
      return target.getDate.bind(target);
    }
    return Reflect.get(target, prop);
  }
};
const proxy = new Proxy(target, handler);
proxy.getDate() // 1

23、Proxy代理的应用有哪些

答：可用于编写Web服务器的客户端
可用于实现数据库的ORM层