TypeScript基础入门 - 函数 - this(一)

转载

TypeScript基础入门 - 函数 - this(一)

项目实践仓库

https://github.com/durban89/typescript_demo.git
tag: 1.2.2

为了保证后面的学习演示须要安装下ts-node，这样后面的每一个操做都能直接运行看到输出的结果。

npm install -D ts-node

后面本身在练习的时候能够这样使用

npx ts-node 脚本路径

函数

this

学习如何在JavaScript里正确使用this就比如一场成年礼。 因为TypeScript是JavaScript的超集，TypeScript程序员也须要弄清 this工做机制而且当有bug的时候可以找出错误所在。 幸运的是，TypeScript能通知你错误地使用了 this的地方。 若是你想了解JavaScript里的 this是如何工做的，那么首先阅读Yehuda Katz写的Understanding JavaScript Function Invocation and "this"。 Yehuda的文章详细的阐述了 this的内部工做原理，所以这里只作简单介绍。

this和箭头函数

JavaScript里，this的值在函数被调用的时候才会指定。 这是个既强大又灵活的特色，可是你须要花点时间弄清楚函数调用的上下文是什么。 但众所周知，这不是一件很简单的事，尤为是在返回一个函数或将函数当作参数传递的时候。

下面看一个例子：

let deck = {
    suits: [
        'hearts',
        'spades',
        'clubs',
        'diamods'
    ],
    cards: Array(52),
    createCardPicker: function () {
        return function () {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return {
                suit: this.suits[pickedSuit], card: pickedCard % 13,
            }
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
console.log("card: " + pickedCard.card + " of " + pickedCard.suit);

能够看到createCardPicker是个函数，而且它又返回了一个函数。 若是咱们尝试运行这个程序，会获得以下相似错误提示

$ npx ts-node src/function_4.ts
Cannot read property '2' of undefined

由于 createCardPicker返回的函数里的this被设置成了window而不是deck对象。 由于咱们只是独立的调用了 cardPicker()。 顶级的非方法式调用会将 this视为window。 （注意：在严格模式下， this为undefined而不是window）。为了解决这个问题，咱们能够在函数被返回时就绑好正确的this。 这样的话，不管以后怎么使用它，都会引用绑定的'deck'对象。 咱们须要改变函数表达式来使用ECMAScript 6箭头语法。 箭头函数能保存函数建立时的 this值，而不是调用时的值：

let deck = {
    suits: [
        'hearts',
        'spades',
        'clubs',
        'diamods'
    ],
    cards: Array(52),
    createCardPicker: function() {
        return () => {
            let pickedCard = Math.floor(Math.random() * 52);
            let pickedSuit = Math.floor(pickedCard / 13);

            return {
                suit: this.suits[pickedSuit],
                card: pickedCard % 13,
            }
        }
    }
}

let cardPicker = deck.createCardPicker();
let pickedCard = cardPicker();
console.log("card: " + pickedCard.card + " of " + pickedCard.suit);

运行后获得的结果以下

$ npx ts-node src/function_4.ts
card: 10 of hearts

TypeScript会警告你犯了一个错误，若是你给编译器设置了--noImplicitThis标记。 它会指出 this.suits[pickedSuit]里的this的类型为any。

本实例结束实践项目地址

https://github.com/durban89/typescript_demo.git
tag: 1.2.3