es6中的元編程

何爲元編程？

「編寫能改變語言語法特性或者運行時特性的程序」。換言之，一種語言原本作不到的事情，經過你編程來修改它，使得它能夠作到了，這就是元編程。

meta-programming元編程中的 元 的概念能夠理解爲 程序 自己。」元編程能讓你擁有能夠擴展程序自身能力

舉個例子：

if (a == 1 && a == 2 && a == 3) {
    console.log("done");
}

怎樣才能讓這個條件知足，輸出done。按照正常的邏輯是沒法完成的，畢竟一個值不可能同時知足等於一、二、3

這是就能夠用到元編程來改變這個不可能

let a = {
    [Symbol.toPrimitive]: ((i) => () => ++i)(0)
}

if (a == 1 && a == 2 && a == 3) {
    console.log("done");
}
// done

Symbol.toPrimitive在對象轉換爲原始值的時候會被調用，初始值爲1，調用一次+1，就能夠知足a == 1 && a == 2 && a == 3，同時Symbol.toPrimitive也能夠接受一個參數hint，hint的取值爲number、string、default

let obj = {
    [Symbol.toPrimitive](hint) {
        switch (hint) {
            case "number":
                return 123;
            case "string":
                return "str";
            case "default":
                return "default";
        }
    }
}
console.log(1-obj); // -122
console.log(1+obj); // 1default
console.log(`${obj}`); // str

還有哪些元編程？

proxy

es5的Object.defineProperty()方法的es6升級版,用於自定義的對象的行爲

let leon = {
    age: 30
}
const validator = {
    get: function(target, key){
        // 若沒這個屬性返回37
        return key in target ? target[key] : 37;
    },
    set(target,key,value){
        if(typeof value!="number" || Number.isNaN(value)){
            throw new Error("年齡得是數字");
        }
    }
}
const proxy = new Proxy(leon,validator);
console.log(proxy.name);
// 37
proxy.age = "hi";
// Error: 年齡得是數字

reflect-metadata

你能夠經過裝飾器來給類添加一些自定義的信息。而後經過反射將這些信息提取出來。固然你也能夠經過反射來添加這些信息

require("reflect-metadata")
class C {
    // @Reflect.metadata(metadataKey, metadataValue)
    method() {
    }
}
Reflect.defineMetadata("name", "jix", C.prototype, "method");

let metadataValue = Reflect.getMetadata("name", C.prototype, "method");
console.log(metadataValue);
// jix

應用

拓展數組索引訪問

負索引訪問，使array[-N] 與 array[array.length - N] 相同

let array = [1, 2, 3];

array = new Proxy(array, {
  get(target, prop, receiver) {
    if (prop < 0) {
      console.log(prop, 'prop')
      prop = +prop + target.length;
    }
    return Reflect.get(target, prop, receiver);
  }
});


console.log(array[-1]); // 3
console.log(array[-2]); // 2

數據劫持

let handlers = Symbol('handlers');

function makeObservable(target) {
  // 初始化存儲 handler 的數組
  target[handlers] = [];

  // 存儲 handler 函數到數組中以便於將來調用
  target.observe = function(handler) {
    this[handlers].push(handler);
  };

  // 建立代理以處理更改
  return new Proxy(target, {
    set(target, property, value, receiver) {
      // 轉發寫入操做到目標對象
      let success = Reflect.set(...arguments);
      // 若是設置屬性的時候沒有報錯
      if (success) {
        // 調用全部 handler
        target[handlers].forEach(handler => handler(property, value));
      }
      return success;
    }
  });
}

let user = {};

user = makeObservable(user);

user.observe((key, value) => {
  console.log(`SET ${key}=${value}`);
});

user.name = "John";
// SET name=John