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 中的函数 改为箭头函数,看下挂在在哪里的,
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
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();
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 去调用子类的方法了。
本是前端小彩笔,摸索爬行,有理解不对的地方还请各路大神纠正。