最近在博客上看到关于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
对应对象内建的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绑定到处理函数
- 必须返回一个 对象 或 u
ndefined
约束：
getOwnPropertyDescriptor必须返回一个 object 或 undefined
如果属性作为目标对象的不可配置的属性存在，则该属性无法报告为不存在
如果属性作为目标对象的属性存在，并且目标对象不可扩展，则该属性无法报告为不存在
如果属性不存在作为目标对象的属性，并且目标对象不可扩展，则不能将其报告为存在
属性不能被报告为不可配置，如果它不作为目标对象的自身属性存在，或者作为目标对象的可配置的属性存在
Object.getOwnPropertyDescriptor（target）的结果可以使用 Object.defineProperty 应用于目标对象，也不会抛出异常
var p = new Proxy(target, {
ownKeys: function(target) {
}
});- target，目标对象
- this绑定到处理函数
- 返回一个数组
约束：
- 返回值必须是一个数组
- 数组的每一个元素必须是字符串或者Symbol
- 数组必须包含目标对象的所有非可配置属性的键
- 如果目标对象不可扩展，则数组必须包含目标对象自身属性的所有键，并且没有其他值
10、h
andler.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个方法进行的，如果你打算进阶的话，那么现在可以去看一些大神的库了。
扫一扫
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
