es 中的proxy 调用对象中的方法 ...args

Question

最近在学习es中的proxy代理的操作发现如果我定义了一个对象为：

var phone = { 
    number: 10068, 
    changeNumber(nu) { 
    this.number = number 
                }
    } 

之后再使用Proxy代理

var proxy = new Proxy(phone, {

 get: function (target, key, proxy) {

 var value = target[key];

 if (typeof value === 'function') {

 return function (...args) {

 console.log(`执行 ${key} 方法`);

 return Reflect.apply(value, target, args)

 }

 } else {

 console.log(`读取参数:${key}`);

 return value

 }

 }

})
console.log(proxy.number);//===> 读取参数:number 10068 proxy.changeNumber(1231231233213)//===> 执行 changeNumber 方法

我可以理解代理的为get读取方法，但是不能理解调用方法中的那个...args是怎么传值过去的，希望可以解答一下?

Answer 1

哪来的 ...args，我只看到一个 ...q 啊。

... 是 ES6 新增的展开运算符，这个需要解释吗？

Reflect 也是 ES6 新增的全局对象，跟 Proxy 往往同时出现。你这里的 Reflect.apply(value, target, q) 等价于 Function.prototype.apply.call(value, target, q)，你可以理解成简写。至于 Reflect 的其他用处，你可以自行搜索。

至于 Function.prototype.apply，这是最早 JS 里就有的了，用法看这：Function.prototype.apply()