脚本宝典收集整理的这篇文章主要介绍了JS之理解ES6 继承extends,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
理解ES6继承extends
1.在es6
中对继承有了更友好的方式。在下面的继承中那到底在extends
的时候做了什么,super()
又是代表什么意思。@H_304_11@
class PEople{
constructor(name, age) {
this.name = name;
this.age = age;}
say(){
alert("hello")}
static see(){
alert("how are you")}}
class lily extends People{
constructor(){
super()}
goodbye(){alert("goodbye")}}
2.解析extends
和super()
①在前面的文章中有提及class
声明类的原理:https://segmentfault.com/a/11...
-
②lily
是People
的子类,首先lily
也是一个类;extends
的过程中创建了一个自执行函数,并将父类传进去,继承父类之后再返回该子类。lily.__PRoto__
指的是当前对象所属类的原型,也就是Object.getPrototypeOf(lily)
.
VAR lily = function(_People) {
inherITs(lily, _People); //第一步,继承父类原型
function lily() { //第二步,继承父类对象属性
return _possibleConstructorReturn(this, (lily.__proto__ || Object.getPrototypeOf(lily)).call(this));}
createClass(lily, [{ //第三步,创建子类自己的方法
key: "goodbye",
value: function goodbye() {
alert("goodbye");}}]);
return lily;
}(People);
-
③继承的过程:一般继承分两步,call
继承+原型的继承 (分别继承父类对象属行和原型属性)
-
第一步:继承父类的原型,通过Object.create
,第一个参数是创建一个对象的原型,定义原型上的属性@L_777_10@ructor
指向subclass
;把父类的原型方法继承给子类原型;
function inherits(subClass, superClass) {
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
-
第二步:call
继承,就是super()
的处理过程,super()
的实质就是People.call(this)
;把父类的对象方法继承给子类对象;这也是为什么在es6
的继承时必须要加上super()
,因为不加的话无法继承到父类的对象属性。
function _possibleConstructorReturn(self, call) {
//call指的是Object.getPrototypeOf(lily)).call(this),也就是People.call(this)
return call && (typeof call === "object" || typeof call === "function") ? call : self;
第三部:创建子类自己的方法。 可以参考class里面的实现过程。
总的来说es6
的extends
的实质和以前的继承方式是一致 的,但是有了更好的,更清晰的表现形式。
以上是脚本宝典为你收集整理的JS之理解ES6 继承extends全部内容,希望文章能够帮你解决JS之理解ES6 继承extends所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。