ES6 Proxy apply的疑问

Question

var twice = {

    apply (target, ctx, args) {

        return Reflect.apply(...arguments) * 2;

    }

};

function sum (left, right) {

    return left + right;

};

var proxy = new Proxy(sum, twice);

console.log(proxy(1, 2))

apply方法拦截函数的调用、call和apply操作。

想了蛮久，始终没懂执行流程。

Answer 1

拦截器中的Reflect.apply应该相当于调用sum.bind(ctx)。ctx是调用时的上下文对象，这里是undefined这样你调用proxy(1,2)的返回值就相当于，Reflect.apply(...arguments)*2，也就是sum.bind(undefined)(1,2)。阮大大有写到：Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。我个人理解是，本来你能直接达到目标(直接调用sum)，而现在你想访问对象会经过一个拦截层，你可以在调用前修改参数，也可以在调用后修改返回值（比如本例的*2)。拦截器类似元编程，相当于修改语言特性的语法，比如本例就是对函数的apply机制进行修改，其他代理如get、set等相当于对对象的读写特性进行了修改，表面上看就好像语言特性被修改了。看下这两个例子应该就能明白如何用Proxy来代理一个函数：function sum(left, right) {  return (this.x || left) + right;}var twice = {  apply(target, ctx, args) {    console.log(ctx == obj);    return Reflect.apply(...arguments) * 2;  },};var proxy = new Proxy(sum, twice);let obj = { test: "test", proxy, x: 33 };console.log(obj.proxy(1, 2));//true//70//可见ctx为执行环境thisvar twice_changeParams = {  apply(target, ctx, args) {    args[1] = args[1] + 5;    return Reflect.apply(...arguments) * 2;  },};proxy = new Proxy(sum, twice_changeParams);console.log(proxy(1, 2));// 16//16为sum(1,(2+5))*2 分别对输入和输出进行了拦截//这就是拦截器的含义