开发者社区> durban> 正文

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

简介: 转载 TypeScript基础入门 - 函数 - this(一) 项目实践仓库 https://github.com/durban89/typescript_demo.git tag: 1.2.2 为了保证后面的学习演示需要安装下ts-node,这样后面的每个操作都能直接运行看到输出的结果。
+关注继续查看

转载

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
【Android开发】小白入门必看的”四框“使用教程,你学废了嘛?
【Android开发】小白入门必看的”四框“使用教程,你学废了嘛?
5 0
Android数据库开发基础入门【附完整案例】
Android数据库开发基础入门【附完整案例】
5 0
Android Studio配置夜神模拟器异常解决
Android Studio配置夜神模拟器异常解决
3 0
【Android开发】 ListView使用实战详解,你get到了嘛?
【Android开发】 ListView使用实战详解,你get到了嘛?
5 0
深入剖析Android中最简单的数据存储方式:SharedPreferences
深入剖析Android中最简单的数据存储方式:SharedPreferences
4 0
值得白嫖的数据库常用操作语句汇总(数据排序、数据查询)
值得白嫖的数据库常用操作语句汇总(数据排序、数据查询)
5 0
Android 架构MVC MVP MVVM+实例(下)
实例 MVC实例 代码结构 1.在layout创建一个布局文件 2.实体类(User) 3.MVCLoginActivity MVP实例 代码结构 1.Model层 2.Presenter层 3.View层 MVVM实例 1.Model层 2.ViewModel层 3.View层 实例传送门
4 0
值得白嫖的数据库常用操作语句汇总(数据库、数据表、数据操作)
值得白嫖的数据库常用操作语句汇总(数据库、数据表、数据操作)
4 0
数据库“三大范式”及“事务性”详解
数据库“三大范式”及“事务性”详解
6 0
+关注
durban
无风不起浪,浪起来
58
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载