摘要：在中構(gòu)造器的典型特點(diǎn)就是首字母大寫，我們通過原對(duì)象代理列表格式去創(chuàng)建對(duì)象創(chuàng)建的這個(gè)對(duì)象我們稱之為代理對(duì)象。就是原對(duì)象是當(dāng)前的屬性名是代理對(duì)象。理解為明星的經(jīng)理人消極怠工原封不動(dòng)地轉(zhuǎn)告外界的信息給明星本身。但是要注意與是兩個(gè)不同的對(duì)象。

proxy的中文有代理的意思。在其他的程序設(shè)計(jì)語言中這個(gè)單詞也具有類似的含義。

Proxy是一個(gè)構(gòu)造器。在js中構(gòu)造器的典型特點(diǎn)就是首字母大寫，我們通過new Proxy(原對(duì)象,{代理列表})格式去創(chuàng)建對(duì)象,創(chuàng)建的這個(gè)對(duì)象我們稱之為代理對(duì)象。
即：

代理對(duì)象 = new Proxy(原對(duì)象,{代理列表})

之所以要額外產(chǎn)生這么一個(gè)代理對(duì)象，好處在于可以保持原對(duì)象不變，在代理對(duì)象中添加新的功能，或者是改造某些功能。而這個(gè)原對(duì)象則可以在適當(dāng)?shù)臅r(shí)機(jī)回滾回去?？梢耘c設(shè)計(jì)模式中的代理模式對(duì)比理解。

var obj;
var proxyObj = new Proxy(obj, {
    對(duì)obj的操作1: 函數(shù)1，
    對(duì)obj的操作2: 函數(shù)2，
    ...
    
})

var obj = {name:"fan",age:34}
console.info(obj.name)

var proxyObj = new Proxy(obj,{
    get:function(target,key,receiver){console.info(target,key,receiver); return "no"}
})

console.info(proxyObj.name) 
console.info(proxyObj.abc)

解釋如下：

proxxy對(duì)象是在obj對(duì)象的基礎(chǔ)之上創(chuàng)建的一個(gè)新對(duì)象。

proxyObj.name是要去獲取proxy對(duì)象的name屬性。.操作符會(huì)自動(dòng)去調(diào)用get()方法。這一點(diǎn)非常重要，在js中，對(duì)象是屬性的無序集合。對(duì)象只有屬性，其他什么都沒有. 而我們經(jīng)常說的調(diào)用對(duì)象的某個(gè)方法：例如數(shù)組對(duì)象arr的sort方法:arr.sort()，這里的sort也是arr對(duì)象的屬性（更嚴(yán)謹(jǐn)一點(diǎn)，sort是arr.__proto__這個(gè)對(duì)象的屬性），與length屬性相比，sort屬性的屬性值是一個(gè)函數(shù)，所以在它的后面加()來執(zhí)行這個(gè)函數(shù)，而length屬性的值是一個(gè)數(shù)值，所以不需要加()就可以直接使用。再次強(qiáng)調(diào)一下：對(duì)象的.操作，會(huì)自動(dòng)去調(diào)用get。當(dāng)然，我們平時(shí)使用.操作時(shí)，是沒有感知到這一點(diǎn)的。

在new Proxy的第二個(gè)參數(shù)中，明確設(shè)置了get的方法：當(dāng)訪問proxyObj的任意屬性時(shí)，輸出target,key,receiver的值，并統(tǒng)一返回no。所以proxyObj.name和proxyObj.abc都會(huì)得到no。

寫到這里你會(huì)覺得原對(duì)象與代理對(duì)象之間有什么關(guān)系呢？為什么叫代理呢？

代理對(duì)象可以理解為明星的經(jīng)紀(jì)人。

外界 <----> 原對(duì)象；
外界 <----> 代理對(duì)象 <------> 原對(duì)象； 

還以上面的代碼為例，改進(jìn)一下需求：如果有人問obj的名字，就直接告訴對(duì)方； 如果有人問obj的年齡，就返回小5歲的年齡。

var obj = {name:"fan",age:34}
console.info(obj.age)           // 34
var proxyObj = new Proxy(obj,{
    get:function(target,key,receiver){
        console.info(target === obj);           //true
        console.info(receiver === proxyObj);    //true
        if("age" === key){
            return target[key] - 5;
        }
        else{
            return target[key]
        }
    }
})

console.info(proxyObj.age)  // 34- 5 = 29

解釋如下：

get函數(shù)中的三個(gè)參數(shù)：target,key,receiver。 target就是原對(duì)象j,keys是當(dāng)前的屬性名；receiver是代理對(duì)象。你可以在get方法中做任意的自定義的處理。

var arr = [2,1]
var proxyArr = new Proxy(arr,{} )
proxyArr.push(3);
console.info(arr) // [2,1,3]
console.info(arr === proxyArr) // false
arr.sort();
console.info(proxyArr[0]) // 1

以上代碼中，這個(gè)代理對(duì)象并沒有做任何的特殊操作。理解為明星的經(jīng)理人消極怠工：原封不動(dòng)地轉(zhuǎn)告外界的信息給明星本身。所以在proxyArr上做到操作會(huì)直接影響到arr上。

同理，在arr上的操作，也會(huì)影響proxyArr。
但是要注意：proxyArr與arr是兩個(gè)不同的對(duì)象：arr !== proxyArr。

你可能會(huì)想一想：為什么proxyArr能夠直接使用push這個(gè)方法呢？原因是：

proxyArr.__proto__ === arr.__proto__ === Array.prototype

前一個(gè)等式成立的原因是由new Proxy的基因決定的：原對(duì)象被代理了嘛。

在new Proxy的第二個(gè)參數(shù)中，可以設(shè)置的代理屬性如下：

var proxyObj = new Proxy(obj, {

    get: function(tagert,key,receiver){},
    set: function(tagert,key,receiver){},
    has: function(tagert,key){},
    deleteProperty: function(tagert,key){},
    ownKeys: function(tagert){},
    getOwnPropertyDescriptor: 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){},
    
})

在js中，數(shù)組的有效下表是從0開始的。

var arr = [1,2,3];
console.info(arr[0])  // 1
console.info(arr[-1]) // undefined
console.info(arr[100]) // undefined

值得注意的是，下表越界或者是負(fù)值的情況下，得到的結(jié)果是undefined，而不是報(bào)錯(cuò)。

下面我們希望數(shù)組可以取負(fù)值下表，規(guī)則如下：

-n表示倒數(shù)第n個(gè)元素。例如：-1表示倒數(shù)第一個(gè)元素。

使用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()可以把傳入的值轉(zhuǎn)成數(shù)值型。非數(shù)值 --> NaN;

如果是proxyArr.push(3)，由于此時(shí)的prop是"push",所以不會(huì)進(jìn)入if分支。

如果是proxyArr[-1],此時(shí)的prop是"-1",所以會(huì)進(jìn)入到if分支：把prop從-1改成 2 ,從而實(shí)現(xiàn)了被代理的效果。

此時(shí)，完全可以把proxyArr當(dāng)作一個(gè)數(shù)組來使用，sort,push等方法均可以調(diào)用。Array.isArray(proxyArr) === true

當(dāng)然，你也可以進(jìn)一步封裝成工廠函數(shù)。

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);

說明：

reduce