深度揭秘ES6代理Proxy

最近在博客上看到关于ES6代理的文章都是一些关于如何使用Proxy的例子，很少有说明Proxy原理的文章，要知道只有真正掌握了一项技术的原理，才能够写出精妙绝伦的代码，所以我觉得有必要写一篇关于深刻揭露ES6 Proxy的文章。

看完这篇文章你不会学到一些大型的使用Proxy的例子，但是你可以了解以下几方面的内容：

• 你将知道代理是个什么东西
• 你将知道所有代理对象可覆盖的方法
• 一些代理对象使用的小场景

什么是代理？刚开始入行的同学可能就会问了。我觉得回答这个问题之前我们应该先弄清楚另一个问题：什么是对象？有人会回答：对象是属性的集合。好吧，这种回答的确找不出什么bug，但是却太抽象了，ES委员会为对象定义了一个由14种方法组成的集合，它是适用于所有对象的通用接口， 你可以调用、删除或覆写普通方法，但是无法操作内部方法。 下面让我们来看一下这14个方法，[[]]代表内部方法，在一般代码中不可见。

• [[GetPrototypeOf]] ( )

  获取对象的原型时调用，在执行obj[__proto__]或Object.getPrototypeOf(obj)时调用。

• [[SetPrototypeOf]] (V)

  设置一个对象的原型时调用，在执行obj.prototype=otherObj或则Object.SetPrototypeOf(v)的时候调用

• [[IsExtensible]] ( )

  获取对象的可扩展性时调用，执行Object.isExtensible(object)时被调用。

• [[GetOwnProperty]] (P)

  获取自有属性时调用

  
  
[[PreventExtensions]]()

扩展一个不可扩展的对象时调用

• [[DefineOwnProperty]] (P, Desc)

  定义自有属性时调用

• [[HasProperty]](P)

  检测对象是否存在某个属性时调用，如key in obj

• [[Get]] (P, Receiver)

  获取属性时调用，如obj.key，obj[key]。

• [[Set]] ( P, V, Receiver)

  为对象的属性赋值时调用，如obj.key=value或obj[key]=value。

• [[Delete]] (P)

  删除某个属性时调用

• [[Enumerate]] ()

  列举对象的可枚举属性时调用，如for (var key in obj)。

• [[OwnPropertyKeys]] ( )

  列举对象的自有属性时调用

  
  
functionObj.[[Call]](thisValue, arguments)

调用一个函数时被调用，functionObj()或者x.method()。

 
 
constructorObj.[[Construct]](arguments, newTarget)

使用new操作的时候调用，如new Date()。

在整个 ES6 标准中，只要有可能，任何语法或对象相关的内建函数都是基于这 14 种内部方法构建的 。但是我们不必记住这些对象的内建属性，我们更应关注是handler与之相对应的方法。

现在我们已经清楚了对象的14个内建方法，那么我们再回到第一个问题：什么是代理？我们可以这样说，代理Proxy是一个构造函数， 它可以接受两个参数：目标对象（ target ） 与句柄对象（ handler ） ，返回一个代理对象Proxy，主要用于从外部控制对对象内部的访问。

var target = {}, handler = {};
var proxy = new Proxy(target, handler);

那么Proxy、target、handler这三者之间有什么关系呢？Proxy的行为很简单： 将Proxy的所有内部方法转发至target 。即调用Proxy的方法就会调用target上对应的方法。那么handler又是用来干嘛的？ handler的方法可以覆写任意代理的内部方法。 外界每次通过Proxy访问 target 对象的属性时，就会经过 handler 对象，因此，我们可以通过重写handler对象中的一些方法来做一些拦截的操作。以下是一个简单的代理使用例子。

var person = {
	name: "Jhon",
	age: 23
};
var p = new Proxy(person,{
	get: function(target, prop, receiver){
		console.log("你访问了person的属性");
		return target["name"];
	}
});
console.log(p.age);
// 你访问了person的属性 
// Jhon

你看，我们虽然访问了age属性，它却输出了额外的字符串和属性name的值，这就是拦截器的作用。

对应对象内建的14个方法，handler也有14个方法可以覆盖，下面我们将会一一讲解。

1、 handler.get()  方法用于拦截对象的读取属性操作。

var p = new Proxy(target, {
  get: function(target, property, receiver) {
  }
});

• target，目标对象
• property，被获取的属性名
• receiver，Proxy或者继承Proxy的对象
• 可以返回任何值
• this绑定到handler对象上

约束条件，proxy会抛出 TypeError：

• 如果要访问的目标属性是不可写以及不可配置的，则返回的值必须与该目标属性的值相同。
• 如果要访问的目标属性没有配置访问方法，即get方法是undefined的，则返回值必须为undefined。
  

2、handler.set() 方法用于拦截设置属性值的操作

var p = new Proxy(target, {
  set: function(target, property, value, receiver) {
  }
});

• target，目标对象
• property，被设置的属性名
• value，被设置的新值
• receiver，最初被调用的对象。通常是proxy本身，但handler的set方法也有可能在原型链上或以其他方式被间接地调用（因此不一定是proxy本身）
• this绑定到handler对象上
• 返回一个布尔值，返回true代表此次设置属性成功了，如果返回false且设置属性操作发生在严格模式下，那么会抛出一个TypeError
  

约束，违背proxy会抛出一个TypeError:

• 若目标属性是不可写及不可配置的，则不能改变它的值
  
• 如果目标属性没有配置存储方法，即set方法是undefined的，则不能设置它的值
  
• 在严格模式下，若set方法返回false，则会抛出一个 TypeError 异常
  

