ES6中。類與繼承的方法,以及與ES5中的方法的對比
阿新 • • 發佈:2018-11-22
// 在ES5中,通常使用建構函式方法去實現類與繼承
1 // 建立父類 2 function Father(name, age){ 3 this.name = name; 4 this.age = age; 5 } 6 Father.prototype.show = function(){ 7 console.log(this.name); 8 console.log(this.age); 9 } 10 11 const obj = newFather('李大師', 30); 12 obj.show(); // 輸出 李大師 30 13 14 // 建立子類,然後讓子類繼承父類 15 function Child(name,age,sex){ 16 //繼承第一句:讓子類例項化的物件具備父類的所有屬性 17 Father.apply(this,arguments); 18 this.sex = sex; 19 } 20 //繼承第二句:讓子類例項化物件具備父類的所有原型方法 21 Child.prototype = Object.create(Father.prototype);22 23 //繼承第三句:找回丟失的建構函式 24 Child.prototype.constructor = Child; 25 26 Child.prototype.run = function(){ 27 console.log(this.sex) 28 } 29 30 const son = new Child('123', 10, 'boy'); 31 son.show(); // 輸出 123 10 32 son.run(); // 輸出boy
// ES6中,類的實現和繼承非常方便
class SuperClass{//例項化類時預設會執行建構函式 constructor(name,age){ //初始化物件的語句 this.name=name; this.age=age; } //原型方法 show(){ console.log(this.name); console.log(this.age); } } const sup = new SuperClass('super', 20); sup.show(); // 輸出 super 20 class SonClass extends SuperClass{ constructor(name, age, sex){ super(name,age); // name 和 age屬性可以繼承父類 this.sex = sex; // sex 屬性 子類自己定義 } run(){ console.log(this.sex); } } const sonclass = new SonClass('abc', 15, 'girl'); sonclass.show(); // 輸出 abc 15 sonclass.run(); // 輸出 girl