ES6中this和箭头方法

之前写多页面应用时,一个页面就是全部,this常常默认是全局对象,但this的正确理解不限于此,特别是大型复杂结构的脚本。 例如:

export class ThisScope {
    txt:string = "hello this scope"
    cf1 () {
        return function() {
            this.showInfo()
        }
    }

    showInfo() {
        console.log(this.txt)
    }
}

当我们调用cf1方法时,出现错误:

> Uncaught TypeError: Cannot read property 'showInfo' of undefined
    at ThisScope.ts:5
    at Object.defineProperty.value (main.ts:11)
    at __webpack_require__ (bootstrap 87e8701…:19)
    at Object.defineProperty.value (bootstrap 87e8701…:62)
    at bootstrap 87e8701…:62

传统形式的代码中,回调函数常常用到,这个时候的this就容易分不清。

ECMAScript 6 箭头语法为我们提供了一个工具,箭头函数能保存函数创建时的 this值,而不是调用时的值:

例如:

export class ThisScope {
    txt:string = "hello this scope"
    cf1() {
        return function() {
            this.showInfo()
        }
    }

    cf2() {
        return () => {this.showInfo()}
    }

    showInfo() {
        console.log(this.txt)
    }
}

上面cf2使用了箭头语法,这个时候我们的this就是函数创建时的值。

另外一种方式是使用bind,例如:

export class ThisScope {
    txt:string = "hello this scope"
    cf1() {
        return function() {
            this.showInfo()
        }
    }

    cf2() {
        return () => {this.showInfo()}
    }

    cf3() {
        return function() {
            this.showInfo()
        }.bind(this)
    }

    showInfo() {
        console.log(this.txt)
    }
}

上面cf3,我们手动绑定this为创建时的值。

更过内容,欢迎加入TypeScript 快速入门 的Chat

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏电光石火

Java实现Http的Post、Get、代理访问请求

Java实现Http的访问请求。包含基本的Get访问、Post访问。Post包含使用代理模式访问

2247
来自专栏岑玉海

Spark源码系列(三)作业运行过程

作业执行 上一章讲了RDD的转换,但是没讲作业的运行,它和Driver Program的关系是啥,和RDD的关系是啥? 官方给的例子里面,一执行collect方...

3044
来自专栏电光石火

Java实现Http的Post、Get、代理访问请求

Java实现Http的访问请求。包含基本的Get访问、Post访问。Post包含使用代理模式访问 package com.nit.utils; imp...

3157
来自专栏Android 开发学习

JsBridge 源码分析

1653
来自专栏Flutter入门

Weex是如何在Android客户端上跑起来的

Weex可以通过自己设计的DSL,书写.we文件或者.vue文件来开发界面,整个页面书写分成了3段,template、style、script,借鉴了成熟的MV...

4015
来自专栏一名合格java开发的自我修养

MapReduce中map并行度优化及源码分析

  一个job的map阶段并行度由客户端在提交job时决定,而客户端对map阶段并行度的规划的基本逻辑为:将待处理数据执行逻辑切片(即按照一个特定切片大小,将待...

972
来自专栏大内老A

为ASP.NET MVC创建一个基于Unity的ControllerFactory

谈到IoC和ASP.NET的集成,很多人会先后想到Ninject,不过我们个人还是倾向于Unity。这篇文章简单地介绍如果创建基于Unity的Controlle...

1927
来自专栏LhWorld哥陪你聊算法

Hadoop源码篇--Client源码

今天起剖析源码,先从Client看起,因为Client在MapReduce的过程中承担了很多重要的角色。

1653
来自专栏刘望舒

LeakCanary看这一篇文章就够了

LeakCanary是Square公司基于MAT开源的一个内存泄漏检测工具,在发生内存泄漏的时候LeakCanary会自动显示泄漏信息。

1.3K5
来自专栏大数据学习笔记

Hadoop-2.7.3源码分析:MapReduce作业提交源码跟踪

1、提交Job MapReduce程序框架请参考 http://blog.csdn.net/chengyuqiang/article/details/728...

3237

扫码关注云+社区

领取腾讯云代金券