`

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

TypeScript快速入门

如何用Python爬取网页制作电子书

阅读原文

0
1
分享到:
评论

相关推荐

    关于ES6箭头函数中的this问题

    ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性。然而,在箭头函数中this的指向却与一般函数定义的函数不同。箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。 箭头...

    JS ES6箭头函数

    在上述例子中,传统方法和箭头方法都访问到了`obj`的`name`属性,但传统方法有自己的`this`上下文,而箭头方法没有。 ### 4. arguments对象 箭头函数没有自己的`arguments`对象,如果需要访问函数的参数,需要显式...

    ES6学习笔记.docx

    在本文中,我们将介绍ES6的学习心得,包括ES6的三种命名方式、箭头函数的介绍和应用、ES6字符串模板、ES6中的for和Array以及扩展运算符等。 一、ES6命名方式 在ES6中,引入了三种命名方式:var、let和const。var是...

    ES6中的箭头函数实例详解

    在这个例子中,箭头函数内的`this`保持了它在`test`方法中的值,而不是在`setTimeout`回调中变为全局对象。 2. **不支持`new`操作**:由于箭头函数没有`constructor`和`prototype`,因此不能作为构造函数使用,...

    详解Javascript ES6中的箭头函数(Arrow Functions)_.docx

    JavaScript ES6中的箭头函数是语言的一个重要特性,它提供了更简洁的函数定义方式,简化了代码并改变了`this`的绑定规则。下面将详细介绍箭头函数的语法、注意事项以及其与传统函数的区别。 ### 1. 箭头函数的语法 ...

    深入理解React中es6创建组件this的方法

    本文将深入探讨在React中如何理解和处理`this`,以及在ES6类组件中`this`的绑定问题。 首先,`this`在JavaScript中是动态绑定的,它并不受作用域的影响,而是与函数的执行上下文紧密关联。在React中,当我们创建一...

    ES6_es6_

    以上是ES6中的核心特性,学习和掌握这些知识点能够帮助开发者编写更现代、更健壮的JavaScript代码。在实际开发中,理解并熟练运用这些特性,可以提高代码质量和开发效率。同时,不断关注和学习新的JavaScript特性和...

    ES6中定义类和对象的方法示例

    `Child`类继承了`Parent`类的所有属性和方法。 4. **继承传递参数**: 子类可以重写父类的构造函数并调用`super`关键字来传递参数,如: ```javascript class Child extends Parent { constructor(name = '...

    针对JavaScript(ES6)中的箭头函数详解

    JavaScript中的箭头函数是ES6(ECMAScript 2015)引入的一个重要特性,为开发者提供了更简洁的函数定义方式。对于初学者来说,箭头函数可能会带来一些混淆,特别是关于括号的使用。这里我们将深入探讨箭头函数的两种...

    es6 深入浅出

    此外,ES6中还引入了箭头函数,它改善了函数的书写方式,减少了this指向的困扰,并且使得代码更加简洁易读。 ES6还对JavaScript中的类进行了增强,提供了class关键字,但这种面向对象编程的方式存在争议。一方面,...

    深入浅出ES6

    - **增强的对象字面量(Enhanced Object Literals)**:增加了计算属性名和方法属性简写等特性。 - **模板字符串(Template Strings)**:允许创建多行字符串和字符串内插,使得拼接字符串变得更加容易和直观。 - ...

    阮一峰es6教程文档源码

    1. **箭头函数**:箭头函数是ES6中的一种新语法,它使得函数的定义更加简洁。例如,`const add = (x, y) => x + y;`。箭头函数没有自己的`this`值,它会继承外层作用域的`this`,这对于处理回调函数或事件处理程序中...

    ES6实战彩票系统项目

    在彩票系统开发过程中,可以利用类来封装数据和方法,构建出更加清晰的业务模型。例如,可以创建`User`类来表示用户信息,`Lottery`类来表示不同的彩票类型等。 #### 5. 数据结构与算法优化 ES6还引入了新的数据...

    ES6 入门基础语法总结

    箭头函数(Arrow Function)是 ES6 中引入的一种新的函数声明方式,用于简化函数的声明和调用。箭头函数可以自动绑定 this 关键字,避免了传统函数的 this 指向问题。 3. Promise Promise 是 ES6 中引入的一种新的...

    es6入门.zip

    在创建对象时,我们可以直接在属性定义中使用计算属性名和方法简写,如 `{[propName]: value, sayHello() {...}}`。 **8. Promise 对象** Promise 是处理异步操作的重要工具,它代表一个可能尚未完成的异步操作的...

Global site tag (gtag.js) - Google Analytics