ES6 class类的继承

类的继承：extends关键字用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类。

extends关键字用来创建一个普通类或者内建对象的子类。

一、继承一个类：

class Foo { constructor(){ this.a = 1; } func1(){ console.log("func1"); } } class Bar extends Foo{ constructor(){ super(); this.b = 2; } func2(){ console.log("func2"); } } var bar = new Bar(); console.log(bar);

 

拓展一个内置对象：

class myDate extends Date{ constructor(){ super(); this.name = "myDate"; } func(){ console.log("拓展内置对象Date"); } } var date = new myDate(); console.log(date,date.name);Wed Jul 01 2020 14:31:36 GMT+0800 (中国标准时间) "myDate" date.func() 拓展内置对象Date

二、super方法

必须在constructor中先执行super方法，必须将super方法执行写在constructor最前面

以下的代码会报错，当创建bar新的对象的时候，执行new Bar()时，会报错。this是undefined。

class Foo { constructor(){ this.a = 1; } func1(){ console.log("func1"); } } class Bar extends Foo{ constructor(){ this.c = 3; 报错：this是undefined super(); this.b = 2; } func2(){ console.log("func2"); } } var bar = new Bar();

子类继承父类的静态方法

class Foo { constructor(){ this.a = 1; } static func(){ console.log("father static function") } func1(){ console.log("func1"); } } class Bar extends Foo{ constructor(){ super(); this.b = 2; this.c = 3; } func2(){ console.log("func2"); Bar.func();//子类可以继承父类的静态方法func } } var bar = new Bar(); console.log(bar); Bar {a: 1, b: 2, c: 3} bar.func2(); 执行func2函数，又执行了func函数

也可以继承静态属性：静态属性设置写在子类前，或子类后都是可以，但是一定要在实例对象创建前。

class Foo { constructor(){ this.a = 1; } static func(){ console.log("father static function") } func1(){ console.log("func1"); } } class Bar extends Foo{ constructor(){ super(); this.b = 2; this.c = 3; } func2(){ console.log(Bar.prop); } } Foo.prop = "static prop"; var bar = new Bar(); console.log(bar); bar.func2(); 打印：static prop

三、先理解《class类的深入理解》文章的例子，下面实例中，新建的类Bar继承Foo类

let myName = "zhu"; class Foo{ name = myName; constructor(x,y){ this.a = x; this.b = y; var c = "2222"; this.getFooP = Foo.p; } sum(){ Foo.q = "Foo类可以用在方法中" console.log(this.a+this.b); } static f1(){ return "类Foo的静态方法" } get prop(){ return this.a; } set prop(value){ this.a = value; } } Foo.p = "静态属性"; Foo.f2 = function(){ return "类Foo的静态方法" } let foo = new Foo(1,2); console.log(foo); class Bar extends Foo{ constructor(a,b){ super(a,b); this.d = "100"; } fun1(){ return "fun1"; } } let bar = new Bar(10,20); console.log(bar);

结果：

子类Bar继承了父类Foo的静态方法和属性。

总结：

（1）实例对象bar得到父类的实例对象foo属性和方法。即constructor的this内容和Foo类结构体内的属性

（2）在bar对象的原型Bar.prototype上继承了Foo类的原型Foo.prototype

（3）子类Bar继承了父类Foo的静态方法和属性。