代理和反射是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 十三种陷阱   目前支持的拦截就上面几种，像typeof运算符、全等比较等操作还不被ES6支持。接下来会挑选其中的两次个陷阱，讲解它们的简单应用。   在JavaScript中，当读取对象上不存在的属性时，不会报错而是返回undefined，这其实在某些情况下会发生歧义，现在利用陷阱中的get()方法就能改变默认行为，如下所示。 ~~~ var obj = { name: "strick" }, handler = { get(target, property, receiver) { if(property in 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]) ~~~ ***** > 原文出处： [博客园-ES6躬行记](https://www.cnblogs.com/strick/category/1372951.html) [知乎专栏-ES6躬行记](https://zhuanlan.zhihu.com/pwes6) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。