JavaScript、ES6中的类的继承

类的继承

extends  connstructor  super

例1：

       class Father {
            constructor(){}
            money(){
                console.log("10000块");
            }
        }
        // 子类Son使用 extends 继承父类Father
        class Son extends Father {}
        var ss = new Father();
        ss.money();
        // 10000块

例2：

        class Fa {
            constructor(x, y){
                this.x = x;
                this.y = y;
            }
            sum(){
                var su = this.x + this.y;
                console.log(su);
            }
        }
        class Son extends Fa{
            constructor(x, y){ // constructor用于存放类的共有属性
                this.x = x;
                this.y = y;
            }
        }
        var son = new Son(1, 2);
        son.sum();
        // 输出：Uncaught ReferenceError: Must call super constructor in derived 
        class before accessing 'this' or returning from derived constructor

原因：

    实例对象son中的参数(1,2)其实是指向子类Son中的constructor(x,y) 并非 父类Fa中的constructor(x,y) 所以无法使用sum()方法。

改进：

   super关键字 用于访问和调用父类上的构造函数。可以调用父类的构造函数，也可以调用父类的普通函数。

        class Fa {
            constructor(x, y){
                this.x = x;
                this.y = y;
            }
            sum(){
                var su = this.x + this.y;
                console.log(su);
            }
        }
        class Son extends Fa{
            constructor(x, y){ 
                super(x, y);// 调用了父类的构造函数constructor
            }
        }
        var son = new Son(1, 2);
        son.sum();
        // 3

　　扩展：super关键字调用父类的普通函数

例1：

class Fa{
    say(){
        return '父类';
    }
}
class Son extends Fa{
    say(){
        console.log('子类');
    }
}
var son = new Son();
son.say()
// 子类 

用super关键字调用父类的普通函数

class Fa{
    say(){
        return '父类';
    }
}
class Son extends Fa{
    say(){
        console.log(super.say() + "的子类");
    }
}
var son = new Son();
son.say()
// 父类的子类

例2：

子类继承父类方法的同时 扩展减法方法

class Fa {
    constructor(x, y){
        this.x = x;
        this.y = y;
    }
    sum(){
        var su = this.x + this.y;
        console.log(su);
    }
}
class Son extends Fa{
    constructor(x, y){ 
        // 利用super调用父类的构造函数
        // super 必须在子类this之前调用
        super(x, y);
        this.x = x;
        this.y = y;
       
    }
    // 减法方法
    subtract(){
        console.log(this.x - this.y);
    }
}
var son = new Son(5,3);
son.subtract();// 2
son.sum();     // 8