深度揭秘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个方法进行的，如果你打算进阶的话，那么现在可以去看一些大神的库了。

巴特西

深度揭秘ES6代理Proxy

最新文章

热门文章