JS 中沒有函數(shù)重載，又是如何實現(xiàn)函數(shù)重載的呢？
面試官問你 JS 是如何實現(xiàn)函數(shù)重載的?你會怎么回答?
你會不會疑問我在書里看的明確講 JS 是沒有函數(shù)重載的，面試官說能實現(xiàn)，那肯定是有辦法的呀，該如何實現(xiàn)呢?
一、什么是函數(shù)重載?
重載函數(shù)指的是兩個或兩個以上的同名函數(shù)，實現(xiàn)一個函數(shù)名有多種功能。
函數(shù)重載要求編譯器能夠在調(diào)用函數(shù)時唯一確定，應(yīng)該調(diào)用的是哪個函數(shù)?由于同名函數(shù)有多個，在確定函數(shù)實現(xiàn)時，需要根據(jù)函數(shù)的參數(shù)的個數(shù)和類型來區(qū)分，即實現(xiàn)函數(shù)重載時，要求同名函數(shù)的參數(shù)個數(shù)或類型不一致，否則將無法實現(xiàn)函數(shù)重載。
重載的特點(diǎn)：
- 同名的多個函數(shù)。
- 不同的參數(shù)。
二、JS中有函數(shù)重載嗎?
我在閱讀《JavaScript 高級程序設(shè)計(第三版)》一書，在第五章看到明確的提示 JS 沒有函數(shù)重載。
我們在 《JavaScript 高級程序設(shè)計(第三版)》 書中能看到，JS 中的同名函數(shù)，前面的會被最后面的函數(shù)覆蓋掉，根本無法實現(xiàn)多種功能，如：
function add(a,b) {
return a+b
}
function add(a, b, c) {
return a + b + c
}
console.log(add(1,2)); // NaN
console.log(add(1,2,3 ));// 6
如果我們需要使用 JS 實現(xiàn)上述 add 方法，將兩個或三個數(shù)值進(jìn)行求和，該怎么解決呢?
解決1：利用 arguments
function add() {
var reg = arguments;
if (reg.length == 2) {
return reg[0] + reg[1]
} else if(reg.length == 3) {
return reg[0] + reg[1] + reg[2]
}
}
console.log(add(1, 2)) //3
console.log(add(1, 2, 3)) //6
上述方法雖然實現(xiàn)了上述簡單功能，勉強(qiáng)能算得上是一種函數(shù)重載的實現(xiàn)方法，但是存在一定的弊端。
它的缺點(diǎn)：
- 如果功能復(fù)雜時，代碼量過大。
- 不利于維護(hù)和復(fù)用。
這時候問題來了，利用 JS 如何實現(xiàn)呢?可以通過閉包的形式可以簡單地實現(xiàn)。
三、JS 如何實現(xiàn)重載?
function addMethodToObject (obj, name, fn) {
const temp = obj[name]
obj[name] = function () {
if (fn.length === arguments.length) {
return fn.apply(obj, arguments)
} else if (typeof temp === 'function') {
return temp.apply(obj, arguments)
}
}
}
上述方法用來給一個對象添加自定義方法，能夠接收三個參數(shù)：
- 需要添加方法的對象
- 自定義方法名
- 定義方法具體要實現(xiàn)的功能，通過回調(diào)實現(xiàn)
addMethodToObject(group, 'find', function () {
return {
peoples: this.peoples,
count: this.peoples.length
}
})
addMethodToObject(group, 'find', function (isMale) {
if (!!isMale) {
const male = this.peoples.filter(item => item.sex === 'male')
return {
peoples: male,
count: male.length
}
} else {
const female = this.peoples.filter(item => item.sex === 'female')
return {
peoples: female,
count: female.length
}
}
})
addMethodToObject(group, 'find', function (elder, age) {
if (!!elder) {
const elder = this.peoples.filter(item => item.age >= age)
return {
peoples: elder,
count: elder.length
}
} else {
const younger = this.peoples.filter(item => item.age < age)
return {
peoples: younger,
count: younger.length
}
}
})
const group = {
total: 10,
male: 6,
female: 4,
peoples: [{
age: 12,
sex: 'male'
}, {
age: 18,
sex: 'female'
}]
}
group.find()
group.find(1)
group.find(0, 15)
總結(jié)：JS 沒有函數(shù)重載，但是可以實現(xiàn)函數(shù)重載。
