面向?qū)ο笤O(shè)計里的設(shè)計模式之Proxy（代理）模式，相信很多朋友已經(jīng)很熟悉了。

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

下面的代碼創(chuàng)建了一個名叫Jerry的Employee對象，然后用函數(shù)hireEmployee雇用該Employee進行JavaScript開發(fā)：

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

現(xiàn)在Jerry在他的業(yè)余時間里想學(xué)習(xí)一些其他的編程語言，但是不想影響自己的本職工作。用技術(shù)語言來講，就是希望Employee原型方法work執(zhí)行時，打印一行額外的信息，但是不允許修改Employee函數(shù)和Employee.prototype.work本身。這時Proxy這種代理模式就派上用場了。

我們?yōu)閣ork方法創(chuàng)建一個代理邏輯：

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方法。兩個輸入?yún)?shù)，target和name。Target代表當前執(zhí)行方法的實例，即方法調(diào)用者。Name代表具體的方法名稱。第4行我們把原始方法取出來，存放到變量oriFun里。第五行返回一個新的JavaScript函數(shù)，該函數(shù)體的實現(xiàn)邏輯為首先在第六行調(diào)用原始方法，然后在第七行執(zhí)行額外的邏輯。

大家在回憶我之前介紹Java InvocationHandler實現(xiàn)動態(tài)代理的文章：

Java動態(tài)代理之InvocationHandler最簡單的入門教程

是不是思路完全一樣？都是在代理邏輯里調(diào)用原始方法，然后再執(zhí)行額外的代碼。

這個proxyLogic生成后，怎么把它同我們原始的需要被代理的代碼關(guān)聯(lián)起來呢？

只需要1行代碼：

var jerryProxy = new Proxy(jerry, proxyLogic );

Proxy函數(shù)是JavaScript提供的原生代理構(gòu)造器，需要兩個輸入?yún)?shù)：

第一個輸入?yún)?shù)是我們的Employee實例，即需要被代碼的對象實例，第二個輸入?yún)?shù)是我們開發(fā)好的代理邏輯。返回的即是裝配好的代理對象，該代理對象的work方法實現(xiàn)在第二個輸入?yún)?shù)里。

現(xiàn)在我們再次調(diào)用hireEmployee，傳入Proxy構(gòu)造器返回的代理對象：

hireEmployee(jerryProxy, “JavaScript”);

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

和Java的Invocation一樣優(yōu)雅地實現(xiàn)了代理設(shè)計模式。

使用Proxy代理設(shè)計模式的一個實際例子，請參考我的文章：

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

要獲取更多Jerry的原創(chuàng)技術(shù)文章，請關(guān)注公眾號"汪子熙"或者掃描下面二維碼:

總結(jié)

以上是生活随笔為你收集整理的100行代码让您学会JavaScript原生的Proxy设计模式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。