ES6 Class类的继承

引用菜鸟教程的一句话

在ES6中，class (类)作为对象的模板被引入，可以通过 class 关键字定义类。

class 的本质是 function。

它可以看作一个语法糖，让对象原型的写法更加清晰、更像面向对象编程的语法。

下面我们来看示例

1.我们首先去新建一个父类 Person,有三个属性值，分别是 name，age，like，有一个方法getMsg

class Person {
        // 构造函数，必选
        constructor({
            name,
            age,
            like
        }) {
            this.name = name;
            this.age = age;
            this.like = like;
        }
        // 原型中的方法
        getMsg() {
            console.log(`${this.name}今年${this.age}了，${this.like?'喜欢':'不喜欢'}打游戏`)
        }
    }
    let p1 = new Person({
        name: "小红",
        age: 14,
        like: false
    });
    console.log(p1);
    p1.getMsg();

而后我们new了一个对象p1,我们可以在控制上打印打印p1是什么，如下图

我们可以看到，p1中包含了三个属性值，在原型上挂载了一个getMsg的方法，所以我们p1.getMsg()直接调用，并得到了 小红今年14了，不喜欢打游戏的结果

2.新建子类Woman并且去继承父类Person，woman中有三个属性，其中name,age 继承于Person,weight则是自己的独有属性值，有一个sing方法，getPersonMsg的方法

    class Woman extends Person {
        constructor({
            name,
            age,
            weight
        }) {
            super({
                name,
                age
            })
            this.weight = weight;
        }
        sing() {
            console.log(`${this.name}今年${this.age}岁，体重${this.weight}斤，爱好唱歌`)
        }
        getPersonMsg() {
            // 调用父类的方法
            super.getMsg()
        }
    }
    let p3 = new Woman({
        name: "小兰",
        weight: 90,
        age: "20"
    })
    console.log(p3);
    p3.sing()
    p3.getPersonMsg()
    p3.getMsg()

下面我们来打印下p3中都包含什么，下图

其中比较注意的是，我们在p3去调用getMsg(),会先去自身的原型上去找此方法，结果当然是找不到，因为p3中只有sing,getPerson两个方法，于是它就顺着原型链继续找，直到找到或者找不到为止