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>