ES6之Proxy & Reflection API

Proxy & Reflect

extends的出現，使用內建對象的繼承得以實現。Proxy能夠攔截JS引擎內部目標的底層對象操做，這些底層操做被攔截後會觸發響應特定操做的陷阱函數（traps)，對於別人封裝好的對象或內建對象，均可以自定義操做。
而反射（Reflect）API是以Reflect對象的形式出現的。API中的默認特徵與相同的底層操做是一致的，而經過代理能夠重寫這些操做，每一個代理Trap，對應一個命名和參數值都相同的Reflect方法。
Reflect 中全部方法及說明--MDN

const target = {};
const proxy = new Proxy(target, {});
proxy.title = 'proxy';
console.log(proxy.title);
console.log(target.title);

target.title = 'target';
console.log(target.title);
console.log(proxy.title);

很是簡單的Proxy，沒有實現任何自定義的Trap 方法，都是默認實現。

GET Trap

let handler = {
    get: function(target, name){
        return name in target ? target[name] : 37;
    }
};

let p = new Proxy({}, handler);

p.a = 1;
p.b = undefined;

console.log(p.a, p.b);    // 1, undefined

console.log('c' in p, p.c);    // false, 37

來自於MDN的一個小例子，語法極其簡單。get trap function 有3個參數：

• TrapTarget 被讀取屬性的原對象，即代理的目標。
• key 要讀取的屬性（字符串或Symbol）
• receiver 發生操做的對象，一般爲代理。

而get trap 能作什麼用呢？或者說，咱們在何時使用get呢？一個最主要的功能，驗證對象結構。

對象結構：對象中全部可用的屬性和方法集合。JS引擎經過對象結構來優化代碼，一般會建立類來表示對象。

let proxy = new Proxy({}, {
    get(target, key, receiver) {
        if (!(key in receiver )) {
            throw new TypeError(`屬性 ${key} 不存在`);
        }

        return Reflect.get(target, key, receiver);
    }
});

proxy.name = 'proxy';
console.log(proxy.name);  // proxy

console.log(proxy.age);  // 拋出 TypeError 異常

SET Trap

get是取值操做，而set就是賦值操做，能夠對屬性值進行驗證。

let target = {
    name: 'target'
}

let proxy = new Proxy(target, {
    set(target, key, value, receiver) {
        if (!(key in receiver )) {
            if (isNaN(value)) {
                throw new TypeError('屬性必須爲數字');
            }
        }

        return Reflect.set(target, key, value, receiver);
    }
});

proxy.count = 10;
console.log(proxy.count);  // 10
console.log(proxy.count);  // 10

proxy.name = 'tom';
console.log(proxy.name);  // tom
console.log(target.name);  // tom

proxy.secondName = "Lee"; // 拋出 TypeError 異常

Has Trap

has trap function 接受兩個參數

• TrapTarget 被讀取屬性的原對象，即代理的目標。
• key 要讀取的屬性（字符串或Symbol）

能夠用來隱藏已有屬性。

// has trap
let target = {
    name: 'target',
    age: 24
}

let proxy = new Proxy(target, {
    has(target, key) {
        if (key === 'age'){
            return false;
        } else {
            return Reflect.has(target, key);
        }
    }
});

console.log('age' in proxy);  // false
console.log('age' in target);  // true
console.log('name' in proxy);  // true
console.log('name' in target);  // true

deleteProperty Trap

delete操做能夠從對象中移除屬性，若是成功則返回true, 失敗返回 false 。在嚴格模式下，刪除一個不可配置屬性，則會拋出錯誤，而在非嚴格模式下，只是返回false.

let target = {
    name: 'target',
    age: 24
}

let proxy = new Proxy(target, {
    deleteProperty(target, key) {
        if (key === 'age'){
            return false;
        } else {
            return Reflect.deleteProperty(target, key);
        }
    }
});

console.log( 'age' in proxy);

const r1 = delete proxy.age;

console.log(r1);

console.log( 'name' in proxy);

const r2 = delete proxy.name;

console.log(r2);

原型 Trap

這個要了解一點：Object.get/setPrototypeOf 與 Reflect.get/setPrototypeOf 的區別。
從功能上來說，兩個操做是一致的。但從實現上來說，Object.get/setPrototypeOf 是高級方法，建立伊始就給開發者使用，而Reflect.get/setPrototypeOf 是更底層的操做，使開發者能夠訪問以前只在內部操做的[[Get/SetPrototypeOf]]。
面對兩套方法選擇時，可能會讓人無所適從，不知道選哪一個更好。有一點能夠確認的是，Object提供的方法更高級，是對Reflect方法的包裹器，最終仍是會調用Reflect方法，但在此以前，會執行一些額外的步驟，並經過檢查返回值，來肯定下一步怎麼操做。

可擴展 Trap

對象可擴展，Object.isExtensible和Object.preventExtesions 方法，在ES5下已經實現，而ES6中經過 Reflect.isExtensible和Reflect.preventExtensions來實現。

var p = new Proxy({}, {
  isExtensible: function(target) {
    console.log('called');
    return true;//也能夠return 1;等表示爲true的值
  }
});

