ES6躬行记（24）——代理和反射 - 好文

　　代理和反射是ES6新增的两个特性，两者之间是协调合作的关系，它们的具体功能将在接下来的章节中分别讲解。

一、代理

　　ES6引入代理（Proxy）地目的是拦截对象的内置操作，注入自定义的逻辑，改变对象的默认行为。也就是说，将某些JavaScript内部的操作暴露了出来，给予开发人员更多的权限。这其实是一种元编程（metaprogramming）的能力，即把代码看成数据，对代码进行编程，改变代码的行为。

　　在ES6中，代理是一种特殊的对象，如果要使用，需要像下面这样先生成一个Proxy实例。
new Proxy(target, handler);

　　构造函数Proxy()有两个参数，其中target是要用代理封装的目标对象，handler也是一个对象，它的方法被称为陷阱（trap），用于指定拦截后的行为。下面是一个代理的简单示例。
var obj = {}, handler = { set(target, property, value, receiver) {
target[property]= "hello " + value; } }, p = new Proxy(obj, handler); p.name =
"strick"; console.log(p.name); //"hello strick"

　　在上面的代码中，p是一个Proxy实例，它的目标对象是obj，使用了属性相关的陷阱：set()方法。当它写入obj的name属性时，会对其进行拦截，在属性值之前加上“hello
”前缀。除了上例使用的set()方法，ES6还给出了另外12种可用的陷阱，在后面的章节中会对它们做简单的介绍。

1）陷阱

　　表12罗列了目前所有可用的陷阱，第二列表示当前陷阱可拦截的行为，注意，只挑选了其中的几个用于展示。

表12 十三种陷阱

陷阱拦截返回值
get() 读取属性任意值
set() 写入属性布尔值
has() in运算符布尔值
deleteProperty() delete运算符布尔值
getOwnPropertyDescriptor() Object.getOwnPropertyDescriptor() 属性描述符对象
defineProperty() Object.defineProperty() 布尔值
preventExtensions() Object.preventExtensions() 布尔值
isExtensible() Object.isExtensible() 布尔值
getPrototypeOf()
Object.getPrototypeOf() __proto__

Object.prototype.isPrototypeOf()  instanceof
对象
setPrototypeOf() Object.setPrototypeOf() 布尔值
apply()
Function.prototype.apply() 函数调用

Function.prototype.call()
任意值
construct() new运算符作用于构造函数对象
ownKeys()
Object.getOwnPropertyNames()   Object.keys()

Object.getOwnPropertySymbols()  for-in循环
数组
　　目前支持的拦截就上面几种，像typeof运算符、全等比较等操作还不被ES6支持。接下来会挑选其中的两次个陷阱，讲解它们的简单应用。

　　在JavaScript中，当读取对象上不存在的属性时，不会报错而是返回undefined，这其实在某些情况下会发生歧义，现在利用陷阱中的get()方法就能改变默认行为，如下所示。
var obj = { name: "strick" }, handler = { get(target, property, receiver) { if
(propertyin target) return target[property]; throw "未定义的错误"; } }, p = new
Proxy(obj, handler); p.name; 　　//"strick" p.age; //未定义的错误

　　在get()方法中有3个参数，target是目标对象（即obj），property是读取的属性的名称（即“name”和“age”），receiver是当前的Proxy实例（即p）。在读取属性时，会用in运算符判断当前属性是否存在，如果存在就返回相应的属性值，否则就会抛出错误，这样就能避免歧义的出现。

　　在众多陷阱中，只有apply()和construct()的目标对象得是函数。以apply()方法为例，它有3个参数，target是目标函数，thisArg是this的指向，argumentsList是函数的参数序列，它的具体使用如下所示。
function getName(name) { return name; } var obj = { prefix: "hello " }, handler
= { apply(target, thisArg, argumentsList) { if(thisArg && thisArg.prefix) return
target(thisArg.prefix + argumentsList[0]); return target(...argumentsList); }
}, p= new Proxy(getName, handler); p("strick"); 　　　 //"strick" p.call(obj,
"strick");//"hello strick"
　　p是一个Proxy实例，p("strick")是一次普通的函数调用，此时虽然拦截了，但是仍然会把参数原样传过去；而p.call(obj,
"strick")是间接的函数调用，此时会给第一个参数添加前缀，从而改变函数最终的返回值。

2）撤销代理

　　Proxy.revocable()方法能够创建一个可撤销的代理，它能接收两个参数，其含义与构造函数Proxy()中的相同，但返回值是一个对象，包含两个属性，如下所列。

