TypeScript教程3
1、快速回顾一下这JavaScript中的命名函数和匿名函数:
纯文本查看 复制代码
|
1
2
3
4
5
|
//Named functionfunction add(x, y) { return x+y;}//Anonymous functionvar myAdd = function(x, y) { return x+y; }; |
2、TS简单函数例子
纯文本查看 复制代码
|
1
2
3
4
5
|
function add(x: number, y: number): number { return x+y;}var myAdd = function(x: number, y: number): number { return x+y; }; |
我们可以自定义每个参数和返回类型。
3、编写匿名函数一个函数的类型有相同的两个部分:参数和返回类型的类型。 这个名字只是帮助可读性。可以不一样，只要函数类型统一即可。
纯文本查看 复制代码
|
1
2
|
var myAdd: (baseValue:number, increment:number)=>number = function(x: number, y: number): number { return x+y; }; |
我们明确的返回类型使用(= >)表示。
4、根据上下文判断返回类型
通过返回数据判断返回类型
纯文本查看 复制代码
|
1
2
3
4
|
// myAdd has the full function typevar myAdd = function(x: number, y: number): number { return x+y; };// The parameters 'x' and 'y' have the type numbervar myAdd: (baseValue:number, increment:number)=>number = function(x, y) { return x+y; }; |
5、默认参数如下写法，必须传入指定的变量，否则报错。
纯文本查看 复制代码
|
1
2
3
4
5
|
function buildName(firstName: string, lastName: string) { return firstName + " " + lastName;}var result1 = buildName("Bob"); //error, too few parametersvar result2 = buildName("Bob", "Adams", "Sr."); //error, too many parametersvar result3 = buildName("Bob", "Adams"); //ah, just right |
我们在TS中使用?表示可选参数。 例如,我们希望最后一个参数是可选的:
纯文本查看 复制代码
|
1
2
3
4
5
6
7
8
|
function buildName(firstName: string, lastName?: string) { if (lastName) return firstName + " " + lastName; else return firstName;}var result1 = buildName("Bob"); //works correctly nowvar result2 = buildName("Bob", "Adams", "Sr."); //error, too many parametersvar result3 = buildName("Bob", "Adams"); //ah, just right |
可选参数必须遵循必需的参数。 如果我们想让名可选而不是姓,我们需要改变参数在函数的顺序,把名字列表中的最后一个。
在TS中,我们还可以设定一个值,一个可选参数如果用户不提供。 这些被称为缺省参数。 让我们前面的示例和默认的姓“Smith”。
纯文本查看 复制代码
|
1
2
3
4
5
|
function buildName(firstName: string, lastName = "Smith") { return firstName + " " + lastName;}var result1 = buildName("Bob"); //works correctly now, alsovar result2 = buildName("Bob", "Adams", "Sr."); //error, too many parametersvar result3 = buildName("Bob", "Adams"); //ah, just right |
如下为缺省参数，即包含默认值。
纯文本查看 复制代码
|
1
|
function buildName(firstName: string, lastName = "Smith") { |
6、rest参数
纯文本查看 复制代码
|
1
2
3
4
5
|
function buildName(firstName: string, ...restOfName: string[]) { return firstName + " " + restOfName.join(" ");}var employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie"); |
使用...代表一个变量集合。 7、Lambdas和使用“this”this在js中的使用是相当混乱的。通常要根据上下文来判断其含义。
让我们来看一个例子:
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
var deck = { suits: ["hearts", "spades", "clubs", "diamonds"], cards: Array(52), createCardPicker: function() { return function() { var pickedCard = Math.floor(Math.random() * 52); var pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13}; } }}var cardPicker = deck.createCardPicker();var pickedCard = cardPicker();alert("card: " + pickedCard.card + " of " + pickedCard.suit); |
这时候会报错，因为this找不到suits，因为这个时候的this已经不是deck中的this了。
<1>为了解决这个问题,我们切换函数使用lambda表达式语法(()= > { })而不是JavaScript函数表达式。 这将自动捕获创建函数时可用的“this”:
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
|
var deck = { suits: ["hearts", "spades", "clubs", "diamonds"], cards: Array(52), createCardPicker: function() { // Notice: the line below is now a lambda, allowing us to capture 'this' earlier return () => { var pickedCard = Math.floor(Math.random() * 52); var pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13}; } }}var cardPicker = deck.createCardPicker();var pickedCard = cardPicker();alert("card: " + pickedCard.card + " of " + pickedCard.suit); |
<2>使用bind方法[希望我没有理解错]
纯文本查看 复制代码
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
|
var deck = { suits: ["hearts", "spades", "clubs", "diamonds"], cards: Array(52), createCardPicker: function() { return function() { var pickedCard = Math.floor(Math.random() * 52); var pickedSuit = Math.floor(pickedCard / 13); return {suit: this.suits[pickedSuit], card: pickedCard % 13}; } }}var cardPicker = deck.createCardPicker().bind(deck);var pickedCard = cardPicker();alert("card: " + pickedCard.card + " of " + pickedCard.suit); |
更多信息方式,你可以阅读Yahuda卡茨 理解JavaScript函数调用和“this” 。
==================================================
