ES6知识整理(10)--class的继承

Posted wuhairui

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6知识整理(10)--class的继承相关的知识,希望对你有一定的参考价值。

(这是es6的第10篇文章。说真的这样的总结之后虽然直观了许多,但是消耗的时间有点长,或许是知识比较复杂的原因吧)

技术分享图片


类的继承


有个A类,B类继承A类,那B类实例就可以使用A类实例的所以属性和方法。不包括静态属性和方法

技术分享图片

super函数


super函数:只能用在子类中

B类继承与A类,取得父类的this。B类就可以在A类的基础上加入新的属性或方法了。

技术分享图片

constructor中的super可以继承属性后添加新属性,子类的constructor中必须加super

方法中的super可以继承方法后继续执行下面的语句


所以结果:

技术分享图片


这2种写法B类是一样的

技术分享图片


instanceof 判断对象是否属于该类:

父对象a不属于子类B,子对象b属于父类A。

技术分享图片

从子类中获取父类


Object.getPrototypeOf():

得出B类是否继承于A类

技术分享图片

super关键字


使用时可以是函数,也可以对象

作为函数,用于子类声明this

技术分享图片


作为对象时,子类方法中使用,用于调用父类方法

技术分享图片


p是undefined,父类实例属性无法通过super对象直接调用,

f是1,父类实例方法可以通过super对象直接调用

技术分享图片


如果属性在父类的原型对象上,那super对象可以取到:

x属性在A类.prototype上,所以super可以取到

技术分享图片


super调用父类方法时,super绑定子类this:

super.f()时,f()是父类方法,但x已被子类改变,所以是2

技术分享图片


静态方法中的super对象,进的是父类的静态方法

实例(原型对象)方法中的super对象,进的是父类的实例方法

技术分享图片


类的prototype属性与proto属性


技术分享图片

而Object.setPrototypeOf的实现方法时这样的。

技术分享图片

因此:

技术分享图片

extends继承目标


A类继承Object类:

技术分享图片

A无继承:

技术分享图片

实例的proto属性


子类的原型的原型,就是父类的原型

原生类(构造函数)的继承

以Image为例:

技术分享图片

new子类实例后,结果:

技术分享图片



技术分享图片

一句:接纳自己才能真正做回自己。想让别人喜欢自己就要先自己喜欢自己。


----公众号:海瑞菌

技术分享图片

以上是关于ES6知识整理(10)--class的继承的主要内容,如果未能解决你的问题,请参考以下文章

ES6 中的继承

ES6知识点整理之----Generator----其他

ES6 Class 基础语法

ES6中的CLASS继承

JavaScript高级class类ES6实现继承ES6对象增强

JavaScript高级class类ES6实现继承ES6对象增强