js繼承機制的實作
1. 繼承的概念
- 說明繼承的最經典的例子：幾何形狀，實際上，幾何形狀只有兩種，即橢圓形（是圓形的）和多邊形（具有一定數量的邊），圓是橢圓的一種，它只有一個焦點，三角形、矩形和五邊形都是多邊形的一種，具有不同數量的邊，正方形是矩形的一種，所有的邊等長，這就構成了一種完美的繼承關系，
- 在該實體中，我想闡述的并不是繼承的含義，而是說明幾個關鍵詞，即：基類 子類 超類 的含義，
- 在該實體中，圓形是橢圓形的子類，橢圓形是圓形的超類(父類)；同樣，三角形（Triangle）、矩形（Rectangle）和五邊形（Pentagon）都是多邊形的子類，多邊形是它們的超類，
2. 繼承的方式
- 物件冒充
// 父類 ClassA
function ClassA(aColor){
this.color = aColor;
this.showColor = function(){
console.log(this.color);
}
}
// 子類 ClassB
function ClassB(bColor,bName){
this.newMethod = ClassA; // 函式名ClassA只是指向函式的指標，所以這里是將this.newMethod也指向ClassA這個函式，所以函式ClassB就擁有了函式ClassA的方法和屬性
this.newMethod(bColor);
delete this.newMethod; // 該操作使得實體化的物件不需要多次繼承同一個函式了，因為繼承一次就可以了，注意：新增的屬性和方法最好都寫在 洗掉對另一個函式參考的后面，因為如果在前面定義的話，如果父類剛好有該屬性或者方法你就會把父類的屬性和方法 給覆寫掉，
this.name = bName;
this.sayName = function(){
console.log(this.name);
}
}
// --------------------------------------
var objA = new ClassA("blue");
var objB = new ClassB("red", "John");
objA.showColor(); // blue
objB.showColor(); // red
objB.sayName(); // John
- 物件冒充還可以實作多重繼承
例如，如果存在兩個類 ClassX 和 ClassY，ClassZ 想繼承這兩個類，可以使用下面的代碼：
function ClassZ() {
this.newMethod = ClassX;
this.newMethod();
delete this.newMethod;
this.newMethod = ClassY;
this.newMethod();
delete this.newMethod;
}
這里存在一個弊端，如果存在兩個類 ClassX 和 ClassY 具有同名的屬性或方法，ClassY 具有高優先級，因為它從后面的類繼承，除這點小問題之外，用物件冒充實作多重繼承機制輕而易舉，
- call、apply方法(和物件冒充類似)
call、apply這兩個方法的使用方法和原理在上一個博客寫了，可以去參考一下
// call方法
function ClassA(acolor){
this.color = acolor;
this.showColor = function(){
console.log(this.color);
}
}
function ClassB(bcolor){
ClassA.call(this,bcolor); // 這里的this指的是ClassB實體化的物件，讓this呼叫函式ClassA，達到繼承效果，第二個引數是對應ClassA的引數
}
var objA = new ClassA('blue');
var objB = new ClassB('red');
objA.showColor(); // blue
objB.showColor(); // red
function ClassA(acolor){
this.color = acolor;
this.showColor = function(){
console.log(this.color);
}
}
function ClassB(bcolor){
// ClassA.apply(this,Array(bcolor));
ClassA.apply(this, arguments); // 這里使用上面的或者arguments都可以，arguments代表的是實參的類陣列物件
}
var objA = new ClassA('blue');
var objB = new ClassB('red');
objA.showColor(); // blue
objB.showColor(); // red
- 原型鏈的方式
function ClassA() {}
ClassA.prototype.color = "blue";
ClassA.prototype.sayColor = function () {
alert(this.color);
};
function ClassB() {}
ClassB.prototype = new ClassA(); // 這是關鍵
原型方式的神奇之處在于“ClassB.prototype = new ClassA()”代碼行，這里，把 ClassB 的 prototype 屬性設定成 ClassA 的實體，這很有意思，因為想要 ClassA 的所有屬性和方法，但又不想逐個將它們 ClassB 的 prototype 屬性進行手動鏈接，還有比把 ClassA 的實體賦予 prototype 屬性更好的方法嗎？
與物件冒充相似，子類的所有屬性和方法都必須出現在 prototype 屬性被賦值后，因為在它之前賦值的所有方法都會被洗掉，為什么？因為 prototype 屬性被替換成了新物件，添加了新方法的原始物件將被銷毀，所以，為 ClassB 類添加 name 屬性和 sayName() 方法的代碼如下：
function ClassB() {
}
ClassB.prototype = new ClassA();
ClassB.prototype.name = "zjy";
ClassB.prototype.sayName = function () {
alert(this.name);
};
測驗代碼如下：
var objA = new ClassA();
var objB = new ClassB();
objA.color = "blue";
objB.color = "red";
objB.name = "John";
objA.sayColor(); // blue
objB.sayColor(); // red
objB.sayName(); // John
- 原型鏈和物件冒充混合使用
用物件冒充的方法繼承建構式的屬性，再用原型鏈的方式繼承建構式的方法，
// 父類
function ClassA(acolor){// 之所以方法通過原型鏈來定義是因為方法多數都是物件共享的，如果放在建構式內部的話，多個實體化物件就會產生多個同樣的方法，所以為了減少這樣的浪費，將方法通過原型鏈定義，這樣即滿足了共享的原則也實作了重復利用不會浪費，不管在內部定義方法還是通過原型鏈定義，都可以通過其他建構式的原型鏈繼承到，
this.color = acolor;
}
ClassA.prototype.showColor = function(){ //屬性在建構式內定義，方法通過原型定義
console.log(this.color);
}
// 子類
function ClassB(bcolor,name){
ClassA.call(this,bcolor); // 通過call()物件冒充的方式繼承建構式的屬性
this.name = name;
}
ClassB.prototype = new ClassA(); // 通過原型鏈的方式繼承建構式的方法
ClassB.prototype.showName = function(){
console.log(this.name);
}
測驗代碼如下：
var objA = new ClassA('blue');
var objB = new ClassB('red','tom');
objA.showColor(); // blue
objB.showColor(); // red
objB.showName(); // tom
本博客參考了w3cschool相關的解釋和代碼，鏈接地址如下 w3cschool
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/180930.html
標籤：JavaScript
下一篇：vue使用vuex大體結構