ES6中this和箭头方法

作者: 孙亖 | 来源:发表于2018-01-22 13:42 被阅读52次

之前写多页面应用时,一个页面就是全部,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

TypeScript快速入门 如何用Python爬取网页制作电子书

阅读原文

相关文章

  • VUE使用axios数据请求时报错 TypeError: Can

    用ES6箭头函数,箭头方法可以和父方法共享变量

  • ES6中this和箭头方法

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

  • ES6新特性5:函数的扩展之箭头函数

    箭头函数在ES6中最常用的特性,学习好至关重要,特别在Vue项目和React项目。 箭头函数:ES6中使用(=>)...

  • 解析ES6箭头函数中的this

    ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性,接下来通过本文给大家分享ES6箭头函数...

  • axios TypeError: Cannot set prop

    解决办法: 1、用ES6箭头函数,箭头方法可以和父方法共享变量 2、在请求axios外面定义一下 var that...

  • Vue中的watch监听、computed计算属性、filter

    记录我在使用watch时常用的方法 1、watch监听 注意:ES6中推出了箭头函数,上述例子未使用箭头函数,如果...

  • ES6箭头函数简介

    @(JS技巧)[ES6|箭头函数] ES6箭头函数(Arrow Functions) ES6可以使用“箭头”(=>...

  • 箭头函数

    一、函数的定义方式 1、function 2、对象字面量中定义函数 3、ES6中的箭头函数 二、箭头函数参数和返回...

  • 手写实现call,apply,bind

    js中改变this指向的方法: call、apply、bind、以及ES6的箭头函数面试中不乏被问到这几个方式,如...

  • 箭头函数

    1,箭头函数定义 2,Es6 中箭头函数参数与返回值简写 补充 3,箭头函数中 this 指向 注:箭头函数中的t...

网友评论

    本文标题:ES6中this和箭头方法

    本文链接:https://www.haomeiwen.com/subject/afulaxtx.html