摘要：本文是重溫基礎(chǔ)系列文章的第十四篇。元，是指程序本身。有理解不到位，還請指點(diǎn)，具體詳細(xì)的介紹，可以查看維基百科元編程。攔截，返回一個(gè)布爾值。

本文是 重溫基礎(chǔ) 系列文章的第十四篇。
這是第一個(gè)基礎(chǔ)系列的最后一篇，后面會(huì)開始復(fù)習(xí)一些中級的知識了，歡迎持續(xù)關(guān)注呀！
接下來會(huì)統(tǒng)一整理到我的【Cute-JavaScript】的JavaScript基礎(chǔ)系列中。

今日感受：獨(dú)樂樂不如眾樂樂。

系列目錄：

【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理)

【重溫基礎(chǔ)】1.語法和數(shù)據(jù)類型

【重溫基礎(chǔ)】2.流程控制和錯(cuò)誤處理

【重溫基礎(chǔ)】3.循環(huán)和迭代

【重溫基礎(chǔ)】4.函數(shù)

【重溫基礎(chǔ)】5.表達(dá)式和運(yùn)算符

【重溫基礎(chǔ)】6.數(shù)字

【重溫基礎(chǔ)】7.時(shí)間對象

【重溫基礎(chǔ)】8.字符串

【重溫基礎(chǔ)】9.正則表達(dá)式

【重溫基礎(chǔ)】10.數(shù)組

【重溫基礎(chǔ)】11.Map和Set對象

【重溫基礎(chǔ)】12.使用對象

【重溫基礎(chǔ)】13.迭代器和生成器

本章節(jié)復(fù)習(xí)的是JS中的元編程，涉及的更多的是ES6的新特性。

元編程，其實(shí)我是這么理解的：讓代碼自動(dòng)寫代碼,可以更改源碼底層的功能。
元，是指程序本身。
有理解不到位，還請指點(diǎn)，具體詳細(xì)的介紹，可以查看維基百科 元編程 。
從ES6開始，JavaScrip添加了對Proxy和Reflect對象的支持，允許我們連接并定義基本語言操作的自定義行為（如屬性查找，賦值，枚舉和函數(shù)調(diào)用等），從而實(shí)現(xiàn)JavaScrip的元級別編程。

Reflect: 用于替換直接調(diào)用Object的方法，并不是一個(gè)函數(shù)對象，也沒有constructor方法，所以不能用new操作符。

Proxy: 用于自定義對象的行為，如修改set和get方法，可以說是ES5中Object.defineProperty()方法的ES6升級版。

兩者聯(lián)系： API完全一致，但Reflect一般在Proxy需要處理默認(rèn)行為的時(shí)候使用。

參考資料：

本文主要從Proxy介紹，還會(huì)有幾個(gè)案例，實(shí)際看下怎么使用。

proxy 用于修改某些操作的默認(rèn)行為，可以理解為一種攔截外界對目標(biāo)對象訪問的一種機(jī)制，從而對外界的訪問進(jìn)行過濾和修改，即代理某些操作，也稱“代理器”。

基本語法：

let p = new Proxy(target, handler);

proxy實(shí)例化需要傳入兩個(gè)參數(shù)，target參數(shù)表示所要攔截的目標(biāo)對象，handler參數(shù)也是一個(gè)對象，用來定制攔截行為。

let p = new Proxy({}, {
    get: function (target, handler){
        return "leo";
    }
})
p.name; // leo
p.age;  // leo
p.abcd; // leo

上述a實(shí)例中，在第二個(gè)參數(shù)中定義了get方法，來攔截外界訪問，并且get方法接收兩個(gè)參數(shù)，分別是目標(biāo)對象和所要訪問的屬性，所以不管外部訪問對象中任何屬性都會(huì)執(zhí)行get方法返回leo。

注意：

只能使用Proxy實(shí)例的對象才能使用這些操作。

如果handler沒有設(shè)置攔截，則直接返回原對象。

let target = {};
let handler = {};
let p = new Proxy(target, handler);
p.a = "leo"; 
target.a;  // "leo"

同個(gè)攔截器函數(shù)，設(shè)置多個(gè)攔截操作：

let p = new Proxy(function(a, b){
    return a + b;
},{
    get:function(){
        return "get方法";
    },
    apply:function(){
        return "apply方法";
    }
})

這里還有一個(gè)簡單的案例：

let handler = {
    get : function (target, name){
        return name in target ? target[name] : 16;
    }
}

let p = new Proxy ({}, handler);
p.a = 1;
console.log(p.a , p.b);
// 1   16

這里因?yàn)?p.a = 1 定義了p中的a屬性，值為1，而沒有定義b屬性，所以p.a會(huì)得到1，而p.b會(huì)得到undefined從而使用name in target ? target[name] : 16;返回的默認(rèn)值16；

Proxy支持的13種攔截操作：
13種攔截操作的詳細(xì)介紹：打開阮一峰老師的鏈接。

get(target, propKey, receiver)：

攔截對象屬性的讀取，比如proxy.foo和proxy["foo"]。

set(target, propKey, value, receiver)：

攔截對象屬性的設(shè)置，比如proxy.foo = v或proxy["foo"] = v，返回一個(gè)布爾值。

has(target, propKey)：

攔截propKey in proxy的操作，返回一個(gè)布爾值。

deleteProperty(target, propKey)：

攔截delete proxy[propKey]的操作，返回一個(gè)布爾值。

ownKeys(target)：

攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循環(huán)，返回一個(gè)數(shù)組。該方法返回目標(biāo)對象所有自身的屬性的屬性名，而Object.keys()的返回結(jié)果僅包括目標(biāo)對象自身的可遍歷屬性。

getOwnPropertyDescriptor(target, propKey)：

攔截Object.getOwnPropertyDescriptor(proxy, propKey)，返回屬性的描述對象。

defineProperty(target, propKey, propDesc)：

攔截Object.defineProperty(proxy, propKey, propDesc）、Object.defineProperties(proxy, propDescs)，返回一個(gè)布爾值。

preventExtensions(target)：

攔截Object.preventExtensions(proxy)，返回一個(gè)布爾值。

getPrototypeOf(target)：

攔截Object.getPrototypeOf(proxy)，返回一個(gè)對象。

isExtensible(target)：

攔截Object.isExtensible(proxy)，返回一個(gè)布爾值。

setPrototypeOf(target, proto)：

攔截Object.setPrototypeOf(proxy, proto)，返回一個(gè)布爾值。如果目標(biāo)對象是函數(shù)，那么還有兩種額外操作可以攔截。

apply(target, object, args)：

攔截 Proxy 實(shí)例作為函數(shù)調(diào)用的操作，比如proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。

construct(target, args)：

攔截 Proxy 實(shí)例作為構(gòu)造函數(shù)調(diào)用的操作，比如new proxy(...args)。

使用Proxy.revocable方法取消Proxy實(shí)例。

let a = {};
let b = {
    get: function(target, name) {
        return "[[" + name + "]]";
    }
};
let revoke = Proxy.revocable(a, b);
let proxy = revoke.proxy;

proxy.age;           // "[[age]]"
revoke.revoke();
proxy.age;           // Uncaught TypeError: Cannot perform "get" on a proxy that has been revoked

proxy.age = 10;      // Uncaught TypeError: Cannot perform "set" on a proxy that has been revoked
delete proxy.age;    // Uncaught TypeError: Cannot perform "deleteProperty" on a proxy that has been revoked
typeof proxy;        // "object"

const service = createWebService("http://le.com/data");
service.employees().than(json =>{
    const employees = JSON.parse(json);
})

function createWebService(url){
    return new Proxy({}, {
        get(target, propKey, receiver{
            return () => httpGet(url+"/"+propKey);
        })
    })
}

通過Proxy代理對象的set和get方法來進(jìn)行攔截?cái)?shù)據(jù)，像Vue就是用數(shù)據(jù)攔截來實(shí)現(xiàn)數(shù)據(jù)綁定。

let handler = {
    // 攔截并處理get方法
    // 可以理解為設(shè)置get方法返回的默認(rèn)值
    get : function (target, key){
        return key in target ? target[key] : 30;
    },
    
    // 攔截并處理set方法
    // 可以理解為設(shè)置set方法的默認(rèn)行為
    set : function (target, key, value){
        if(key === "age"){
            if (!Number.isInteger(value)){
                throw new TypeError("age不是一個(gè)整數(shù)！");
            }
            if (value > 200){
                throw new TypeError("age不能大于200！");
            }
        }
        // 保存默認(rèn)行為
        target[key] = value;
    }
}

let p = new Proxy({}, handler);
p.a = 10;         // p.a   => 10
p.b = undefined;  // p.b   => undefined
p.c;              // 默認(rèn)值 30
p.age = 100;      // p.age => 100
p.age = 300;      // Uncaught TypeError: age不能大于200！
p.age = "leo";    // Uncaught TypeError: age不是一個(gè)整數(shù)！

通過攔截handler.apply()方法的調(diào)用，實(shí)現(xiàn)函數(shù)只能在1秒之后才能再次被調(diào)用，經(jīng)?？梢杂迷诜乐怪貜?fù)事件的觸發(fā)。

let p = (fun, time) => {
    // 獲取最后點(diǎn)擊時(shí)間
    let last = Date.now() - time;
    return new Proxy (fun, {
        apply(target, context, args){
            if(Date.now() - last >= time){
                fun.bind(target)(args);
                // 重復(fù)設(shè)置當(dāng)前時(shí)間
                last = Date.now();
            }
        }
    })
}

let p1 = () => {
    console.log("點(diǎn)擊觸發(fā)");
}
let time = 1000; // 設(shè)置時(shí)間
let proxyObj = p(p1, time);
// 監(jiān)聽滾動(dòng)事件
document.addEventListener("scroll", proxyObj);

通過攔截construct方法，讓不同實(shí)例指向相同的constructer，實(shí)現(xiàn)單例模式。

let p = function(fun){
    let instance;
    let handler = {
        // 攔截construct方法
        construct: function(targer, args){
            if(!instance){
                instance = new fun();
            }
            return instance;
        }
    }
    return new Proxy(fun, handler);
}

// 創(chuàng)建一個(gè)construct案例
function Cons (){
    this.value = 0;
}

// 創(chuàng)建實(shí)例
let p1 = new Cons();
let p2 = new Cons();

// 操作
p1.value = 100; 
// p1.value => 100 , p2.value => 0
// 因?yàn)椴皇窍嗤瑢?shí)例

// 通過Proxy實(shí)現(xiàn)單例
let singleton = p(Cons);
let p3 = new singleton();
let p4 = new singleton();
p3.value = 130; 
// p1.value => 130 , p2.value => 130
// 現(xiàn)在是相同實(shí)例

1. MDN 元編程
2. ES6中的元編程-Proxy & Reflect
本部分內(nèi)容到這結(jié)束

歡迎關(guān)注微信公眾號【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .