proxy实现链式编程
原创
©著作权归作者所有:来自51CTO博客作者wx6375cd1abf2fb的原创作品,请联系作者获取转载授权,否则将追究法律责任
利用 Proxy,可以将读取属性的操作(get),转变为执行某个函数,从而实现属性的链式操作。
设置 Proxy 以后,达到了将函数名链式使用的效果
var pipe = function (value) {
var funcStack = [];
var oproxy = new Proxy({} , {
get : function (pipeObject, fnName) {
if (fnName === 'get') {
return funcStack.reduce(function (val, fn) {
return fn(val);
},value);
}
funcStack.push(window[fnName]);
return oproxy;
}
});
return oproxy;
}
var double = n => n * 2;
var pow = n => n * n;
var reverseInt = n => n.toString().split("").reverse().join("") | 0;
pipe(3).double.pow.reverseInt.get; // 63
console.log(pipe(3).double.pow.reverseInt.get) // 63
经过打断点,在控制台看执行过程:
执行过程是从左到右的;
上述函数执行过程,value为3会一直在,并不会被销毁(不足为奇哈)。
proxy在pipe(3):生成一个proxy并且将其返回后,后续的属性操作都走proxy的handler了
数组的reduce方法
reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,
每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
第一次执行回调函数时,不存在“上一次的计算结果”。
如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。
否则,数组索引为 0 的元素将被作为初始值 initialValue,
迭代器将从第二个元素开始执行(索引为 1 而不是 0)。
参数
callbackFn
一个“reducer”函数,包含四个参数:
- previousValue:上一次调用 callbackFn 时的返回值。在第一次调用时,若指定了初始值 initialValue,其值则为 initialValue,否则为数组索引为 0 的元素 array[0]。
- currentValue:数组中正在处理的元素。在第一次调用时,若指定了初始值 initialValue,其值则为数组索引为 0 的元素 array[0],否则为 array[1]。
- currentIndex:数组中正在处理的元素的索引。若指定了初始值 initialValue,则起始索引号为 0,否则从索引 1 起始。
- array:用于遍历的数组。
initialValue 可选
- 作为第一次调用 callback 函数时参数 previousValue 的值。若指定了初始值 initialValue,则 currentValue 则将使用数组第一个元素;否则 previousValue 将使用数组第一个元素,而 currentValue 将使用数组第二个元素。
返回值
使用“reducer”回调函数遍历整个数组后的结果。