3、 handler.has() 方法可以看作是针对 in 操作的钩子

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

• targe，t目标对象
• prop，需要检查是否存在的属性
• this绑定到handler对象上
• 返回一个boolean值

约束：

• 如果目标对象的某一属性本身不可被配置，则该属性不能够被代理隐藏
• 如果目标对象为不可扩展对象，则该对象的属性不能够被代理隐藏

4、handler.getPrototypeOf() 是一个代理方法，当读取代理对象的原型时，该方法就会被调用

var p = new Proxy(obj, {
  getPrototypeOf(target) {
  ...
  }
});

• target，被代理的目标对象
• this 指向的是它所属的处理器对象
  
• 必须返回一个对象值或者返回 null
  

约束：

• getPrototypeOf() 方法返回的不是对象也不是 null
  
• 目标对象是不可扩展的，且 getPrototypeOf() 方法返回的原型不是目标对象本身的原型


5、handler.defineProperty() 用于拦截对对象的 Object.defineProperty() 操作

var p = new Proxy(target, {
  defineProperty: function(target, property, descriptor) {
  }
});

• target，目标对象
• property，待检索其描述的属性名
• descriptor，待定义或修改的属性的描述符
• this 绑定在 handler 对象上
  
• 返回一个boolean值

约束：

• 如果目标对象不可扩展， 将不能添加属性、
  
• 不能添加或者修改一个属性为不可配置的，如果它不作为一个目标对象的不可配置的属性存在的话
  
• 如果目标对象存在一个对应的可配置属性，这个属性可能不会是不可配置的
  
• 如果一个属性在目标对象中存在对应的属性，那么 Object.defineProperty(target, prop, descriptor) 将不会抛出异常
• 在严格模式下， false 作为 handler.defineProperty 方法的返回值的话将会抛出 TypeError 异

6、handler.deleteProperty() 方法用于拦截对对象属性的 delete 操作

var p = new Proxy(target, {
  deleteProperty: function(target, property) {
  }
});

• target，目标对象
• property，待删除的属性名
• this 被绑定在 handler上
  
• 返回一个boolean值

约束：

• 如果目标对象的属性是不可配置的，那么该属性不能被删除
  

7、handler.setPrototypeOf() 用于拦截对对象的 Object.setPrototypeOf() 操作

var p = new Proxy(target, {
  setPrototypeOf: function(target, prototype) {
  }
});

• target，目标对象
• prototype，待设置的属性名或者null
• this 被绑定在 handler上
  
• 返回一个boolean值

约束：

• 如果目标对象是不可扩展的，则原型的参数必须和Object.getPrototypeOf(target)相同

8、handler.getOwnPropertyDescriptor() 用于拦截对对象的 Object.getOwnPropertyDescriptor() 操作

var p = new Proxy(target, {
  getOwnPropertyDescriptor: function(target, prop) {
  }
});

• target，目标对象
• prop，返回属性名的描述符
• this绑定到处理函数
• 必须返回一个 对象 或 undefined
  

约束：

• getOwnPropertyDescriptor 必须返回一个 object 或 undefined
  
• 如果属性作为目标对象的不可配置的属性存在，则该属性无法报告为不存在

• 如果属性作为目标对象的属性存在，并且目标对象不可扩展，则该属性无法报告为不存在

• 如果属性不存在作为目标对象的属性，并且目标对象不可扩展，则不能将其报告为存在

• 属性不能被报告为不可配置，如果它不作为目标对象的自身属性存在，或者作为目标对象的可配置的属性存在

• Object.getOwnPropertyDescriptor（target）的结果可以使用 Object.defineProperty 应用于目标对象，也不会抛出异常


9、handler.keys() 用于拦截对对象的  Object.keys() 操作

var p = new Proxy(target, {
  ownKeys: function(target) {
  }
});

• target，目标对象
• this绑定到处理函数
• 返回一个数组

约束：

• 返回值必须是一个数组
• 数组的每一个元素必须是字符串或者Symbol
• 数组必须包含目标对象的所有非可配置属性的键
  
• 如果目标对象不可扩展，则数组必须包含目标对象自身属性的所有键，并且没有其他值
  

10、handler.isExtensible() 用于拦截对对象的 Object.isExtensible()操作

var p = new Proxy(target, {
  isExtensible: function(target) {
  }
});

• target，目标对象
• this绑定到处理函数
• 返回一个boolean值

约束：

• Object.isExtensible(proxy) 必须返回和Object.isExtensible(target)相同的值
  

11、handler.apply() 方法用于拦截函数的调用

var p = new Proxy(target, {
  apply: function(target, thisArg, argumentsList) {
  }
});

• target，目标对象（函数）
• thisArg，被调用时的上下文对象
• argumentsList，被调用时的参数列表
• this绑定到handler对象
• 可以返回任何值

约束

• 无

12、 handler.construct()用于来接new操作

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

• target，目标对象
• argumensList，构造器参数列表
• newTarget，最初调用的构造函数
• this绑定到handler
• 返回一个对象

约束：

• 返回值必须是一个对象

13、handler.preventExtensions()) 用于拦截对对象的handler.preventExtensions()操作

var p = new Proxy(target, {
  preventExtensions: function(target) {
  }
});

• target，目标对象
• this绑定到handler对象
• 返回一个boolean值

约束：

• Object.isExtensible(proxy)为假，则Object.preventExtensions(proxy)只能返回true
  

14、headler.enumerate()

以上我们列举了所有可选择覆盖的14个headler方法，所有代理的操作都是基于这14个方法进行的，如果你打算进阶的话，那么现在可以去看一些大神的库了。