JavaScript之ES6中的class与继承

Posted 你是海上的烟火

tags:

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

参考:https://www.imooc.com/article/17389

https://www.cnblogs.com/chenyangsuaige/p/6130737.html

继承可以实现很好的封装,子类直接对父类的方法进行重用,还可以添加自己的属性和方法。

原型对象prototype是类的唯一标识符,类的继承是基于prototype的。

es5中类的继承

//es5 类的继承四部曲
//1、创建父类
function Parent(name){
    this.name = name;
}
Parent.prototype.location = "earth";
Parent.prototype.getName = function(){
    console.log(this.name);
}
//2、创建子类
function Son(name,age){
    Parent.call(this,name);//子类调用父类的构造函数
    this.age = age;
}
//3、创建继承,子类的原型对象是父类的一个实例
Son.prototype = new Parent();//这里Son.prototype._proto_=Parent.prototype,Son.prototype.constructor=Parent
//修正子类的constructor
Son.prototype.constructor = Son;
//4、添加子类成员
Son.prototype.id = 123;
Son.prototype.getAge = function(){
  console.log(this.age);
}

//创建一个实例
var student1 = new Son(\'asd\',\'11\');
student1.getName();//asd,继承自父类的方法
student1.getAge();//11,子类自己的方法

es6中类的继承

//es6中class与继承

//创建父类
class Parent{
    constructor(name){
        this.name = name;
    }//!!!注意,这里没有逗号
    getName(){
        console.log(this.name);
    }
}
//子类继承自父类 class Son extends Parent{ constructor(name,age){ super(name);//super指向父类的实例对象,调用父类的constructor,必须先调用super方法,子类才能使用this this.age = age;//子类继承父类的this对象并修改 } getName(){ super.getName();//调用父类的方法 console.log(\'son\'); } }

注意:

1、es6类中只能定义constructor属性和方法,方法全部定义在类的prototype中,且方法不可枚举;

2、es6中类的constructor属性相当于es5中的构造函数,如果没有定义constructor属性,默认会添加一个空的constructor;

3、es5中,继承是子类先创建自己的实例对象this,然后通过Parent.call(this)或Parent.apply(this)调用父类的方法;es6中,继承是父类先创建自己的实例对象this,然后子类继承父类的this,在子类的constructor中修改this。

以上是关于JavaScript之ES6中的class与继承的主要内容,如果未能解决你的问题,请参考以下文章

ES6中的CLASS继承

ES6-18:class类及其继承

JavaScript ES5继承ES6 class继承

ES6新特性:使用新方法定义javascript的Class

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

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