JavaScript拓展--ES6的继承详解

目录

        ES6定义类

        ES6继承

        ES6继承和ES5继承区别

---

        在之前我们已经分析总结过ES5的继承，这里讲讲ES6中不同的继承方式：

ES6定义类

        通过前面的博客总结我们知道ES5中定义类是通过构造函数实现的，那么ES6中定义类是如何实现的呢？

        定义方法：

class 类名{
    constructor([参数]){  //构造方法：用以初始化对象成员
        //方法体
    }
}

        ES6中定义类通过class关键字来定义一个类，类中定义constructor()构造方法来初始化对象成员，可以定义属性和方法，例如：

//定义类
class person{
    constructor(name){
        this.name = name;  //类中定义属性
    }
    get(){   //类中定义方法
        console.log("姓名:",this.name);
    }
}
//创建对象
var p1 = new person("小明");  //创建对象p1
p1.get();  //姓名: 小明

ES6继承

        ES6中的继承就是通过类来实现的，通过class定义父类和子类，子类通过extends继承父类，通过super关键字访问和调用对象在父类上的方法(可以调用父类的构造方法，也可以调用父类的普通方法)

//定义父类
class Parent{
    constructor(name,gender){
        this.name = name;
        this.gender = gender;
    };
    get(){
        console.log("姓名：",this.name);
        console.log("性别：",this.gender);
    }
}
class Child extends Parent{
    constructor(name,gender,age){
        super(name,gender);  //super必须在子类的this之前调用
        this.age = age;
    }
    disp(){
        console.log("年龄：",this.age)
    }
    change(){
        console.log(this.name+'的性别是'+this.gender,'今年'+this.age)
    }
}

var c1 = new Child('小红','女',20);
c1.get();  //姓名： 小红  性别： 女
c1.disp(); //年龄： 20
c1.change(); //小红的性别是女 今年20

        通过上例我们可以发现子类继承了父类的属性和方法，那么父类能不能使用子类的方法呢？我们可以测试一下：

var p1 = new Parent('张三','男',45);
p1.get(); //姓名： 张三  性别： 男
p1.disp(); //TypeError: p1.disp is not a function

        很显然，父类不能调用子类的属性和方法，也就是说子类的变化不会影响到父类。 

ES6继承和ES5继承区别

        1.ES5中的构造函数是一个普通函数，可以使用new关键字调用，也可以直接调用；ES6中的class不能当作普通函数直接调用，必须使用new关键字调用

        2.ES5中的原型方法和静态方法默认可枚举，class的默认不可枚举，若想要获取不可枚举属性，可以使用Object.getOwnPropertyNames方法

        3.ES5的继承，实质是先创造子类的实例对象this，再执行父类的构造函数向其添加实例方法和属性(也可不执行)。而ES6的继承机制是先创造父类的实例对象this，再用子类的构造函数修改this

        4.ES6中，class不存在变量提升，父类必须在子类前定义