JavaScript—ES6 元編程（5）

幾年前 ES6 剛出來的時候接觸過 元編程（Metaprogramming）的概念，不過當時還沒有深究。在應用和學習中不斷接觸到這概念，比如 mobx 5 中就用到了 Proxy 重寫了 Observable 對象，覺得有必要梳理總結一下。

本文並非是一篇傳統意義上的教程，總結的是自己學習 ES6 元編程相關知識（Symbols & Proxy & Reflect）的理解、教程文檔 和 代碼片段。

1、理解元編程
Symbol、Reflect 和 Proxy 是屬於 ES6 元編程範疇的，能“介入”的對象底層操作進行的過程中，並加以影響。元編程中的 元 的概念可以理解爲 程序 本身。

”元編程能讓你擁有可以擴展程序自身能力“。這句話還是很抽象，初學者該怎麼理解呢？

我也理解了半天，想到了下面的例子：

就好比你原本是公司的部門的大主管，雖然你能力很強，但也必須按照規章制度做事，比如早上 8 點必須到公司，否則你就要扣績效；而後來公司基本規定靈活了，每個部門可以自己制定打卡制度，此時身爲主管的你，依據公司該基本規定，制定自己部門的考勤制度，本部門的職工可以 9 點來公司，還可以不打卡！（當然還可以制定其他規定）

在這個例子中：

”整個公司“就相當於 JS 引擎
”公司的基本規章制度“就相當於 JS 運行機制和語法，員工辦事最低要求就是遵照公司的規章制度
”在此基礎上，你擁有管理部門的權力，負責開發並維護一些產品“，這種行爲就相當於平時普通的編程；
公司的基本規定變靈活之後，你除了擁有以前管理員工的權力之外，”還擁有更改制度（針對該部門）的能力，這樣就可以從制度層面影響員工的最低要求行爲“，這裏更改規章制度就相當於 元編程 了；
這裏的例子不一定準確，是我個人的理解，權做參考，也可以去看看知乎上 怎麼理解元編程？ 的問答。

藉助這個例子理解元編程，我們能感知在沒有元編程能力的時候，就算你編程能力很厲害，但終究“孫悟空翻不出五指山”；而掌握了元編程能力之後，就差上天了，“給你一個支點，你就能撬動地球”，能力大大擴增。

簡言之，元編程讓你具備一定程度上改變現有的程序規則層面的能力。或者說，元編程可以讓你以某種形式去影響或更改程序運行所依賴的基礎功能，以此獲得一些維護性、效率上的好處。

Javascript 中，eval、new Function()便是兩個可以用來進行元編程的特性。不過因爲性能和可維護的角度上，這兩個特性還是不要用爲妙。

在 ES6 之後，標準引入了 Proxy & Reflect & Symbols，從而提供比較完善的元編程能力。

2、學習 ES6 元編程的資源
我原本也想仔細講講 ES6 中 Symbol、Proxy 和 Reflect 的基本概念和使用的，但網上這方面的文章不要太多，覺得重複碼字也沒有太必要。這裏着重推薦幾篇，分爲教程類和手冊類，通讀完之後應該就掌握差不多了。

元編程在 ES6 體現最爲突出的是 Proxy 的應用，目前我所找的文章也多偏向 Proxy。

原理教程類：

深入淺出ES6（十二）：代理 Proxies：ES6 深入淺出系列，個人推薦認真讀完該文章。本文的作者實現了 ES6 的 Reflect 特性，所以他對 ES6 這兩個特性理解是最爲深刻的，他的文章自然要深度閱讀。
ES6 Proxies in Depth：和其他教程相比，該文章篇幅稍微短一些，能較爲快速得掌握概念和一些實際應用。
Metaprogramming with proxies：來自 《Exploring ES6》書籍摘選，基礎入門。
Chapter 7: Meta Programming：經典的 《You Don't Know JS》系列文章，深入淺出，文章夠長，需要一些耐心。
Metaprogramming in ES6: Symbols and why they're awesome：本篇就是基於 Symbols、Reflect、Proxy 等實現元編程的教程系列教程，內容也足夠詳實。
ES6學習筆記： 代理和反射：非常詳實地整理了 Proxy 和 Reflect 相關的知識點，只是閱讀起來略微枯燥。
應用教程類：

ES6 Features - 10 Use Cases for Proxy：收集了 10 個 proxy 的具體應用場景，具體的代碼放在 jsProxy 倉庫中
從ES6重新認識JavaScript設計模式(五): 代理模式和Proxy：本文從設計模式上去理解 Proxy 的應用
使用 Javascript 原生的 Proxy 優化應用 ：文章涉及到 Proxy 的基本用法、如何使用 Proxy 創建代理模式，以及如何對應用進行優化。
手冊類：

