类中的箭头函数

4ab7f73617a841557d74e349b9c870c7.png

类中的箭头函数 this 等于实例

class Person {
  constructor () {
    this.name = '章三'
  }
  handleClick1 = () => {
    console.log(this.name)
    return this
  }
  handleClick2 () {
    console.log(this.name)
    return this
  }
}


let person = new Person()
console.log(person.handleClick1() === person) // true
console.log(person.handleClick2() === person) // true

我们发现上面代码中普通函数和箭头函数没什么区别,函数中的 this 都指向实例,但是我们再看看下面的代码。

class Person {
  constructor () {
    this.name = '章三'
  }
  handleClick1 = () => {
    console.log(this.name)
    return this
  }
  handleClick2 () {
    console.log(this.name)
    return this
  }
}


let person = new Person()
let { handleClick1, handleClick2 } = person
console.log(handleClick1() === person) // true
console.log(handleClick2() === person) // false

我好像理解了,又好像不理解。。。请听我细细道来!

类的方法内部如果含有 this,它默认指向类的实例。但是,必须非常小心,一旦单独使用该方法,很可能报错。

上面代码中,handleClick2 方法中的 this,默认指向 Person 类的实例。但是,如果将这个方法提取出来单独使用,this 会指向该方法运行时所在的环境(由于 class 内部是严格模式,所以 this 实际指向的是 undefined),从而导致找不到 name 属性而报错。

一个比较简单的解决方法是,在构造方法中绑定 this,这样就不会找不到 name 属性了。另一种解决方法是使用箭头函数,如 handleClick1 的写法。

在 handleClick1 函数中,箭头函数内部的 this 总是指向定义时所在的对象。上面代码中,箭头函数位于类内部,类本身就指向构造函数。这时,箭头函数所在的运行环境,肯定是实例对象,所以 this 会总是指向实例对象。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值