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中文網其它相關文章!


分享到:


相關文章: