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>