之前写多页面应用时,一个页面就是全部,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
相关推荐
ES6中新增了箭头函数这种语法,箭头函数以其简洁性和方便获取this的特性。然而,在箭头函数中this的指向却与一般函数定义的函数不同。箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。 箭头...
在上述例子中,传统方法和箭头方法都访问到了`obj`的`name`属性,但传统方法有自己的`this`上下文,而箭头方法没有。 ### 4. arguments对象 箭头函数没有自己的`arguments`对象,如果需要访问函数的参数,需要显式...
在本文中,我们将介绍ES6的学习心得,包括ES6的三种命名方式、箭头函数的介绍和应用、ES6字符串模板、ES6中的for和Array以及扩展运算符等。 一、ES6命名方式 在ES6中,引入了三种命名方式:var、let和const。var是...
在这个例子中,箭头函数内的`this`保持了它在`test`方法中的值,而不是在`setTimeout`回调中变为全局对象。 2. **不支持`new`操作**:由于箭头函数没有`constructor`和`prototype`,因此不能作为构造函数使用,...
JavaScript ES6中的箭头函数是语言的一个重要特性,它提供了更简洁的函数定义方式,简化了代码并改变了`this`的绑定规则。下面将详细介绍箭头函数的语法、注意事项以及其与传统函数的区别。 ### 1. 箭头函数的语法 ...
本文将深入探讨在React中如何理解和处理`this`,以及在ES6类组件中`this`的绑定问题。 首先,`this`在JavaScript中是动态绑定的,它并不受作用域的影响,而是与函数的执行上下文紧密关联。在React中,当我们创建一...
以上是ES6中的核心特性,学习和掌握这些知识点能够帮助开发者编写更现代、更健壮的JavaScript代码。在实际开发中,理解并熟练运用这些特性,可以提高代码质量和开发效率。同时,不断关注和学习新的JavaScript特性和...
`Child`类继承了`Parent`类的所有属性和方法。 4. **继承传递参数**: 子类可以重写父类的构造函数并调用`super`关键字来传递参数,如: ```javascript class Child extends Parent { constructor(name = '...
JavaScript中的箭头函数是ES6(ECMAScript 2015)引入的一个重要特性,为开发者提供了更简洁的函数定义方式。对于初学者来说,箭头函数可能会带来一些混淆,特别是关于括号的使用。这里我们将深入探讨箭头函数的两种...
此外,ES6中还引入了箭头函数,它改善了函数的书写方式,减少了this指向的困扰,并且使得代码更加简洁易读。 ES6还对JavaScript中的类进行了增强,提供了class关键字,但这种面向对象编程的方式存在争议。一方面,...
- **增强的对象字面量(Enhanced Object Literals)**:增加了计算属性名和方法属性简写等特性。 - **模板字符串(Template Strings)**:允许创建多行字符串和字符串内插,使得拼接字符串变得更加容易和直观。 - ...
1. **箭头函数**:箭头函数是ES6中的一种新语法,它使得函数的定义更加简洁。例如,`const add = (x, y) => x + y;`。箭头函数没有自己的`this`值,它会继承外层作用域的`this`,这对于处理回调函数或事件处理程序中...
在彩票系统开发过程中,可以利用类来封装数据和方法,构建出更加清晰的业务模型。例如,可以创建`User`类来表示用户信息,`Lottery`类来表示不同的彩票类型等。 #### 5. 数据结构与算法优化 ES6还引入了新的数据...
箭头函数(Arrow Function)是 ES6 中引入的一种新的函数声明方式,用于简化函数的声明和调用。箭头函数可以自动绑定 this 关键字,避免了传统函数的 this 指向问题。 3. Promise Promise 是 ES6 中引入的一种新的...
在创建对象时,我们可以直接在属性定义中使用计算属性名和方法简写,如 `{[propName]: value, sayHello() {...}}`。 **8. Promise 对象** Promise 是处理异步操作的重要工具,它代表一个可能尚未完成的异步操作的...