何為元編程？
「編寫能改變語言語法特性或者運行時特性的程序」。換言之，一種語言本來做不到的事情，通過你編程來修改它，使得它可以做到了，這就是元編程。
meta-programming元編程中的 元 的概念可以理解為 程序 本身。”元編程能讓你擁有可以擴展程序自身能力
舉個例子：
|
1
2
3
|
if (a == 1 && a == 2 && a == 3) { console.log("done");} |
怎樣才能讓這個條件滿足，輸出done。按照正常的邏輯是無法完成的，畢竟一個值不可能同時滿足等于1、2、3
這是就可以用到元編程來改變這個不可能
|
1
2
3
4
5
6
7
8
|
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
let obj = { [Symbol.toPrimitive](hint) { switch (hint) { case "number": return 123; case "string": return "str"; case "default": return "default"; } }}console.log(1-obj); // -122console.log(1+obj); // 1defaultconsole.log(`${obj}`); // str |
還有哪些元編程？
proxy
es5的Object.defineProperty()方法的es6升級版,用于自定義的對象的行為
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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);// 37proxy.age = "hi";// Error: 年齡得是數字 |
reflect-metadata
你可以通過裝飾器來給類添加一些自定義的信息。然后通過反射將這些信息提取出來。當然你也可以通過反射來添加這些信息
|
1
2
3
4
5
6
7
8
9
10
11
|
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] 相同
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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]); // 3console.log(array[-2]); // 2 |
數據劫持
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
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 |
到此這篇關于淺談es6中的元編程的文章就介紹到這了,更多相關es6 元編程內容請搜索服務器之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持服務器之家！
原文鏈接：https://juejin.cn/post/6900838297996787725
