我正参与「AdminJS·启航计划」
函数公式默认参数/可选参数
针对同一个函数公式大家在不同场景下传参,主要参数有时所有必须,有时一部分必须,界定好几个同名函数便会出错,那样应该怎么完成这一去做呢?我们能为函数公式设定默认参数和可选参数。 为每个主要参数加上种类以后,可以不给函数公式自身加上返回值类型,由于TS能够根据回到句子全自动推测返回值类型
function start(name:string,age:number,phone?:number,sex?:string):string{
if(phone&&sex){
return `name:${name},age:${age},phone:${phone},sex:${sex}`
}else{
return `name:${name},age:${age}`
}
}
start('zhangsan','14')//name:zhangsan,age:14
start('zhangsan','14',15678777777,'男')//name:zhangsan,age:14,phone:15678777777,sex:男
此外大家看它编译程序后的样子,在其中传参用了concat
来连接字符串,也让大家学到模板字符串数组的实现基本原理。
function start(name, age, phone, sex) {
if (phone && sex) {
return "name:".concat(name, ",age:").concat(age, ",phone:").concat(phone, ",sex:").concat(sex);
}
else {
return "name:".concat(name, ",age:").concat(age);
}
}
start('zhangsan', 14); //name:zhangsan,age:14
start('zhangsan', 14, 15678777777, '男'); //name:zhangsan,age:14,phone:15678777777,sex:男
但我们要有着很多情景,参数类型也都不一致,大家这么写难以维护保养,而且界定规范和标准难以适用具体好几个情景,那么我们可以应用函数重载来处理。
函数重载
啥事函数重载呢?在我们数次调用函数时传送不一样主要参数总数或是种类,函数公式能做出不一样解决。
1、函数签名
这儿详细介绍个成绩「函数签名」,说白了,函数签名关键定义了主要参数及参数类型,传参及返回值类型。函数签名不一样,函数公式能做出不一样的处理方法,这个是我对函数重载的认知。
2、构造器轻载
举例说明,申明一个类Course
,里边写一个start
的办法,大家启用start
时传到不一样参数类型早已主要参数数量,start方式能做出不一样解决,那如何完成呢?详细如下:
type Combinable = number | string;
class Course {
//界定轻载签字
begin(name: number, score: number): string;
begin(name: string, score: string): string;
begin(name: string, score: number): string;
begin(name: number, score: string): string;
//界定完成签字
begin(name: Combinable, score: Combinable) {
if (typeof name === 'string' || typeof score === 'string') {
return 'student:' name ':' score; }
}
}
const course = new Course();
course.begin(111, 5);//并没有导出
course.begin('zhangsan', 5);//student:zhangsan:5
course.begin(5, 'zhangsan');//student:5:zhangsan
之上编码中定义了4个轻载前边和1个完成签字。
3、协同种类函数重载
申明一个函数arithmetic
,参数类型为协同种类,传参都是协同种类,可是如下所示编码却出错了。
function arithmetic(x: number | string): number | string {
if (typeof x === 'number') {
return x;
} else {
return x '是字符串数组';
}
}
arithmetic(1).length;
主要原因是未明确函数公式string
种类并没有toFixed
特性`,那样如何使用函数重载解决这个出错问题?
我们能也可以根据传参的种类和函数返回值申明好几个同名的的函数公式,仅仅种类和传参各有不同。
function arithmetic(x: number): number;
function arithmetic(x: string): string;
function arithmetic(x: number | string): number | string {
if (typeof x === 'number') {
return x;
} else {
return x '是字符串数组';
}
}
arithmetic(1).toFixed(1);
这样才不会出错啦,现在已经鉴别到arithmetic(1)
的传参是number
种类。
扩展JS中函数重载
JS中函数重载如何完成呢?
1、运用arguments主要参数
var arr = [1,2,3,4,5];
//留意:这儿不可以写出箭头函数,不然this偏向是指window目标
Array.prototype.search = function() {
var len = arguments.length;
switch(len){
case 0:
return this;
case 1:
return `${arguments[0]}`;
case 2:
return `${arguments[0]},${arguments[1]}`;
}
}
console.log(arr.search()) //[1,2,3,4,5]
console.log(arr.search(1)) //1
console.log(arr.search(1,2)) //1,2
2、运用闭包和arguments
function addMethod (obj, name, fn) {
var old = obj[name];
obj[name] = function () {
if (fn.length === arguments.length) {
return fn.apply(this, arguments)
} else if (typeof old === 'function') {
return old.apply(this, arguments)
}
}
}
var person = {name: 'zhangsan'}
addMethod(person, 'getName', function () {
console.log(this.name '---->' 'getName1')
})
addMethod(person, 'getName', function (str) {
console.log(this.name '---->' str)
})
addMethod(person, 'getName', function (a, b) {
console.log(this.name '---->' (a b))
})
person.getName()
person.getName('zhangsan')
person.getName(10, 20)