需求
假设我们有这样一个数据（来源于参考文章中的浅谈JavaScript函数重载，链接在文章尾部给出）：
1
2
3
| const users = {
values: ["Dean Edwards", "Alex Russell", "Dean Tom"]
}
|
要定义一个find方法，使得它可以在下列三种情况工作：
- 当不传入参数时，它返回整个数组。
- 当传入一个参数时，它返回以这个参数为名（即First Name）的数组。
- 当传入两个参数时，它返回以第一个参数为名，第二个参数为姓（即Last Name）的数组。
- 不符合上述条件，返回
undefined，也就是不予处理。
接下来通过普通方法和函数重载的方法实现这一需求。
普通方法
考虑到根据arguments对象判断参数长度，写出以下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| const users = {
values: ["Dean Edwards", "Alex Russell", "Dean Tom"]
}
users.find = function() {
switch (arguments.length) {
case 0:
return this.values
case 1:
return this.values.filter(name => name.startsWith(arguments[0]))
case 2:
return this.values.filter(name => name.startsWith(arguments[0])
&& name.endsWith(arguments[1]))
}
}
console.log(users.find())
console.log(users.find('Dean'))
console.log(users.find('Dean', 'Tom'))
console.log(users.find('Dean', 'Tom', 'A'))
|
确实可以正确运行，不过通常来说使用switch case都不是一个好主意：再添加逻辑的时候就比较混乱了，所以考虑下面通过函数重载的实现。
函数重载
通过两种方式实现函数重载，不使用闭包和使用闭包。
逐次添加
这是绝大多数文章实现函数重载的方法：
1
2
3
4
5
6
7
8
9
10
| function addMethod(obj, name, func) {
const old = obj[name]
obj[name] = function() {
if (arguments.length === func.length) {
return func.apply(this, arguments)
} else if (typeof old === 'function') {
return old.apply(this, arguments)
}
}
}
|
其中第6行使用typeof old === 'function'而不是old !== undefined的原因，我认为是它担心原来的obj[name]是一个数字、字符串或其他类型，使用typeof判断能使这个addMethod方法更加健壮。
接下来给出测试代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| const users = {
values: ["Dean Edwards", "Alex Russell", "Dean Tom"]
}
addMethod(users, 'find', function() {
return this.values
})
addMethod(users, 'find', function(firstName) {
return this.values.filter(name => name.startsWith(firstName))
})
addMethod(users, 'find', function(firstName, lastName) {
return this.find(firstName).filter(name => name.endsWith(lastName))
})
console.log(users.find())
console.log(users.find('Dean'))
console.log(users.find('Dean', 'Tom'))
console.log(users.find('Dean', 'Tom', 'A'))
|
一次添加
除了逐个把函数使用闭包的方法添加到对象中，还可以通过下列代码实现一次添加全部的待重载函数：
1
2
3
4
5
6
7
8
9
10
| function overload(...funcs) {
const map = funcs.reduce((pre, cur) => {
pre.set(cur.length, cur)
return pre
}, new Map())
return function() {
return map.get(arguments.length)?.apply(this, arguments)
}
}
|
可以看出，它接受了一个函数的数组，并以参数长度作为键、函数本身作为值创建了一个映射。当调用时，根据传入参数的不同，调用指定的函数。
下面是测试代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| const users = {
values: ["Dean Edwards", "Alex Russell", "Dean Tom"]
}
function findAll() {
return this.values
}
function findFirstName(firstName) {
return this.values.filter(name => name.startsWith(firstName))
}
function findFullName(firstName, lastName) {
return this.find(firstName).filter(name => name.endsWith(lastName))
}
users.find = overload(findAll, findFirstName, findFullName)
console.log(users.find())
console.log(users.find('Dean'))
console.log(users.find('Dean', 'Tom'))
console.log(users.find('Dean', 'Tom', 'A'))
|
至于孰优孰劣，还请根据具体情况进行选择。
参考