MDN - Proxy：MDN 上的 Proxy 官方文檔
MDN - Reflect：MDN 上的 Reflect 官方文檔
MDN - 元編程：MDN 官方文檔教程，介紹了元編程的概念，應該算是比較抽象的，當手冊翻翻不錯；
ECMAScript 6 入門 - Proxy：阮一峯翻譯的 《ECMAScript 6 入門》 教程
ES6 自定義JavaScript語言行爲的 Proxy 對象：算是簡明版的中文版的 API 手冊
在沒充分理解元編程之前翻手冊還是挺枯燥的，建議平時使用的時候再從這裏補漏
隨着時間的推移，上面收集的文章可能會顯得陳舊，又有可能出現新的好文章，推薦在搜索引擎中使用 js Metaprogramming 或者 es6 proxy 進行搜索相關文章；

3、代碼片段
下面摘抄一些代碼片段，方便自己後續在應用 JS 元編程的時候快速 "借鑑"。你們如果也有覺得不錯的代碼片段，歡迎在 issue 中回覆，我將不定期更新到這兒。

目錄
Schema 校驗
自動填充對象
進制轉換
緩存代理
實現私有屬性
函數節流
圖片懶加載
監聽屬性更改
實現單例模式
Python 那樣截取數組

Schema 校驗 ↑
示例來自 ES6 Proxies in Depth
場景：person 是一個普通對象，包含一個 age 屬性，當我們給它賦值的時候確保是大於零的數值，否則賦值失敗並拋出異常。

var person = { age: 27 };

思路：通過設置 set trap，其中包含了對 age 字段的校驗邏輯。

代碼：

var validator = {
  set (target, key, value) {
    if (key === 'age') {
      if (typeof value !== 'number' || Number.isNaN(value)) {
        throw new TypeError('Age must be a number')
      }
      if (value <= 0) {
        throw new TypeError('Age must be a positive number')
      }
    }
    return true
  }
}
var proxy = new Proxy(person, validator)
proxy.age = 'foo'
// <- TypeError: Age must be a number
proxy.age = NaN
// <- TypeError: Age must be a number
proxy.age = 0
// <- TypeError: Age must be a positive number
proxy.age = 28
console.log(person.age)
// <- 28

自動填充對象 ↑

場景：創建一個Tree()函數來實現以下特性，當我們需要時，所有中間對象 branch1、branch2 和 branch3 都可以自動創建。

var tree = Tree();
tree
//    { }
tree.branch1.branch2.twig = "green";
// { branch1: { branch2: { twig: "green" } } }

tree.branch1.branch3.twig = "yellow";

// { branch1: { branch2: { twig: "green" },
//                 branch3: { twig: "yellow" }}}

思路：Tree 返回的就是一個 proxy 實例，通過 get trap ，當不存在屬性的時候自動創建一個子樹。

代碼：

  function Tree() {
    return new Proxy({}, handler);
  }
  var handler = {
    get: function (target, key, receiver) {
      if (!(key in target)) {
        target[key] = Tree();  // 自動創建一個子樹
      }
      return Reflect.get(target, key, receiver);
    }
  };

進制轉換 ↑
場景：比如將 2 進制轉換成 16 進制或者 8 進制，反之也能轉換。

思路：由於大部分的功能是相同的，我們通過函數名字將變量提取出來，然後通過 get trap 完成進制轉換。

代碼：

const baseConvertor = new Proxy({}, {
  get: function baseConvert(object, methodName) {
    var methodParts = methodName.match(/base(\d+)toBase(\d+)/);
    var fromBase = methodParts && methodParts[1];
    var toBase = methodParts && methodParts[2];
    if (!methodParts || fromBase > 36 || toBase > 36 || fromBase < 2 || toBase < 2) {
      throw new Error('TypeError: baseConvertor' + methodName + ' is not a function');
    }
    return function (fromString) {
      return parseInt(fromString, fromBase).toString(toBase);
    }
  }
});

baseConvertor.base16toBase2('deadbeef') === '11011110101011011011111011101111';
baseConvertor.base2toBase16('11011110101011011011111011101111') === 'deadbeef';

緩存代理 ↑

場景：以沒有經過任何優化的計算斐波那契數列的函數來假設爲開銷很大的方法，這種遞歸調用在計算 40 以上的斐波那契項時就能明顯的感到延遲感。希望通過緩存來改善。

const getFib = (number) => {
  if (number <= 2) {
    return 1;
  } else {
    return getFib(number - 1) + getFib(number - 2);
  }
}

注：這只是演示緩存的寫法，遞歸調用本身就有問題，容易導致內存泄露，在實際應用中需要改寫上述的 getFib 函數。

思路：因爲是函數調用，所以需使用 apply trap，利用 Map 或者普通對象存儲每次計算的結果，在執行運算前先去 Map 查詢計算值是否被緩存。（相當於以空間換時間，獲得性能提升）

