重載 · 前端筆記

[TOC] # 定義所謂**函數重載**，就是函數名稱一樣，但是輸入輸出不一樣。或者說，允許某個函數有各種不同輸入，根據不同的輸入，調用不同的函數，然后返回不同的結果。 **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**函數: ~~~text 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** 方法成功實現了重載，可以根據不同的輸入調用不同的函數： ~~~text 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**函數： ~~~text // 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**方法的輸出如下： ~~~text 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函數重載](https://zhuanlan.zhihu.com/p/28072022)