摘要：拋出當(dāng)被檢查的屬性鍵存在與目標(biāo)對(duì)象中，且該屬性的配置是時(shí)，該監(jiān)聽(tīng)方法不能返回。也可以將類(lèi)作為目標(biāo)監(jiān)聽(tīng)對(duì)象，并監(jiān)聽(tīng)其通過(guò)語(yǔ)句來(lái)生產(chǎn)新實(shí)例的行為，這同樣可以使用再作為構(gòu)造器的構(gòu)造函數(shù)上。這里返回的結(jié)果會(huì)是所得到的實(shí)例創(chuàng)建可解除對(duì)象用法。

Proxy 讓我們可以對(duì)任何對(duì)象的絕大部分行為進(jìn)行監(jiān)聽(tīng)和干涉，實(shí)現(xiàn)更多的自定義程序行為。
用法：new Proxy(target, handler)。
?? Proxy 通過(guò)設(shè)置行為監(jiān)聽(tīng)方法來(lái)捕獲程序?qū)?duì)應(yīng)對(duì)象的行為。

    const obj = {};
    const proxy = new Proxy(obj, {
        // ...
    })

Proxy 的構(gòu)造器接受兩個(gè)參數(shù)，第一個(gè)參數(shù)為需要進(jìn)行包裝的目標(biāo)對(duì)象，第二個(gè)參數(shù)則為用于監(jiān)聽(tīng)目標(biāo)對(duì)象行為的監(jiān)聽(tīng)器，其中監(jiān)聽(tīng)器可以接受一些參數(shù)以監(jiān)聽(tīng)相對(duì)應(yīng)的程序行為。
監(jiān)聽(tīng)屬性、參數(shù)及監(jiān)聽(tīng)內(nèi)容

可以通過(guò)為 Proxy 的 handler 定義 has 監(jiān)聽(tīng)方法，來(lái)監(jiān)聽(tīng)程序通過(guò) in 語(yǔ)句來(lái)檢查一個(gè)字符串或數(shù)字是否為該 Proxy 的目標(biāo)對(duì)象中某個(gè)屬性的屬性鍵的過(guò)程。

const p = new Proxy({}, {
    has(target, prop){
        console.log(`Checking "${prop}" is in the target or not`);
        return true;
    }
})

console.log("foo" in p);
// Checking "foo" is in the target or not
// true

該監(jiān)聽(tīng)方法有兩個(gè)需要注意的地方，如果遇到這兩種情況，便會(huì)拋出 TypeError 錯(cuò)誤。

1.當(dāng)目標(biāo)對(duì)象被其他程序通過(guò) Object.preventExtensions() 禁用了屬性拓展 (該對(duì)象無(wú)法再增加新的屬性，只能對(duì)當(dāng)前已有的屬性進(jìn)行操作，包括讀取、操作和刪除，但是一旦刪除就無(wú)法再定義) 功能，且被檢查的屬性鍵確實(shí)存在與目標(biāo)對(duì)象中，該監(jiān)聽(tīng)方法便不能返回 false。

const obj = {foo: 1};

Object.preventExtensions(obj);

const p = new Proxy(obj, {
    has(target, prop){
        console.log(`Checking "${prop}" is in the target or not`);
        return false; 
    }
})

console.log("foo" in p);   
//拋出Uncaught TypeError: 

2.當(dāng)被檢查的屬性鍵存在與目標(biāo)對(duì)象中，且該屬性的 configurable 配置是 false 時(shí)，該監(jiān)聽(tīng)方法不能返回 false。

const obj = {};

Object.defineProperty(obj, "foo", {
    configurable: false,
    value: 10
})

const p = new Proxy(obj, {
    has(target, prop){
        console.log(`Checking "${prop}" is in the target or not`);
        return false;
    }
})

console.log("foo" in p);
//拋出Uncaught TypeError: 

Getter只能對(duì)已知的屬性鍵進(jìn)行監(jiān)聽(tīng)，而無(wú)法對(duì)所有屬性讀取行為進(jìn)行攔截，而 Proxy 可以通過(guò)設(shè)定 get 監(jiān)聽(tīng)方法，攔截和干涉目標(biāo)對(duì)象的所有屬性讀取行為。

const obj = {foo: 1};
const p = new Proxy(obj, {
    get(target, prop){
        console.log(`Program is trying to fetch the property "${prop}".`);
        return target[prop];
    }
})

alert(p.foo);  // Program is trying to fetch the property "foo".
alert(p.something);    // Program is trying to fetch the property "something".

??這個(gè)監(jiān)聽(tīng)方法也存在需要注意的地方——當(dāng)目標(biāo)對(duì)象被讀取屬性的 configurable 和 writable 屬性都為 false 時(shí)，監(jiān)聽(tīng)方法最后返回的值必須與目標(biāo)對(duì)象的原屬性值一致。

const obj = {};

Object.defineProperty(obj, "foo", {
    configurable: false,
    value: 10,
    writable: false
})

const p = new Proxy(obj, {
    get(target, prop){
        return 20;
    }
})

console.log(p.foo);

??handler.set 用于監(jiān)聽(tīng)目標(biāo)對(duì)象的所有屬性賦值行為。注意，如果目標(biāo)對(duì)象自身的某個(gè)屬性是不可寫(xiě)也不可配置的，那么 set 不得改變這個(gè)屬性的值，只能返回同樣的值，否則報(bào)錯(cuò)。

const obj = {};
const p = new Proxy(obj, {
    set(target, prop, value){
        console.log(`Setting value "${value}" on the key "${prop}" in the target object`);
        target[prop] = value;
        return true;
    }
})

p.foo = 1;  
// Setting value "1" on the key "foo" in the target object

handler.apply , Proxy 也為作為目標(biāo)對(duì)象的函數(shù)提供了監(jiān)聽(tīng)其調(diào)用行為的屬性。

const sum = function(...args) {
  return args
    .map(Number)
    .filter(Boolean)
    .reduce((a, b) => a + b);

}

const p = new Proxy(sum, {
  apply(target, thisArg, args) {
    console.log(`Function is being called with arguments [${args.join()}] and context ${thisArg}`);
    return target.call(thisArg, ...args);
  }
})

console.log(p(1, 2, 3));
// Function is being called with arguments [1,2,3] and context undefined
// 6

??handler.construct, Proxy 也可以將類(lèi)作為目標(biāo)監(jiān)聽(tīng)對(duì)象，并監(jiān)聽(tīng)其通過(guò) new 語(yǔ)句來(lái)生產(chǎn)新實(shí)例的行為，這同樣可以使用再作為構(gòu)造器的構(gòu)造函數(shù)上。

class Foo{};

const p = new Proxy(Foo, {
    construct(target, args, newTarget){
        return {arguments: args}    // 這里返回的結(jié)果會(huì)是 new 所得到的實(shí)例
    }
});

const obj = new p(1, 2, 3);
console.log(obj.arguments);  // [1, 2, 3]

用法：Proxy.revocable(target, handler) : (proxy, revoke)。

const obj = {foo: 10};
const revocable = Proxy.revocable(obj, {
    get(target, prop){
        return 20;
    }
})
const proxy = revocable.proxy;
console.log(proxy.foo); // 20
revocable.revoke();
console.log(proxy.foo); 
// TypeError: Cannot perform "get" on a proxy that has been revoked

??Proxy.revocable(target, handler) 會(huì)返回一個(gè)帶有兩個(gè)屬性的對(duì)象，其中一個(gè) proxy 便是該函數(shù)所生成的可解除 Proxy 對(duì)象，而另一個(gè) revoke 則是將剛才的 Proxy 對(duì)象解除的解除方法。