摘要:我們知道,函數可以隨意傳遞任意數量任意類型的參數,那么它有沒有重載呢答案是有的,下面我們通過種方法來實現的函數重載。因此,每次調用,都會有一個執行環境保存著當時的和,所以在調用的時候可以找到當時注入的,實現函數重載。
概念
重載是指函數或者方法有相同的名稱,但是參數個數或類型不相同的情形,這樣的同名不同參的函數或者方法之間,互相稱之為重載函數或方法。
我們知道,JavaScript函數可以隨意傳遞任意數量、任意類型的參數,那么它有沒有重載呢?
答案是有的,下面我們通過3種方法來實現JavaScript的函數重載。
實現 0. 目標我們有一個people對象
var people = { values: ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"] };
想要實現一個find方法,不傳參數的時候,輸出所有名字,只傳1個參數的時候,輸出所有fristName和參數相同的名字,傳2個參數的時候,輸出所有firstName和lastName和2個參數分別相同的名字。
people.find(); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"] people.find("Dean"); // ["Dean Edwards", "Dean Tom"] people.find("Dean", "Edwards"); // ["Dean Edwards"]1. 利用arguments和switch實現重載
people.find = function () { switch (arguments.length) { case 0: return this.values; case 1: return this.values.filter((value) => { var firstName = arguments[0]; return value.indexOf(firstName) !== -1 ? true : false; }); case 2: return this.values.filter((value) => { var fullName = `${arguments[0]} ${arguments[1]}`; return value.indexOf(fullName) !== -1 ? true : false; }); } }; console.log(people.find()); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"] console.log(people.find("Dean")); // ["Dean Edwards", "Dean Tom"] console.log(people.find("Dean", "Edwards")); // ["Dean Edwards"]
這種方式大家肯定都能看懂,就不多說啦。
2. 利用arguments和閉包實現重載function addMethod (object, name, fn) { // 把前一次添加的方法存在一個臨時變量old中 var old = object[name]; // 重寫object[name]方法 object[name] = function () { if (fn.length === arguments.length) { // 如果調用object[name]方法時,如果實參和形參個數一致,則直接調用 return fn.apply(this, arguments); } else if (typeof old === "function") { // 如果實參形參不一致,判斷old是否是函數,如果是,就調用old return old.apply(this, arguments); } }; } addMethod(people, "find", function() { return this.values; }); addMethod(people, "find", function(firstName) { return this.values.filter((value) => { return value.indexOf(firstName) !== -1 ? true : false; }); }); addMethod(people, "find", function(firstName, lastName) { return this.values.filter((value) => { var fullName = `${firstName} ${lastName}`; return value.indexOf(fullName) !== -1 ? true : false; }); }); console.log(people.find()); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"] console.log(people.find("Dean")); // ["Dean Edwards", "Dean Tom"] console.log(people.find("Dean", "Edwards")); // ["Dean Edwards"]
這里addMethod(object, name, fn)方法是核心。我們著重分析一下為什么這里會有閉包,可以保存上一個注冊的函數。
function addMethod (object, name, fn) { // object, name, fn是傳入的3個參數 var old = object[name]; object[name] = function () { // 這里對old和fn進行了引用 if (fn.length === arguments.length) { return fn.apply(this, arguments); } else if (typeof old === "function") { return old.apply(this, arguments); } }; }
object是另外一個引用對象,它的一個方法中引用了old和fn,所以對于addMethod來說,它的局部變量在addMethod函數執行完后,仍然被另外的變量所引用,導致它的執行環境無法銷毀,所以產生了閉包。
因此,每次調用addMethod,都會有一個執行環境保存著當時的old和fn,所以在調用people.find()的時候可以找到當時注入的fn,實現函數重載。
3. 利用Proxy和arguments實現重載var proxy = new Proxy(people, { get: function (target, key, receiver) { if (key === "find") { return function () { switch (arguments.length) { case 0: return this.values; case 1: return this.values.filter((value) => { var firstName = arguments[0]; return value.indexOf(firstName) !== -1 ? true : false; }); case 2: return this.values.filter((value) => { var fullName = `${arguments[0]} ${arguments[1]}`; return value.indexOf(fullName) !== -1 ? true : false; }); } }; } return Reflect.get(target , key , receiver); }, set: function (target, key, value, receiver) { return Reflect.set(target, key, value, receiver); } }); console.log(proxy.find()); // ["Dean Edwards", "Sam Stephenson", "Alex Russell", "Dean Tom"] console.log(proxy.find("Dean")); // ["Dean Edwards", "Dean Tom"] console.log(proxy.find("Dean", "Edwards")); // ["Dean Edwards"]
這樣寫其實感覺有點畫蛇添足了,就當成是另外一種思路吧。
總結JavaScript可以實現函數重載,主要有兩種思想:
利用arguments類數組來判斷接收參數的個數
利用閉包保存以前注冊進來的同名函數
歡迎關注我的公眾號文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97143.html
摘要:但是我們知道中是沒有重載的為什么沒重載不是的特性也會有的嗎,因為后面定義的函數會覆蓋前面的同名函數,但是重載那么好用,我們想在實現函數重載該怎么辦呢今天就來給大家講講在里面實現函數重載的兩個思路。這就是閉包的核心作用。 大家都知道,所謂重載,就是一組相同的函數名,有不同個數的參數,在使用時調用一個函數名,傳入不同參數,根據你的參數個數,來決定使用不同的函數!重載這個在JAVA這些經典的...
摘要:實現函數重載函數重載,是等編程語言中具有的一項特性,這項特性允許創建數項名稱相同但輸入輸出類型或個數不同的子程序,它可以簡單地稱為一個單獨功能可以執行多項任務的能力。其它在中加入了類型,它自帶函數重載。 JavaScript實現函數重載 函數重載(function overloading),是 Ada、C++、C#、D、Java等編程語言中具有的一項特性,這項特性允許創建數項名稱相同...
摘要:說明中沒有真正意義上的函數重載。先看第一種辦法,通過對象來實現對象,是函數內部的一個類數組對象,它里面保存著調用函數時,傳遞給函數的所有參數。 說明 JavaScript 中沒有真正意義上的函數重載。 函數重載 函數名相同,函數的參數列表不同(包括參數個數和參數類型),根據參數的不同去執行不同的操作。 我們舉個例子看看 function overload(a){ conso...
摘要:譯者按之父巧妙地利用了閉包,實現了函數重載。在一個業余項目中,我寫了一個簡單的函數,用于實現函數重載。而所謂函數重載,就是函數名稱一樣,但是輸入輸出不一樣。 譯者按: jQuery之父John Resig巧妙地利用了閉包,實現了JavaScript函數重載。 原文: JavaScript Method Overloading 譯者: Fundebug 為了保證可讀性,本文采用意...
摘要:背景高級程序設計中提及,不支持函數重載。若出現函數名稱相同情況下,后者覆蓋前者,故此不會出現重載的情況。維基百科場景例如,一個工廠有著數量級的員工,期望通過姓名找到某一員工或某類員工,使用同一個方法通過透傳參數個數去查找員工。 背景 ???????《JavaScript高級程序設計》中提及,JavaScript 不支持函數重載。若出現函數名稱相同情況下,后者覆蓋前者,故此不會出現重載...
閱讀 1074·2021-11-24 09:39
閱讀 1307·2021-11-18 13:18
閱讀 2425·2021-11-15 11:38
閱讀 1824·2021-09-26 09:47
閱讀 1625·2021-09-22 15:09
閱讀 1624·2021-09-03 10:29
閱讀 1510·2019-08-29 17:28
閱讀 2951·2019-08-29 16:30