ES6中的Proxy是什么?Proxy的详细分析

function(tagert,key){},

defineProperty: function

(tagert,key,desc){},

preventExtensions: function(tagert){},

getPrototypeOf: function(tagert){},

isExtensible: function(tagert){},

setPrototypeof: function(tagert,proto){},

apply: function(tagert,obj,args){},

construct: function(tagert,args){},

})

get() 代理的应用

允许数组下标是负值

在js中,数组的有效下表是从0开始的。

var arr = [1,2,3];

console.info(arr[0]) // 1

console.info(arr[-1]) // undefined

console.info(arr[100]) // undefined

值得注意的是,下表越界或者是负值的情况下,得到的结果是undefined,而不是报错。

下面我们希望数组可以取负值下表,规则如下:

  • -n表示倒数第n个元素。例如:-1表示倒数第一个元素。

使用Proxy解决如下:

var arr = [1,2,3];

var proxyArr = new Proxy(arr,{

get: (target,prop)=>{

let index = Number(prop);

if(index < 0){

prop = target.length + index;

}

return target[prop];

}

})

console.info(arr[-1]); // undefined

console.info(proxyArr[-1]); // 3

注意:

  • Number()可以把传入的值转成数值型。非数值 --> NaN;
  • 如果是proxyArr.push(3),由于此时的prop是'push',所以不会进入if分支。
  • 如果是proxyArr[-1],此时的prop是'-1',所以会进入到if分支:把prop从-1改成 2 ,从而实现了被代理的效果。
  • 此时,完全可以把proxyArr当作一个数组来使用,sort,push等方法均可以调用。Array.isArray(proxyArr) === true

当然,你也可以进一步封装成工厂函数。

function myArr(...args){

var arr = new Array(...args);

var proxyArr = new Proxy(arr,{

get: (target,key)=>{

let index = Number(key);

if(index < 0){

key = target.length + index;

}

return target[key];

}

})

return proxyArr;

}

var obj = myArr([1,2,3]);

console.info(obj[0],obj[-1])

链式运算

var double = n => n*2;

var pow2 = n => n*n;

var half = n => n/ 2;

var add1 = n => n+1;

function pipe (num){

let funs = []

let obj = new Proxy({},{

get:

function(target,prop){

if(prop === 'end'){

return funs.reduce((val,currentfn)=>currentfn(val),num);

}else{

funs.push(window[prop])

}

return obj;

}

})

return obj;

};

console.info( pipe(4).double.pow2.end);

console.info( pipe(4).pow.double.pow2.add1.end);

以上就是ES6中的Proxy是什么?Proxy的详细分析的详细内容,更多请关注php中文网其它相关文章!


分享到:


相關文章: