100行代碼讓您學會JavaScript原生的Proxy設計模式

面向對象設計裏的設計模式之Proxy（代理）模式，相信不少朋友已經很熟悉了。好比我以前寫過代理模式在Java中實現的兩篇文章：

Java代理設計模式(Proxy)的四種具體實現：靜態代理和動態代理

Java動態代理之InvocationHandler最簡單的入門教程

其實和Java同樣，JavaScript從語言層面來說，也提供了對代理這個設計模式的原生支持。咱們用一個不到100行代碼的例子來看看吧。

下面的代碼建立了一個名叫Jerry的Employee對象，而後用函數hireEmployee僱用該Employee進行JavaScript開發：

function Employee(name){

     this.name = name;

};

Employee.prototype.work = function(language){

     console.log(this.name + " is developing with: " + language);

}

let jerry = new Employee("Jerry");

function hireEmployee(employee, language){

      employee.work(language);

}

hireEmployee(jerry, "JavaScript");

打印輸出：

Jerry is developing with: JavaScript

如今Jerry在他的業餘時間裏想學習一些其餘的編程語言，可是不想影響本身的本職工做。用技術語言來說，就是但願Employee原型方法work執行時，打印一行額外的信息，可是不容許修改Employee函數和Employee.prototype.work自己。這時Proxy這種代理模式就派上用場了。

咱們爲work方法建立一個代理邏輯：

var proxyLogic = {
get: function(target, name) {
	if( name == "work"){
		var oriFun = target[name].bind(target);
		return function(language){
			oriFun(language);
			console.log("and also study other language in spare time");
		}
	}
}
}
;

重點看第二行的get方法。兩個輸入參數，target和name。Target表明當前執行方法的實例，即方法調用者。Name表明具體的方法名稱。第4行咱們把原始方法取出來，存放到變量oriFun裏。第五行返回一個新的JavaScript函數，該函數體的實現邏輯爲首先在第六行調用原始方法，而後在第七行執行額外的邏輯。

你們在回憶我以前介紹Java InvocationHandler實現動態代理的文章：

Java動態代理之InvocationHandler最簡單的入門教程

是否是思路徹底同樣？都是在代理邏輯裏調用原始方法，而後再執行額外的代碼。

這個proxyLogic生成後，怎麼把它同咱們原始的須要被代理的代碼關聯起來呢？

只須要1行代碼：

var jerryProxy = new Proxy(jerry, proxyLogic );

Proxy函數是JavaScript提供的原生代理構造器，須要兩個輸入參數：

第一個輸入參數是咱們的Employee實例，即須要被代碼的對象實例，第二個輸入參數是咱們開發好的代理邏輯。返回的便是裝配好的代理對象，該代理對象的work方法實如今第二個輸入參數裏。

如今咱們再次調用hireEmployee，傳入Proxy構造器返回的代理對象：

hireEmployee(jerryProxy, "JavaScript");

打印輸出，代理邏輯生效了：

和Java的Invocation同樣優雅地實現了代理設計模式。

使用Proxy代理設計模式的一個實際例子，請參考個人文章：

巧用代理設計模式(Proxy Design Pattern)改善前端圖片加載體驗

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙"或者掃描下面二維碼: