面向對象設計里的設計模式之Proxy（代理）模式，相信很多朋友已經很熟悉了。

其實和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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。