ES6 class类的继承-蒲公英云

ES6 class类的继承

桃扇骨 2023-02-22 03:53 198阅读 0赞

类的继承：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);