JS 中沒有函數重載，又是如何實現函數重載的呢？
作者：前端人
重載函數指的是兩個或兩個以上的同名函數，實現一個函數名有多種功能。
面試官問你 JS 是如何實現函數重載的?你會怎么回答?
你會不會疑問我在書里看的明確講 JS 是沒有函數重載的，面試官說能實現，那肯定是有辦法的呀，該如何實現呢?
一、什么是函數重載?
重載函數指的是兩個或兩個以上的同名函數，實現一個函數名有多種功能。
函數重載要求編譯器能夠在調用函數時唯一確定，應該調用的是哪個函數?由于同名函數有多個，在確定函數實現時，需要根據函數的參數的個數和類型來區分，即實現函數重載時，要求同名函數的參數個數或類型不一致，否則將無法實現函數重載。
重載的特點：
- 同名的多個函數。
- 不同的參數。
二、JS中有函數重載嗎?
我在閱讀《JavaScript 高級程序設計(第三版)》一書，在第五章看到明確的提示 JS 沒有函數重載。
我們在 《JavaScript 高級程序設計(第三版)》 書中能看到，JS 中的同名函數，前面的會被最后面的函數覆蓋掉，根本無法實現多種功能，如：
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 實現上述 add 方法，將兩個或三個數值進行求和，該怎么解決呢?
解決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
上述方法雖然實現了上述簡單功能，勉強能算得上是一種函數重載的實現方法，但是存在一定的弊端。
它的缺點：
- 如果功能復雜時，代碼量過大。
- 不利于維護和復用。
這時候問題來了，利用 JS 如何實現呢?可以通過閉包的形式可以簡單地實現。
三、JS 如何實現重載?
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)
}
}
}
上述方法用來給一個對象添加自定義方法，能夠接收三個參數：
- 需要添加方法的對象
- 自定義方法名
- 定義方法具體要實現的功能，通過回調實現
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)
總結：JS 沒有函數重載，但是可以實現函數重載。
責任編輯：姜華
來源：
今日頭條
