Class 中继承父类的时候，this 指向浅析

前言：楼主在REACT中写组件的时候，发现一个case.

　　　　 class Son extends Father {}. 这类例子的时候，在father 中，任何一个地方调用this， this 都可以访问到son中的方法，

　　　　一下子有些惊到， ARE U kidding ME? 不是一直说继承中，父类不能访问子类的访问，只能子类访问父类的方法吗？？？

　　　　这些的年的读简直白读了，越想越想不通，楼主做了下列实验来分析一下这个this. 到底咋回事，真的不看不知道，一看还真有点东西呢？

想不通那就动手干。写了如下例子

class father {
  constructor(props) {
    console.log(this)
  }
  F_say() {
    console.log("i am. Father ")

  }
  F_send() {
    console.log("i am F_sned")
    this.son_send()
  }

}
class son extends father {
  constructor(props) {
    super(props)
  }
  son_say() {
    console.log("i am son ")

  }
  son_send = () => { console.log("son send") }
}

var one = new son();

简单的例子，在fatehr 中打印的this.。

都知道 class 中。箭头函数的作用就等于在

constructor(props) {
    console.log(this)
    this.son_send=this.son_send.bind(this)
  }

1.在Father中 this 是可以访问 son的 son_send的

2.子类中，可以看到箭头函数直接挂在到了实例的属性上，非箭头函数是挂在prototype上的

结果如下：

接下来，我们再把Father 中的函数改为箭头函数，看下挂在在哪里的，

class father {
  constructor(props) {
    console.log(this)
  }
  F_say() {
    console.log("i am. Father ")

  }
  F_send=()=> {
    console.log("i am F_sned")
    this.son_send()
  }

}
class son extends father {
  constructor(props) {
    super(props)
  }
  son_say() {
    console.log("i am son ")

  }
  son_send = () => { console.log("son send") }
}

var one = new son();

View Code

F_send 直接挂到了实例属性上。足上，可以看到在father中的this, 都是指向实例对象的。其实也不难理解。

可以看到。在子类中 ES6要求必须super(props)，这个的意思就是继承父类的所有属性。相当于父类的属性直接挂在this 实例对象上，无论是father 还是son ,

constructor中的this 都是指向实例对象的。 PS：在son 中 可以使用this.F_send() 调用父类的方法，但是 不支持super.F_send()调用（super指向父类的原型对象，只能调用父类的属性和方法）

  constructor(props) {
    super(props)
  }

整个father 的所有箭头函数和constructor 中声明的属性均被挂在了实例对象上。

关于react 组件对于箭头函数的说明：

综上，也就很好理解了为什么可以在父类的方法中通过this 去调用子类的方法了。

本是前端小彩笔，摸索爬行，有理解不对的地方还请各路大神纠正。

Class 中 继承 父类 的时候，this 指向 浅析

Class 中继承父类的时候，this 指向浅析