前言
ES6已經(jīng)出來好久了，但是工作中比較常用的只有l(wèi)et const聲明，通過箭頭函數(shù)改this指向，使用promise + async 解決異步編程剩岳，還有些數(shù)據(jù)類型方法...所以單獨寫一篇文章學(xué)習(xí)ES6中的proxy 和 reflect。本文屬于學(xué)習(xí)筆記入热，可能會有錯誤的理解拍棕，歡迎交流指正。
基本概念
什么是元編程勺良？這是我在網(wǎng)上搜到的一句話绰播。大家可以參考理解。我的簡單理解就是》改源碼底層的東西尚困，對原本的功能進(jìn)行了更改蠢箩。
能“介入”的對象底層操作進(jìn)行的過程中，并加以影響事甜。元編程中的 元 的概念可以理解為 程序 本身谬泌。”元編程能讓你擁有可以擴(kuò)展程序自身能力“逻谦。 ---- https://www.zhihu.com/question/23856985 知乎問答參考
Reflect： 用于替代直接調(diào)用Object的方法掌实，它并不是一個函數(shù)對象，沒有constructor邦马，所有不要使用new操作符贱鼻。
Proxy： 用于自定義的對象的行為，比如修改set和get勇婴，感覺是es5的Object.defineProperty()方法的es6升級版。
一些資料鏈接：
MDN-Reflect:MDN 上的 Reflect 官方文檔
MDN-Proxy: MDN 上的 Proxy 官方文檔
MDN-元編程:MDN 官方文檔教程嘱腥，介紹了元編程的概念
ECMAScript 6 入門 ：阮老師的es6入門耕渴，對es6還沒入門的同學(xué)可以全文閱讀一番
Reflect & Proxy的聯(lián)系：兩者擁有完全一致的API方法，具體可參考mdn齿兔，Reflect一般在Proxy中需要處理默認(rèn)行為時使用橱脸。
編程案例
俗話說的好，理論只是紙上談兵分苇，還是實踐中學(xué)習(xí)這些元編程方法添诉。
數(shù)據(jù)劫持，驗證操作
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的同學(xué)都知道vue是通過數(shù)據(jù)劫持的方法來完成數(shù)據(jù)綁定的栏赴，通過proxy代理對象的set，get方法同樣可以完成數(shù)據(jù)劫持的目的靖秩，
函數(shù)節(jié)流
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()攔截了函數(shù)調(diào)用须眷，當(dāng)只有時間超過1s時候函數(shù)才會再次被調(diào)用
圖片懶加載
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);
通過proxy構(gòu)造默認(rèn)Image對象竖瘾，在加載完成時替換默認(rèn)圖片
單例模式
// 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;
}
// 普通創(chuàng)建實例
const t1 = new Test(),
t2 = new Test();
t1.value = 123;
console.log('Normal:', t2.value); // 0 - 因為 t1、t2 是不同的實例
// 使用 Proxy 來 trap 構(gòu)造函數(shù), 完成單例模式
const TestSingleton = makeSingleton(Test),
s1 = new TestSingleton(),
s2 = new TestSingleton();
s1.value = 123;
console.log('Singleton:', s2.value); // 123 - 現(xiàn)在 s1花颗、s2 是相同的實例捕传。
通過proxy的construct方法 攔截，讓不同的實例指向了相同的constructer扩劝，達(dá)到單例模式的目的庸论。
后記
不得不說實踐出真知啊，行文至此棒呛，參考了mdn聂示，網(wǎng)上也搜了很多相關(guān)資料，案例借鑒条霜，自己對Proxy的理解也上了一個層次催什，最近本想深入canvas，但感覺不做圖形方面的工作的話宰睡，真的難以應(yīng)用蒲凶。下篇文章先預(yù)定寫全棧應(yīng)用或者 vue源碼方面的。
最近想深入一下計算機原理拆内，請大佬推薦一些計算機原理方面的書籍旋圆，當(dāng)然不限于計算機，前端方面也可以麸恍。紅寶書灵巧，精粹，dom編程藝術(shù)抹沪，js忍者秘籍刻肄，你不知道的js，css揭秘融欧，node實戰(zhàn)這些已經(jīng)看過了敏弃，就不要重復(fù)推薦了，這些都是我看過覺得不錯的書噪馏。本人零基礎(chǔ)麦到，大學(xué)自學(xué)的一點前端知識，感覺需要擴(kuò)展一下欠肾。
