資訊專欄INFORMATION COLUMN
摘要：面向對象設計里的設計模式之代理模式，相信很多朋友已經很熟悉了。代表當前執行方法的實例，即方法調用者。代表具體的方法名稱。現在我們再次調用，傳入構造器返回的代理對象打印輸出，代理邏輯生效了和的一樣優雅地實現了代理設計模式。
面向對象設計里的設計模式之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的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98587.html
摘要：為了便于您更清晰的理解的體系架構，在這里我將為您展示年開發者知識圖譜，它包含了所有開發過程中的關鍵部分。在數據展示前端導入導出圖表面板數據綁定等場景無需大量代碼開發和測試，可極大節省企業研發成本并降低交付風險。 作為 Vue 的初學者，您或許已經聽過很多關于它的專業術語了，例如：單頁面應用程序、異步組件、服務器端呈現等，您可能還聽過和Vue經常一起被提到的工具和庫，如Vuex、Webp...
摘要：網上有很多前端的學習路徑文章，大多是知識點羅列為主或是資料的匯總，數據量讓新人望而卻步。天了解一個前端框架。也可以關注微信公眾號曉舟報告，發送獲取資料，就能收到下載密碼，網盤地址在最下方，獲取教程和案例的資料。 前言 好的學習方法可以事半功倍，好的學習路徑可以指明前進方向。這篇文章不僅要寫學習路徑，還要寫學習方法，還要發資料，干貨滿滿，準備接招。 網上有很多前端的學習路徑文章，大多是知...
摘要：用函數式編程對進行斷舍離當從業的老司機學會函數式編程時，他扔掉了的特性，也不用面向對象了，最后發現了真愛啊作用域和閉包作用域和閉包在里非常重要。旨在幫助非函數式編程的同學，能快速切入到函數式編程的理念。 1、用函數式編程對JavaScript進行斷舍離 當從業20的JavaScript老司機學會函數式編程時，他扔掉了90%的特性，也不用面向對象了，最后發現了真愛啊?。?！ https:/...
摘要：用函數式編程對進行斷舍離當從業的老司機學會函數式編程時，他扔掉了的特性，也不用面向對象了，最后發現了真愛啊作用域和閉包作用域和閉包在里非常重要。旨在幫助非函數式編程的同學，能快速切入到函數式編程的理念。 1、用函數式編程對JavaScript進行斷舍離 當從業20的JavaScript老司機學會函數式編程時，他扔掉了90%的特性，也不用面向對象了，最后發現了真愛?。。?！ https:/...
摘要：用函數式編程對進行斷舍離當從業的老司機學會函數式編程時，他扔掉了的特性，也不用面向對象了，最后發現了真愛啊作用域和閉包作用域和閉包在里非常重要。旨在幫助非函數式編程的同學，能快速切入到函數式編程的理念。 1、用函數式編程對JavaScript進行斷舍離 當從業20的JavaScript老司機學會函數式編程時，他扔掉了90%的特性，也不用面向對象了，最后發現了真愛?。。。?https:/...
閱讀 1648·2019-08-30 15:55
閱讀 973·2019-08-30 15:44
閱讀 866·2019-08-30 10:48
閱讀 2025·2019-08-29 13:42
閱讀 3179·2019-08-29 11:16
閱讀 1235·2019-08-29 11:09
閱讀 2053·2019-08-26 11:46
閱讀 611·2019-08-26 11:44