代碼：

const getCacheProxy = (fn, cache = new Map()) => {
  return new Proxy(fn, {
    apply(target, context, args) {
      const argsString = args.join(' ');
      if (cache.has(argsString)) {
        // 如果有緩存,直接返回緩存數據
        console.log(`輸出${args}的緩存結果: ${cache.get(argsString)}`);
        
        return cache.get(argsString);
      }
      const result = Reflect.apply(target, undefined, args);
      cache.set(argsString, result);

      return result;
    }
  })
}

const getFibProxy = getCacheProxy(getFib);
getFibProxy(40); // 102334155
getFibProxy(40); // 輸出40的緩存結果: 102334155

在實際應用中數據量越大、計算過程越複雜，優化效果越好，否則有可能會得不償失。

實現私有屬性 ↑
場景：衆所周知，JavaScript是沒有私有屬性這一個概念的，私有屬性一般是以 下劃線開頭，請通過 Proxy 限制以 開頭的屬性的訪問。

const myObj = {
  public: 'hello',
  _private: 'secret',
  method: function () {
    console.log(this._private);
  }
},

思路：看上去比較簡單，貌似使用 get、set 這兩個 trap 就可以，但實際上並不是。實際上還需要實現 has, ownKeys , getOwnPropertyDescriptor 這些 trap，這樣就能最大限度的限制私有屬性的訪問。

代碼：

function getPrivateProps(obj, filterFunc) {
  return new Proxy(obj, {
    get(obj, prop) {
      if (!filterFunc(prop)) {
        let value = Reflect.get(obj, prop);
        // 如果是方法, 將this指向修改原對象
        if (typeof value === 'function') {
          value = value.bind(obj);
        }
        return value;
      }
    },
    set(obj, prop, value) {
      if (filterFunc(prop)) {
        throw new TypeError(`Can't set property "${prop}"`);
      }
      return Reflect.set(obj, prop, value);
    },
    has(obj, prop) {
      return filterFunc(prop) ? false : Reflect.has(obj, prop);
    },
    ownKeys(obj) {
      return Reflect.ownKeys(obj).filter(prop => !filterFunc(prop));
    },
    getOwnPropertyDescriptor(obj, prop) {
      return filterFunc(prop) ? undefined : Reflect.getOwnPropertyDescriptor(obj, prop);
    }
  });
}

function propFilter(prop) {
  return prop.indexOf('_') === 0;
}

myProxy = getPrivateProps(myObj, propFilter);

console.log(JSON.stringify(myProxy)); // {"public":"hello"}
console.log(myProxy._private); // undefined
console.log('_private' in myProxy); // false
console.log(Object.keys(myProxy)); // ["public", "method"]
for (let prop in myProxy) { console.log(prop); }    // public  method
myProxy._private = 1; // Uncaught TypeError: Can't set property "_private"

注意：其中在 get 方法的內部，我們有個判斷，如果訪問的是對象方法使將 this 指向被代理對象，這是在使用 Proxy 需要十分注意的，如果不這麼做方法內部的 this 會指向 Proxy 代理。

一般來講， set trap 都會默認觸發 getOwnPropertyDescriptor 和 defineProperty

函數節流 ↑

場景：控制函數調用的頻率.

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

思路：涉及到函數的調用，所以使用 apply trap 即可。

代碼：

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

同樣需要注意使用 bind 綁定上下文，不過這裏的示例使用了箭頭函數，不用 bind 也沒啥問題。

圖片懶加載 ↑

場景：爲了更好的用戶體驗，在加載圖片的時候，使用 loading 佔位圖，等真正圖片加載完畢之後再顯示出來。原始的寫法如下：

const img = new Image();
img.src = '/some/big/size/image.jpg';
document.body.appendChild(img);

思路：加載圖片的時候，會讀取 img.src 屬性，我們使用 constructor trap 控制在創建的時候默認使用 loading 圖，等加載完畢再將真實地址賦給 img;

代碼：

 const IMG_LOAD = 'https://img.alicdn.com/tfs/TB11rDdclLoK1RjSZFuXXXn0XXa-300-300.png';

  const imageProxy = (loadingImg) => {
      return new Proxy(Image, {
          construct(target, args){
              const instance = Reflect.construct(target, args);
              instance.src = loadingImg;
              return instance;
          }
      });
  };

  const ImageProxy = imageProxy(IMG_LOAD);

  const createImageProxy = (realImg) =>{
      const img = new ImageProxy();
      const virtualImg = new Image();
      virtualImg.src = realImg;
      virtualImg.onload = () => {
          hasLoaded = true;
          img.src = realImg;
      };
      return img;
  }
  var img = createImageProxy('https://cdn.dribbble.com/users/329207/screenshots/5289734/bemocs_db_dribbble_03_gold_leaf.jpg');
  document.body.appendChild(img);

