es6--extends继承小案例

1.继承父类

<script>
     class Person {

            constructor(name, sex) {
                this.name = name;
                this.sex = sex;

                this.say = function() {
                    console.log('say');
                };
            }

            speak() {
                console.log('speak');
            }

            static speak() {
                console.log('static speak');
            }
        }

        Person.version = '1.0';

        class Programmer extends Person {
            constructor(name, sex) {
                super(name, sex); //子类中调用父类的构造方法利用super()
            }
        }

        const zs = new Programmer('zs', '男');

        console.log(zs.name);
        console.log(zs.sex);

        zs.say();
        zs.speak();

        Programmer.speak();

        console.log(Programmer.version);
</script>

2.改写继承的属性或方法

 <script>
        class Person {

            constructor(name, sex) {
                this.name = name;
                this.sex = sex;

                this.say = function() {
                    console.log('say');
                };
            }

            speak() {
                console.log('speak');
            }

            static speak() {
                console.log('static speak');
            }
        }

        Person.version = '1.0';

        // 子类
        class Programmer extends Person {

            constructor(name, sex, feature) {
                // this.feature = feature; ×

                // this 操作不能放在 super 前面
                super(name, sex);

                this.feature = feature;
            }

            hi() {
                console.log('hi');
            }

            // 同名覆盖
            speak() {
                console.log('Programmer speak');
            }

            static speak() {
                console.log('Programmer static speak');
            }
        }
        Programmer.version = '2.0';

        const zs = new Programmer('zs', '男', '秃头');

        console.log(zs.name);
        console.log(zs.sex);
        console.log(zs.feature);

        zs.say();
        zs.speak();
        zs.hi();
        Programmer.speak();

        console.log(Programmer.version);
</script>

3.小案例

<script>
        class Parent {
            color = "red"
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }

            pSay() {
                alert(this.name);
            }
        }

        class Child extends Parent {
            constructor(nama, name) {
                super();
            }

            cChild() {
                alert(this.name);
            }
        }

        const p1 = new Parent('p1', 16);
        const c1 = new Child('c1', 18);

        c1.pSay();
        p1.cChild();
    </script>