TypeScript基础入门 - 函数 - this(三)
转载
TypeScript基础入门 - 函数 - this(三)
项目实践仓库
https://github.com/durban89/typescript_demo.git tag: 1.2.4
为了保证后面的学习演示需要安装下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参数在回调函数里
继续上篇文章【TypeScript基础入门 - 函数 - this(二)】
我们也看到过在回调函数里this报错的情况,当你将一个函数传递到某个库函数里稍后会被调用时。 因为当回调被调用的时候,它们会被当成一个普通函数调用, this将为undefined。 稍做改动,你就可以通过 this参数来避免错误。 首先,库函数的作者要指定 this的类型,如下实例
interface UIElement { addClickListener(onclick: (this: void, e: Event) => void): void; }
this: void表示addClickListener期望onclick是一个不需要此类型的函数。
其次,用这个注释你的调用代码,如下所示
interface UIElement { addClickListener(onclick: (this: void, e: Error) => void): void; } class Handler { info: string; onClickBad(this: Handler, e: Error) { // oops, used this here. using this callback would crash at runtime this.info = e.message; } } let h = new Handler(); let uiElement: UIElement = { addClickListener(onclick: (this: void, e: Error) => void) { // do something } }; uiElement.addClickListener(h.onClickBad); // 这里会报错
指定了this类型后,显式声明onClickBad必须在Handler的实例上调用。 然后TypeScript会检测到 addClickListener要求函数带有this: void。 我们添加另外一个函数做下对比,如下
interface UIElement { addClickListener(onclick: (this: void, e: Error) => void): void; } class Handler { info: string; onClickBad(this: Handler, e: Error) { this.info = e.message; } onClickGood(this: void, e: Error) { console.log('点击了!'); } } let h = new Handler(); let uiElement: UIElement = { addClickListener(onclick: (this: void, e: Error) => void) { // do something } }; uiElement.addClickListener(h.onClickGood);
通过将h.onClickBad更换为h.onClickGood,就能正常调用。
因为onClickGood指定了this类型为void,因此传递addClickListener是合法的。 当然了,这也意味着不能使用 this.info. 如果你两者都想要,你不得不使用箭头函数了,如下
interface UIElement { addClickListener(onclick: (this: void, e: Error) => void): void; } class Handler { info: string; onClickGood = (e: Error) => { this.info = e.message } } let h = new Handler(); let uiElement: UIElement = { addClickListener(onclick: (this: void, e: Error) => void) { // do something } }; uiElement.addClickListener(h.onClickGood);
这是可行的因为箭头函数不会捕获this,所以你总是可以把它们传给期望this: void的函数。 缺点是每个 Handler对象都会创建一个箭头函数。 另一方面,方法只会被创建一次,添加到 Handler的原型链上。 它们在不同 Handler对象间是共享的。
本实例结束实践项目地址
https://github.com/durban89/typescript_demo.git tag: 1.2.5
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
【JAVA秒会技术之秒杀面试官】JavaEE常见面试题(一)
1.Struts2中,Action通过什么方式获取用户从页面输入的数据,又是通过什么方法把数据传给视图层显示的? 答:(1)Action从页面获取数据的方式有三种: ①通过Action属性接收参数;(例:${pageContext.request.contextPath}/***.action? id=xxxx) ②通过域模型获取参数;(例:ServletActionContext.getRequest().getParameter(arg0)) ③通过模型驱动获取参数(例:extends ModelDriven) (2)Action将数据存入值栈(Value Stack)中,视图可以通过表达式语言(EL)从值栈中获取; 2.阐述Struts2中的Action如何编写,是否采用单例? 答:(1)Struts2的Action有三种写法: ①POJO类——无继承无实现; ②实现Action接口,重写execute()方法; ③继承ActionSupport(常用); (2)Action没有像Servlet一样,使用单实例...
- 下一篇
【java SOAP】对SOAP的一个个人印象
开这个坑源于我现在做的一个项目用到了SOAP。关于SOAP的知识我就不做详细介绍了。我也没有开发过SOAP服务端, 只是要用到客户端。 作为一个意识流选手,我大概说一下我工作过程中对SOAP的印象。 1、 SOAP的出现是为了解决跨平台的问题。比如java调用一个c#或者php写的服务 2、 数据传输是基于xml的。上一点说到是为了解决跨平台的问题,但是很蛋疼的是,并没有很严格的标准去规定xml的数据格式。导致这个标准并不是唯一的。这就非常操蛋了。逆向生成的代码经常没用,甚至使用逆向工具的时候偶尔还会报错(我这个项目还有一点别的原因)。 3、我用Eclipse根wsdl生成的客户端访问SOAP服务特别慢。而且并不是服务端的问题。我用 TCP Monitor 截获了请求,数据返回特别快20ms左右,但是客户端把返回数据处理成相应的bean特别慢。导致整个调用花费了1分钟 4、有很多手写客户端的办法。但是我觉得都太麻烦了。而且像Axis2我不知道为什么从Maven下载依赖下不下来,javax有一个对soap的支持,但是在一些java版本移来移去,java8是有的,java9就移除了。 5、...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- CentOS8编译安装MySQL8.0.19
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS6,CentOS7官方镜像安装Oracle11G