摘要:譯者按之父巧妙地利用了閉包,實現了函數重載。在一個業余項目中,我寫了一個簡單的函數,用于實現函數重載。而所謂函數重載,就是函數名稱一樣,但是輸入輸出不一樣。
譯者按: jQuery之父John Resig巧妙地利用了閉包,實現了JavaScript函數重載。
原文: JavaScript Method Overloading
譯者: Fundebug
為了保證可讀性,本文采用意譯而非直譯。另外,本文版權歸原作者所有,翻譯僅用于學習。
在一個業余項目中,我寫了一個簡單的addMethod函數,用于實現函數重載(Method Overloading)。而所謂函數重載,就是函數名稱一樣,但是輸入輸出不一樣。或者說,允許某個函數有各種不同輸入,根據不同的輸入,調用不同的函數,然后返回不同的結果。
addMethod函數如下:
// addMethod - By John Resig (MIT Licensed) function addMethod(object, name, fn){ var old = object[ name ]; object[ name ] = function(){ if ( fn.length == arguments.length ) return fn.apply( this, arguments ); else if ( typeof old == "function" ) return old.apply( this, arguments ); }; }
所謂addMethod函數,簡單的理解,就是給某個object,添加一個指定name的函數fn。它利用了閉包,可以通過old變量將先后綁定的函數鏈接起來。
你可以這樣使用addMethod函數,將find函數直接添加到每個對象實例:
function Users(){ addMethod(this, "find", function(){ // Find all users... }); addMethod(this, "find", function(name){ // Find a user by name }); addMethod(this, "find", function(first, last){ // Find a user by first and last name }); }
你也可以將find函數添加到對象的prototype,這樣所有對象實例將共享find函數:
function Users(){ addMethod(Users.prototype, "find", function(){ // Find all users... }); addMethod(Users.prototype, "find", function(name){ // Find a user by name }); addMethod(Users.prototype, "find", function(first, last){ // Find a user by first and last name }); }
users對象的find方法成功實現了重載,可以根據不同的輸入調用不同的函數:
var users = new Users(); users.find(); // Finds all users.find("John"); // Finds users by name users.find("John", "Resig"); // Finds users by first and last name users.find("John", "E", "Resig"); // Does nothing
這種方法有一些明顯的缺陷:
重載只能處理輸入參數個數不同的情況,它不能區分參數的類型、名稱等其他要素。(ECMAScript 4計劃支持這一特性,稱作Multimethods,然而該版本已被放棄)。
重載過的函數將會有一些額外的負載,對于性能要求比較高的應用,使用這個方法要慎重考慮。
addMethod函數的秘訣之一在于fn.length。或許很多人并不清楚,所有函數都有一個length屬性,它的值等于定義函數時的參數個數。比如,當你定義的函數只有1個參數時,其length屬性為1:
(function(foo){}).length == 1
我做了一下測試,發現這個實現函數重載的方法適用于所有瀏覽器,如果有問題的話請與我聯系。
如果你擔心只綁定單個函數時的性能問題,你可以使用如下addMethod函數:
// addMethod - By John Resig (MIT Licensed) function addMethod(object, name, fn){ var old = object[ name ]; if ( old ) object[ name ] = function(){ if ( fn.length == arguments.length ) return fn.apply( this, arguments ); else if ( typeof old == "function" ) return old.apply( this, arguments ); }; else object[ name ] = fn; }
這樣綁定第一個函數時,將不會有額外的操作,既簡單又快速。當綁定更多函數時,則與原addMethod函數一樣,會有額外的性能損失。
這樣做還有一個額外的好處:對于那些參數個數不符合要求的函數調用,將統一又第一個綁定的函數處理。這時調用find方法的輸出如下:
var users = new Users(); users.find(); // Finds all users.find("John"); // Finds users by name users.find("John", "Resig"); // Finds users by first and last name users.find("John", "E", "Resig"); // Finds all
本文介紹的方法不能改變世界,但是它很代碼量很少、很簡單,巧妙地使用了JavaScript的特性。因此,我在我的書《Secrets of the JavaScript Ninja》也介紹了這個方法。
完整示例根據原文介紹的方法,譯者實現了一個完整的示例代碼:
function addMethod(object, name, fn) { var old = object[name]; object[name] = function() { if (fn.length == arguments.length) return fn.apply(this, arguments); else if (typeof old == "function") return old.apply(this, arguments); }; } // 不傳參數時,返回所有name function find0() { return this.names; } // 傳一個參數時,返回firstName匹配的name function find1(firstName) { var result = []; for (var i = 0; i < this.names.length; i++) { if (this.names[i].indexOf(firstName) === 0) { result.push(this.names[i]); } } return result; } // 傳兩個參數時,返回firstName和lastName都匹配的name function find2(firstName, lastName) { var result = []; for (var i = 0; i < this.names.length; i++) { if (this.names[i] === (firstName + " " + lastName)) { result.push(this.names[i]); } } return result; } function Users() { addMethod(Users.prototype, "find", find0); addMethod(Users.prototype, "find", find1); addMethod(Users.prototype, "find", find2); } var users = new Users(); users.names = ["John Resig", "John Russell", "Dean Tom"]; console.log(users.find()); // 輸出[ "John Resig", "John Russell", "Dean Tom" ] console.log(users.find("John")); // 輸出[ "John Resig", "John Russell" ] console.log(users.find("John", "Resig")); // 輸出[ "John Resig" ] console.log(users.find("John", "E", "Resig")); // 輸出undefined
憑直覺,函數重載可以通過if…else或者switch實現,這就不去管它了。jQuery之父John Resig提出了一個非常巧(bian)妙(tai)的方法,利用了閉包。
從效果上來說,users對象的find方法允許3種不同的輸入: 0個參數時,返回所有人名;1個參數時,根據firstName查找人名并返回;2個參數時,根據完整的名稱查找人名并返回。
難點在于,users.find事實上只能綁定一個函數,那它為何可以處理3種不同的輸入呢?它不可能同時綁定3個函數find0,find1與find2啊!這里的關鍵在于old屬性。
由addMethod函數的調用順序可知,users.find最終綁定的是find2函數。然而,在綁定find2時,old為find1;同理,綁定find1時,old為find0。3個函數find0,find1與find2就這樣通過閉包鏈接起來了。
根據addMethod的邏輯,當fn.length與arguments.length不匹配時,就會去調用old,直到匹配為止。
關于FundebugFundebug專注于JavaScript、微信小程序、微信小游戲、支付寶小程序、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線,Fundebug累計處理了7億+錯誤事件,得到了Google、360、金山軟件、百姓網等眾多知名用戶的認可。歡迎免費試用!
版權聲明轉載時請注明作者Fundebug以及本文地址:
https://blog.fundebug.com/2017/07/24/javascript_metho_overloading/
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84507.html
摘要:說明中沒有真正意義上的函數重載。先看第一種辦法,通過對象來實現對象,是函數內部的一個類數組對象,它里面保存著調用函數時,傳遞給函數的所有參數。 說明 JavaScript 中沒有真正意義上的函數重載。 函數重載 函數名相同,函數的參數列表不同(包括參數個數和參數類型),根據參數的不同去執行不同的操作。 我們舉個例子看看 function overload(a){ conso...
摘要:實現函數重載函數重載,是等編程語言中具有的一項特性,這項特性允許創建數項名稱相同但輸入輸出類型或個數不同的子程序,它可以簡單地稱為一個單獨功能可以執行多項任務的能力。其它在中加入了類型,它自帶函數重載。 JavaScript實現函數重載 函數重載(function overloading),是 Ada、C++、C#、D、Java等編程語言中具有的一項特性,這項特性允許創建數項名稱相同...
摘要:但是我們知道中是沒有重載的為什么沒重載不是的特性也會有的嗎,因為后面定義的函數會覆蓋前面的同名函數,但是重載那么好用,我們想在實現函數重載該怎么辦呢今天就來給大家講講在里面實現函數重載的兩個思路。這就是閉包的核心作用。 大家都知道,所謂重載,就是一組相同的函數名,有不同個數的參數,在使用時調用一個函數名,傳入不同參數,根據你的參數個數,來決定使用不同的函數!重載這個在JAVA這些經典的...
摘要:我們知道,函數可以隨意傳遞任意數量任意類型的參數,那么它有沒有重載呢答案是有的,下面我們通過種方法來實現的函數重載。因此,每次調用,都會有一個執行環境保存著當時的和,所以在調用的時候可以找到當時注入的,實現函數重載。 概念 重載是指函數或者方法有相同的名稱,但是參數個數或類型不相同的情形,這樣的同名不同參的函數或者方法之間,互相稱之為重載函數或方法。 我們知道,JavaScript函數...
摘要:背景高級程序設計中提及,不支持函數重載。若出現函數名稱相同情況下,后者覆蓋前者,故此不會出現重載的情況。維基百科場景例如,一個工廠有著數量級的員工,期望通過姓名找到某一員工或某類員工,使用同一個方法通過透傳參數個數去查找員工。 背景 ???????《JavaScript高級程序設計》中提及,JavaScript 不支持函數重載。若出現函數名稱相同情況下,后者覆蓋前者,故此不會出現重載...
閱讀 2285·2021-11-15 11:37
閱讀 2954·2021-09-01 10:41
閱讀 787·2019-12-27 11:58
閱讀 747·2019-08-30 15:54
閱讀 715·2019-08-30 13:52
閱讀 2930·2019-08-29 12:22
閱讀 1075·2019-08-28 18:27
閱讀 1452·2019-08-26 18:42