console.log(Object.isExtensible(p)); // "called"
                                     // true
var p = new Proxy({}, {
  preventExtensions: function(target) {
    console.log('called');
    Object.preventExtensions(target);
    return true;
  }
});

console.log(Object.preventExtensions(p)); // "called"
                                          // false

屬性描述符

在代理中能夠分別使用defineProperty陷阱和getOwnPropertyDescriptor陷阱攔截Object.defineProperty方法和Object.getOwnPropertyDescriptor方法的調用。

defineProperty
Object.defineProperty與Reflect.defineProperty方法返回值不一樣，前一個返回第一個參數，後一方法，則返回操做的結果是否成功。

let target = {};
let r1 = Object.defineProperty(target, 'name', { value: 'target' });
console.log(r1 === target);  // true

let r2 = Reflect.defineProperty(target, 'name', { value: 'target'});

console.log(r2);  // true

getOwnPropertyDescriptor
Object.getOwnPropertyDescriptor 若是原始值被傳入第一個參數，內部將會對這個值進行強制轉換，轉成Object對象，而Reflect.getOwnPropertyDescriptor方法，則會報出一個錯誤。

ownKeys

這個trap能夠攔截內部[[OwnPropertyKeys]]方法，經過返回數組的值能夠覆寫其行爲。返回的數組被用於Object.keys(),Object.getOwnPropertyNames(),Object.getOwnPropertySymbols()和Object.assign()。

let proxy = new Proxy({}, {
    ownKeys(target) {
        return Reflect.ownKeys(target).filter(key => {
            // console.log(key);
            // return true; // 能夠和下面的返回作個對比，看看輸出有什麼不一樣
            return typeof key !== 'string' || key[0] !== '_';
        })
    }
});

let nameSymbol = Symbol('name');

proxy.name = 'Tom';
proxy._name = 'Jerry';
proxy[nameSymbol] = 'Tom & Jerry';

const names = Object.getOwnPropertyNames(proxy),
      keys = Object.keys(proxy),
      symbols = Object.getOwnPropertySymbols(proxy);

console.log(names.length);
console.log(names);
console.log(keys.length);
console.log(keys);
console.log(symbols.length);
console.log(symbols);

apply & construct

MDN apply
MDN construct
這兩個代理的目標，都是函數。

const target = function() {
    return 42;
}
const proxy = new Proxy(target, {
    apply: function(tt, ta, args) {
        return Reflect.apply(tt, ta, args);
    },
    constructor(tt, ta, args) {
      return Reflect.constructor(tt, ta, args);
    }
});

console.log(typeof proxy);
console.log(proxy());
const instance = new proxy();
console.log(instance instanceof proxy);
console.log(instance instanceof target);

因此，這兩個trap，一般能夠用來

• 驗證函數參數
• 不用 new 調用構造函數
• 覆寫抽象基類構造函數
• 可調用類構造函數

例子就不一一寫了，知道用法，很方便就能實現。

可撤銷代理

方法 Proxy.revocable() 建立一個可撤銷的 Proxy 對象.
MDN revocable

var revocable = Proxy.revocable({}, {
  get: function(target, name) {
    return "[[" + name + "]]";
  }
});
var proxy = revocable.proxy;
console.log(proxy.foo); // "[[foo]]"

revocable.revoke();

console.log(proxy.foo); // TypeError is thrown
proxy.foo = 1           // TypeError again
delete proxy.foo;       // still TypeError
typeof proxy            // "object", typeof doesn't trigger any trap

在原型上進行Proxy應用

若是把代理當原型，將發生什麼事呢？在JS中，一旦涉及到原型，事情每每就沒那麼簡單了。若是原型是代理，而代理是透明的，僅當默認操做執行到原型上時，都會調用代理trap，這大大限制代理的能力。

const target = {};
 const newTarget = Object.create(new Proxy(target, {
     defineProperty(trapTarget, name, desc) {
         return false;
     }
 }));

 // 按原型執行順序，這個方法能夠被調用到嗎？

 Object.defineProperty(newTarget, 'name', { value: 'newTarget' });
 console.log(newTarget.name);
 console.log(newTarget.hasOwnProperty('name'));
 // 能夠看出，defineProperty方法，沒有獲得調用

在Object.create中，能夠用如下幾個trap

• get
• set
• has

將代理用途類的原型

先看一個例子

function NoSuchProperty() {}

NoSuchProperty.prototype = new Proxy({}, {
    get(tt, key, receiver) {
        throw new ReferenceError(`${key} doesn't exist `);
    }
});

class Square extends NoSuchProperty {
    constructor(length, width) {
      super();
      this.length = length;
      this.width = width;
    }
}

let shape = new Square(2, 6);
const a1 = shape.length * shape.width;
console.log(a1); // 12

let a2 = shape.length * shape.wdth; // 拋出異常

說明：wdth是個拼寫錯誤，但按JS原型機制，shape中沒有時，會去原型中查找，因此就會拋出異常。雖然代理不是shape的直接原型，存在於shape對象的原型鏈中。