ES6中this和箭头方法

最新推荐文章于 2022-12-08 23:37:51 发布

最新推荐文章于 2022-12-08 23:37:51 发布 · 287 阅读

文章标签：

#es5 #typescript #javascript #this #arrow #ViewUI

非技术专栏收录该内容

19 篇文章

订阅专栏

本文探讨了TypeScript中this关键字的作用域问题，特别是在复杂的类结构中如何正确处理this指向。通过实例展示了传统方法遇到的问题，并介绍了两种解决方法：使用箭头函数保持this的上下文不变，以及使用bind方法手动绑定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

TypeScript快速入门