TypeScript学习(二)- 函数
2019-05-22 本文已影响14人
JsForLife
函数类型
类型定义
函数类型定义分为两部分: 入参定义和出参定义。
按定义的时机分就近定义和前置定义两种。
// 就近定义
const add = (a:number, b:number) : number => a + b;
/**
* 前置定义,即先定义接口,再赋给函数。
* 推荐前置定义,复用性高
* */
interface Add {
(a:number, b:number) : number;
}
// 只要入参和出参的类型以及个数与接口相符即可,参数名可以不一致
const add:Add = (x, y) => x + y;
类型推断
有些情况下,编译器会根据我们的代码上下文自动推断类型。
// 隐藏累出参类型,但编译器推断出函数返回值的类型是number
const add = (a:number, b:number) => a + b;
// 自动推断出a的类型是string
const a = '' + 1;
可选参数和默认参数
// b为可选参数
interface Add {
(a:number, b?:number) : number;
}
const add:Add = (a, b) => {
if (!b) {
return 2 * a;
}
return a + b;
};
add(1); // 2
// 为可选参数b设置一个默认值
const add:Add = (a, b = 2) => a + b;
add(1,1); // 2
add(1); // 3,在不传可选参时,是用来默认值
剩余参数
在es5,我们都可以通过arguments来访问函数的所有参数。
在es6和ts中我们可以剩余参数(rest参数)获得函数的不定长参。
// rest参数是一个数组,长度不定,且只能作为最后一个参数,参数名不一定非得叫rest
function calculate (a:number, ...rest_parameters:number[]) {
const total = rest_parameters.reduce((sum, current) => sum += current);
return a * total;
}
calculate(2, 1, 2) // 6
calculate(3, 1, 2, 3) // 18
this
传统function函数的this由执行上下文决定,指向最后调用它的一方。
箭头函数没有绑定this,而是在定义时通过作用域链向上查找,直到最近一层非箭头函数,若找不到则指向全局。
window.name = 'window';
function get_name () {
const name = 'inside';
return this.name;
}
// 在全局下调用,this指向window,严格模式下指向undefined
get_name(); // 'window'或报错
// 在全局下声明,this指向window,严格模式下指向undefined
const get_name2 = () => {
const name = 'inside';
return this.name;
}
get_name2(); // 'window'或报错
// 注意,外层是对象,而不是函数
const function_builder = {
name: 'builder',
get_name3: () => {
const name = 'inside';
console.log(this.name);
},
};
get_name3(); // 'window'或报错
再看看另一个例子
window.name = 'window';
const function_builder = {
name: 'builder',
get_name() {
const name = 'name1';
return function () {
return this.name;
};
},
get_name2() {
const name = 'name2';
// 注意这里用的是箭头函数
return () => this.name;
},
};
// 注意,这里只是赋引用还没调用
const get_name_3 = function_builder.get_name2;
// 注意,这里执行了get_name2,并返回了一个箭头函数
const get_name_4 = function_builder.get_name2();
function_builder.get_name()(); // 'window'或报错
function_builder.get_name2()(); // 'builder'
get_name_3()(); // 'window'或报错
get_name_4() // 'builder'
上面一个例子基本可以作为面试题了,有点绕,我们拆开来讲解下:
window.name = 'window';
const function_builder = {
name: 'builder',
get_name() {
const name = 'name1';
console.log(this.name);
return function () {
return this.name;
};
},
};
// 打印'builder' 并返回了一个非箭头函数,这说明get_name在调用时指向了function_builder
function_builder.get_name();
// 这句代码等价于它随后两句
function_builder.get_name()();
// 所返回的非箭头函数暴露在全局环境下
const get_name_fun = function_builder.get_name();
// 调用时指向了全局而非function_builder,故打印的不是'builder'
get_name_fun();
而箭头函数内包非箭头函数的例子:
window.name = 'window';
const function_builder = {
name: 'builder',
get_name2() {
const name = 'name2';
console.log(this.name);
// 注意这里用的是箭头函数
return () => this.name;
},
};
// 与上例相同,get_name2指向了调用方function_builder,但不同的是返回的是箭头函数
function_builder.get_name2();
// 这句代码等价于它随后两句
function_builder.get_name2()();
// 此时get_name4被定义,通过作用域链查找,继承了最近一层非箭头函数get_name2的this
const get_name_4 = function_builder.get_name2();
// 和get_name2一样指向function_builder,故打印的是 'builder'
get_name_4();
// 赋引用
const get_name_3 = function_builder.get_name2;
// 在全局下调用,无论是get_name3还是所返回的函数都指向全局,故打出的不是'builder'
get_name_3()();
函数重载
ts通过为同一个函数提供多个函数类型定义来实现函数重载。
// 两次定义
function add (a:number, b:number) : number;
function add(a:number[], b: number[]) : number[];
// 一次实现
function add(a, b) {
if (typeof a === 'number') {
return a + b;
}
if (a instanceof Array) {
return a.concat(b);
}
};
add(1, 2); // 3
add([1], [2]); // [1,2]