ES6 class类的继承

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

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

`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);

![20200701141254565.png][]

**拓展一个内置对象：**

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类**

**结果：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

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

![20201109160721887.png][]

### **总结：** ###

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

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

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

[Link 1]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/class
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/class
[20200701141254565.png]: https://img-blog.csdnimg.cn/20200701141254565.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201109155805143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw,size_16,color_FFFFFF,t_70
[20201109160721887.png]: https://img-blog.csdnimg.cn/20201109160721887.png