前言

ES6已經出來好久了，但是工作中比較常用的只有let const宣告，通過箭頭函式改this指向，使用promise + async 解決非同步程式設計，還有些資料型別方法...所以單獨寫一篇文章學習ES6中的proxy 和 reflect。本文屬於學習筆記，可能會有錯誤的理解，歡迎交流指正。

基本概念

什麼是超程式設計？這是我在網上搜到的一句話。大家可以參考理解。我的簡單理解就是》改原始碼底層的東西，對原本的功能進行了更改。

能“介入”的物件底層操作進行的過程中，並加以影響。超程式設計中的 元 的概念可以理解為 程式 本身。”超程式設計能讓你擁有可以擴充套件程式自身能力“。 ----

https://www.zhihu.com/question/23856985 知乎問答參考

Reflect： 用於替代直接呼叫Object的方法，它並不是一個函式物件，沒有constructor，所有不要使用new操作符。

Proxy： 用於自定義的物件的行為，比如修改set和get，感覺是es5的Object.defineProperty()方法的es6升級版。

一些資料連結：

MDN-Reflect:MDN 上的 Reflect 官方文件

MDN-Proxy: MDN 上的 Proxy 官方文件

MDN-超程式設計:MDN 官方文件教程，介紹了超程式設計的概念

ECMAScript 6 入門 ：阮老師的es6入門，對es6還沒入門的同學可以全文閱讀一番

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 - 因為 t1、t2 是不同的例項

// 使用 Proxy 來 trap 建構函式, 完成單例模式
const TestSingleton = makeSingleton(Test),
    s1 = new TestSingleton(),
    s2 = new TestSingleton();
s1.value = 123;
console.log('Singleton:', s2.value);  // 123 - 現在 s1、s2 是相同的例項。

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

後記

不得不說實踐出真知啊，行文至此，參考了mdn，網上也搜了很多相關資料，案例借鑑，自己對Proxy的理解也上了一個層次，最近本想深入canvas，但感覺不做圖形方面的工作的話，真的難以應用。下篇文章先預定寫全棧應用或者 vue原始碼方面的。

最近想深入一下計算機原理，請大佬推薦一些計算機原理方面的書籍，當然不限於計算機，前端方面也可以。紅寶書，精粹，dom程式設計藝術，js忍者祕籍，你不知道的js，css揭祕，node實戰這些已經看過了，就不要重複推薦了，這些都是我看過覺得不錯的書。本人零基礎，大學自學的一點前端知識，感覺需要擴充套件一下。