監聽屬性更改 ↑

場景：當普通對象屬性更改後，觸發所綁定的 onChange 回調；

思路：能更改屬性的有 set 和 deleteProperty 這兩個 trap，在其中調用 onChange 方法即可

function trackChange(obj, onChange) {
    const handler = {
        set (obj, prop, value) {
            const oldVal = obj[prop];
            Reflect.set(obj, prop, value);
            onChange(obj, prop, oldVal, value);
        },
        deleteProperty (obj, prop) {
            const oldVal = obj[prop];
            Reflect.deleteProperty(obj, prop);
            onChange(obj, prop, oldVal, undefined);
        }
    };
    return new Proxy(obj, handler);
}

// 應用在對象上
let myObj = trackChange({a: 1, b: 2}, function (obj, prop, oldVal, newVal) {
    console.log(`myObj.${prop} changed from ${oldVal} to ${newVal}`);
});

myObj.a = 5;     // myObj.a changed from 1 to 5
delete myObj.b;  // myObj.b changed from 2 to undefined
myObj.c = 6;     // myObj.c changed from undefined to 6

// 應用在數組上
let myArr = trackChange([1,2,3], function (obj, prop, oldVal, newVal) {
    let propFormat = isNaN(parseInt(prop)) ? `.${prop}` : `[${prop}]`,
        arraySum = myArr.reduce((a,b) => a + b);
    console.log(`myArr${propFormat} changed from ${oldVal} to ${newVal}`);
    console.log(`  sum [${myArr}] = ${arraySum}`);
});

myArr[0] = 4;      // myArr[0] changed from 1 to 4         
                   //   sum [4,2,3] = 9
delete myArr[2];   // myArr[2] changed from 3 to undefined                
                   //   sum [4,2,] = 6
myArr.length = 1;  // myArr.length changed from 3 to 1                
                   //   sum [4] = 4

實現單例模式 ↑

場景：實現單例設計模式；

思路：和創建有關的，是 construct 這個 trap，每次我們返回相同的實例即可。

代碼：

// 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 是相同的實例。

像 Python 那樣截取數組 ↑

場景：在 python 中，你可以使用 list[10:20:3] 來獲取 10 到 20 索性中每隔 3 個的元素組成的數組（也支持負數索引）。

思路：由於在 JS 中，數組方括號語法中不支持冒號，只能曲線救國，使用這樣 list["10:20:3"] 的形式。只需要實現 get trap 即可。

// Python-like array slicing

function pythonIndex(array) {

    function parse(value, defaultValue, resolveNegative) {
        if (value === undefined || isNaN(value)) {
            value = defaultValue;
        } else if (resolveNegative && value < 0) {
            value += array.length;
        }
        return value;
    }
    
    function slice(prop) {
        if (typeof prop === 'string' && prop.match(/^[+-\d:]+$/)) {
            // no ':', return a single item
            if (prop.indexOf(':') === -1) {
                let index = parse(parseInt(prop, 10), 0, true);
                console.log(prop, '\t\t', array[index]);
                return array[index];
            }                
            // otherwise: parse the slice string
            let [start, end, step] = prop.split(':').map(part => parseInt(part, 10));
            step = parse(step, 1, false);
            if (step === 0) {
                throw new RangeError('Step can\'t be zero');
            }
            if (step > 0) {
                start = parse(start, 0, true);
                end = parse(end, array.length, true);
            } else {
                start = parse(start, array.length - 1, true);
                end = parse(end, -1, true);
            }
            // slicing
            let result = [];
            for (let i = start; start <= end ? i < end : i > end; i += step) {
                result.push(array[i]);
            }
            console.log(prop, '\t', JSON.stringify(result));
            return result;
        }
    }

    const handler = {
        get (arr, prop) {
            return slice(prop) || Reflect.get(array, prop);
        }
    };
    return new Proxy(array, handler);
}


// try it out
let values = [0,1,2,3,4,5,6,7,8,9],
    pyValues = pythonIndex(values);

console.log(JSON.stringify(values));

pyValues['-1'];      // 9
pyValues['0:3'];     // [0,1,2]    
pyValues['8:5:-1'];  // [8,7,6]
pyValues['-8::-1'];  // [2,1,0]
pyValues['::-1'];    // [9,8,7,6,5,4,3,2,1,0]
pyValues['4::2'];    // [4,6,8]

// 不影響正常的索引
pyValues[3];         // 3

這裏推薦一下我的前端學習交流羣：731771211，裏面都是學習前端的，如果你想製作酷炫的網頁，想學習知識。歡迎新手，進階的朋友。進羣就送最新的web前端學習資料和0基礎入門教程，歡迎初學和進階中的小夥伴。