Js 类继承 extends

 

html 及 js 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Js Class extends</title>
    <style>
        * {
            margin-top: 20px;
        }

        h5 {
            color: red;
        }

        span {
            color: blue;
        }
    </style>
</head>

<body>
    <h5>Js 类继承 extends</h5>
    <div>继承类声明 使用关键字 extends</div>
    <div>如果子类中存在构造函数 constructor()，则需要在使用“this”之前调用 super() 代替父类构造函数</div>
    <div>
        <span>js 输出: </span>
        <span id="idconsole"></span>
        <!-- 显示时间 -->
        <div></div>
    </div>

</body>
<script>
    // 父类
    class Animal {
        constructor(name) {
            this.name = name;// 类属性声明不须要var声明 , var parrent = '';是声明普通变量
        }
        // 成员方法
        speak() {
            console.log(this.name + ' makes a noise.'); //仿问类属性要使用 this.
        }
    }
    // 子类 继承自 Animal
    class Dog extends Animal {
        master = ''; // Dog 比父类Animal 多了新属性master
        constructor(name, master) {
            super(name); // 调用 super() 代替父类构造函数,初始化与父类共同的属性name
            this.master = master; // 初始化子类新属性master
        }
        // 重载父类成员方法 speak
        speak() {
            let logstr = this.name + ' is a Dog, ' + 'has master from ' + this.master + ' .';
            let logelement = document.getElementById('idconsole');
            logelement.innerHTML = logstr;
            logelement.nextElementSibling.innerHTML = 'time: ' + new Date().toLocaleString();
        }
    }
    var d = new Dog('Wangwang', 'People'); // 构造新实例 Dog
    d.speak(); // 调用Dog成员方法
</script>

</html>

 

posted on 2019-12-06 15:50  覃隆强  阅读(7224)  评论(0)  编辑  收藏  举报