Js中的this
指向出错是开发中比较常见的错误,幸运的是,在typescript中使用this
时,当出现错误它能够立即给你错误提示。
以官网的示例为例
let deck = {
suits: ['hearts', 'spades', 'clubs', 'diamonds'],
cards: Array(52),
createCardPicker() {
return function() {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
};
}
};
这里createCardPicker
返回的匿名函数的this
其实指向的是window
(在严格模式下为undefined
)。在typescript中,它会提示你this
具有隐式类型any
。所以,为了保证this
的指向正确,可以将createCardPicker
中的function
更换成箭头函数。
let deck= {
// ...
createCardPicker() {
return () => {
// ...
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
};
}
};
我们,还可以在函数参数的第一个参数指定this
属于哪一个对象下,指定this
为固定的对象。
interface Card {
suit: string;
card: number;
}
interface Deck {
suits: string[];
cards: number[];
createCardPicker(this: Deck): () => Card;
}
let deck: Deck = {
suits: ['hearts', 'spades', 'clubs', 'diamonds'],
cards: Array(52),
createCardPicker(this: Deck) {
return () => {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
};
}
};
那么,这里的this
确定是Deck
对象并且也只能是Deck
对象,当其他对象调用就会给出错误提示。
既然这样,我们还可以createCardPicker
提出到外面成一个单独的函数。
function createCardPicker(this: Deck): () => Card {
return () => {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return { suit: this.suits[pickedSuit], card: pickedCard % 13 };
};
}
let deck: Deck = {
suits: ['hearts', 'spades', 'clubs', 'diamonds'],
cards: Array(52),
createCardPicker
};
我们也可以将this
声明为void
,表示方法中不能使用this
。
function createCardPicker(this: void) {
return () => {
// 报错: 类型“void”上不存在属性“name”。
this.name = 'leevare';
};
}
总结
在Typescript中,只能在function的第一个参数添加this
约束,对this
进行约束后,则表示只能在约束的对象上调用,否则将会出错。
如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!
如无特殊声明,文章均为原创,若有不正之处,万望告知。转载请附上原文地址,十分感谢!