ES6中的元編程-Proxy & Reflect

時間 2019-11-12

標籤 es6 編程 proxy reflect 欄目 JavaScript 简体版

原文原文鏈接

前言

ES6已經出來很久了，可是工做中比較經常使用的只有let const聲明，經過箭頭函數改this指向，使用promise + async 解決異步編程，還有些數據類型方法...因此單獨寫一篇文章學習ES6中的proxy 和 reflect。本文屬於學習筆記，可能會有錯誤的理解，歡迎交流指正。css

基本概念

什麼是元編程？這是我在網上搜到的一句話。你們能夠參考理解。個人簡單理解就是》改源碼底層的東西，對本來的功能進行了更改。前端

能「介入」的對象底層操做進行的過程當中，並加以影響。元編程中的元的概念能夠理解爲程序自己。」元編程能讓你擁有能夠擴展程序自身能力「。 ---- https://www.zhihu.com/question/23856985 知乎問答參考vue

Reflect：用於替代直接調用Object的方法，它並非一個函數對象，沒有constructor，全部不要使用new操做符。node

Proxy：用於自定義的對象的行爲，好比修改set和get，感受是es5的Object.defineProperty()方法的es6升級版。es6

一些資料連接：編程

MDN-Reflect:MDN 上的 Reflect 官方文檔canvas

MDN-Proxy: MDN 上的 Proxy 官方文檔promise

MDN-元編程:MDN 官方文檔教程，介紹了元編程的概念app

ECMAScript 6 入門：阮老師的es6入門，對es6還沒入門的同窗能夠全文閱讀一番dom

Reflect & Proxy的聯繫：二者擁有徹底一致的API方法，具體可參考mdn，Reflect通常在Proxy中須要處理默認行爲時使用。

編程案例

俗話說的好，理論只是紙上談兵，仍是實踐中學習這些元編程方法。

數據劫持，驗證操做

let handler = {
    get: function(target, key){
        return key in target ? target[key] : 37;
    },
   set: function(target, key, value) {
    if (key === 'age') {
      if (!Number.isInteger(value)) {
        throw new TypeError('The age is not an integer');
      }
      if (value > 200) {
        throw new RangeError('The age seems invalid');
      }
    }

    // The default behavior to store the value
    target[key] = value;
  }
};
let p = new Proxy({}, handler);
p.a = 1;
p.b = undefined;
person.age = 100;

console.log(person.age); 
// 100

person.age = 'young'; 
// 拋出異常: Uncaught TypeError: The age is not an integer

person.age = 300; 
// 拋出異常: Uncaught RangeError: The age seems invalid
console.log(p.a, p.b);    // 1, undefined

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

這是一個很是典型的案例，使用vue的同窗都知道vue是經過數據劫持的方法來完成數據綁定的，經過proxy代理對象的set，get方法一樣能夠完成數據劫持的目的，

函數節流

const createThrottleProxy = (fn, rate) => {
  let lastClick = Date.now() - rate;
  return new Proxy(fn, {
    apply(target, context, args) {
      if (Date.now() - lastClick >= rate) {
        fn.bind(target)(args);
        lastClick = Date.now();
      }
    }
  });
};

const handler = () => console.log('Do something...');
const handlerProxy = createThrottleProxy(handler, 1000);
document.addEventListener('scroll', handlerProxy);

該實例經過proxy的handler.apply()攔截了函數調用，當只有時間超過1s時候函數纔會再次被調用

單例模式

// makes a singleton proxy for a constructor function
function makeSingleton(func) {
    let instance,
        handler = {
            construct: function (target, args) {
                if (!instance) {
                    instance = new func();
                }
                return instance;
            }
        };
    return new Proxy(func, handler);
}


// 以這個爲 constructor 爲例
function Test() {
    this.value = 0;
}

// 普通建立實例
const t1 = new Test(),
    t2 = new Test();
t1.value = 123;
console.log('Normal:', t2.value);  // 0 - 由於 t一、t2 是不一樣的實例

// 使用 Proxy 來 trap 構造函數, 完成單例模式
const TestSingleton = makeSingleton(Test),
    s1 = new TestSingleton(),
    s2 = new TestSingleton();
s1.value = 123;
console.log('Singleton:', s2.value);  // 123 - 如今 s一、s2 是相同的實例。

經過proxy的construct方法攔截，讓不一樣的實例指向了相同的constructer，達到單例模式的目的。