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>