（1）proxy：新生成的Proxy实例。

（2）revoke：撤销函数，它没有参数，能把与它一起生成的Proxy实例撤销掉。

　　下面是一个简单的示例，obj是目标对象，handler是陷阱对象，传递给Proxy.revocable()后，通过对象解构将返回值赋给了proxy和revoke两个变量。
var obj = {}, handler = {}; let {proxy, revoke} = Proxy.revocable(obj,
handler); revoke();delete proxy.name; //类型错误 typeof proxy; //"object"

　　在调用revoke()函数后，就不能再对proxy进行拦截了。像上例使用delete运算符，就会抛出类型错误，但像typeof之类的不可拦截的运算符还是可以成功执行的。

3）原型

　　代理可以成为其它对象的原型，就像下面这样。
var obj = { name: "strick" }, handler = { get(target, property, receiver) { if
(property == "name") return "hello " + target[property]; return true; } }, p =
new Proxy({}, handler); Object.setPrototypeOf(obj, p); //obj的原型指向Proxy实例
obj.name; 　　　　　　//"strick" obj.age; 　　　　　　 //true

　　p是一个Proxy实例，它会拦截属性的读取操作，obj的原型指向了p，注意，p的目标对象不是obj。当obj读取name属性时，不会触发拦截，因为name是自有属性，所以不会去原型上查找，最终得到的结果是没有前缀的“strick”。之前的代理都是直接作用于相关对象（例如上面的obj），因此只要执行可拦截的动作就会被处理，但现在中间隔了个原型，有了更多的限制。而在读取age属性时，由于自有属性中没有它，因此就会去原型上查找，从而触发了拦截操作，返回了true。

二、反射

　　反射（Reflect）向外界暴露了一些底层操作的默认行为，它是一个没有构造函数的内置对象，类似于Math对象，其所有方法都是静态的。代理中的每个陷阱都会对应一个同名的反射方法（例如Reflect.set()、Reflect.ownKeys()等），而每个反射方法又都会关联到对应代理所拦截的行为（例如in运算符、Object.defineProperty()等），这样就能保证某个操作的默认行为可随时被访问到。反射让对象的内置行为变得更加严谨、合理与便捷，具体表现如下所列。

　　（1）参数的检验更为严格，Object的getPrototypeOf()、isExtensible()等方法会将非对象的参数自动转换成相应的对象（例如字符串转换成String对象，如下代码所示），而关联的反射方法却不会这么做，它会直接抛出类型错误。
Object.getPrototypeOf("strick") === String.prototype;　　　　　//true
Reflect.getPrototypeOf("strick"); 　　　　　//类型错误

　　（2）更合理的返回值，Object.setPrototypeOf()会返回它的第一个参数，而Reflect的同名方法会返回一个布尔值，后者能更直观的反馈设置是否成功，两个方法的对比如下所示。
var obj = {}; Object.setPrototypeOf(obj, String) === obj; 　　 //true
Reflect.setPrototypeOf(obj, String); 　　//true
　　（3）用方法替代运算符，反射能以调用方法的形式完成new、in、delete等运算符的功能，在下面的示例中，先使用运算符，再给出对应的反射方法。
function func() { } new func(); Reflect.construct(func, []); var people = {
name:"strick" }; "name" in people; Reflect.has(people, "name"); delete
people["name"]; Reflect.deleteProperty(people, "name");
　　（4）避免冗长的方法调用，以apply()方法为例，如下所示。
Function.prototype.apply.call(Math.ceil, null, [2.5]); 　　//3
Reflect.apply(Math.ceil,null, [2.5]); 　　　　　//3

　　上面代码的第一条语句比较绕，需要将其分解成两部分：Function.prototype.apply()和call()。ES5规定apply()和call()两个方法在最后都要调用一个有特殊功能的内部函数，如下代码所示，func参数表示调用这两个方法的函数。
[[Call]](func, thisArg, argList)

　　内部函数的功能就是在调用func()函数时，传递给它的参数序列是argList，其内部的this指向了thisArg。当执行第一条语句时，传递给[[Call]]函数的三个参数如下所示。
[[Call]](Function.prototype.apply, Math.ceil, [null, [2.5]])

　　接下来会调用原型上的apply()方法，由于其this指向了Math.ceil（即当前调用apply()方法的是Math.ceil），因此[[Call]]函数的第一个参数就是Math.ceil，如下所示。
[[Call]](Math.ceil, null, [2.5]) //相当于 Math.ceil.apply(null, [2.5])

热门工具换一换