JavaScript類繼承
阿新 • • 發佈:2019-04-25
new 最適 type pro 語法 因此 構造函數 繼承方式 對象冒充
- 和其他功能一樣,ECMAScript 實現繼承的方式不止一種。這是因為 JavaScript 中的繼承機制並不是明確規定的,而是通過模仿實現的。這意味著所有的繼承細節並非完全由解釋程序處理。作為開發者,你有權決定最適用的繼承方式。
- 創建的子類將繼承超類的所有屬性和方法,包括構造函數及方法的實現。記住,所有屬性和方法都是公用的,因此子類可直接訪問這些方法。子類還可添加超類中沒有的新屬性和方法,也可以覆蓋超類的屬性和方法。
- 繼承的方式:
- 對象冒充方式方式一
/*被繼承類*/ function Animal_1(name) { this.name = name; this.printName = function () { console.log(this.name); } } function Person_1(name,age) { this.method1 = Animal_1; this.method1(name); this.age = age; this.printAge = function () { console.log(this.age); } } var o1 = new Person_1("ysw",18); var o2 = new Animal_1("ysw"); console.log(o1); nsole.log(o2); console.log(o1 instanceof Animal_1); console.log(o1 instanceof Person_1); console.log(o2 instanceof Animal_1); console.log(o2 instanceof Person_1);
- 對象冒充方式方式二:利用call方法和apply方法
function Animal_2(name) { this.name = name; this.printName = function () { console.log(this.name); } } function Person_2(name,age) { Animal_2.call(this,name); // Animal_2.apply(this,new Array(name)); this.age = age; this.printAge = function () { console.log(this.age); } } o1 = new Person_2("ysw",18); o2 = new Animal_2("ysw"); console.log(o1); console.log(o2); console.log(o1 instanceof Animal_2); console.log(o1 instanceof Person_2); console.log(o2 instanceof Animal_2); console.log(o2 instanceof Person_2);
- 原型鏈方式
/*被繼承類*/ function Animal_3() { } Animal_3.prototype.name = "ysw"; Animal_3.prototype.printName = function () { console.log(this.name); }; function Person_3() { } Person_3.prototype = new Animal_3(); Person_3.prototype.age = 18; Person_3.prototype.printAge = function () { console.log(this.age); }; o1 = new Person_3(); o2 = new Animal_3(); console.log(o1); console.log(o2); console.log(o1 instanceof Animal_3); console.log(o1 instanceof Person_3); console.log(o2 instanceof Animal_3); console.log(o2 instanceof Person_3);
- 混合方式
/*被繼承類*/
function Animal_4(name) {
this.name = name;
}
Animal_4.prototype.printName = function () {
console.log(this.name);
};
function Person_4(name,age) {
Animal_4.call(this,name);
this.age = age;
}
Person_4.prototype = new Animal_4();
Person_4.prototype.printAge = function () {
console.log(this.age);
};
o1 = new Person_4("晏沈威",22);
o2 = new Animal_4("晏沈威");
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_4);
console.log(o1 instanceof Person_4);
console.log(o2 instanceof Animal_4);
console.log(o2 instanceof Person_4);
- ES6語法 class extends繼承
/*被繼承類*/
class Animal_5 {
constructor(name){
this.name = name;
}
printName(){
console.log(this.name);
}
}
class Person_5 extends Animal_5{
constructor(name,age){
super(name);
this.age = age;
}
printAge() {
console.log(this.age);
};
}
o1 = new Person_5("晏沈威",22);
o2 = new Animal_5("晏沈威");
console.log(o1);
console.log(o2);
console.log(o1 instanceof Animal_5);
console.log(o1 instanceof Person_5);
console.log(o2 instanceof Animal_5);
console.log(o2 instanceof Person_5);
JavaScript類繼承