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

  

 
posted @ 2019-10-11 10:47  鸣人卷~~  阅读(644)  评论(0编辑  收藏  举报