javascript之原型鏈和繼承

今天我和大家一起復習學習一下javascript中的原型鏈和繼承。

1. 原型鏈
   下面用一張圖帶大家看清楚原型鏈
   
   構造函數的原型有一個constructor屬性指向構造函數本身，實例的隱式原型_proto_指向構造函數的原型。

Person.prototype.constructor === Person //true
person._proto_ === Person.prototype // true

2. 繼承（原型繼承、構造函數繼承、組合繼承，寄生式繼承，寄生組合式繼承）

• 原型繼承

// 父類
function Parent(){}
// 子類
function Son(){}
// 子類繼承父類
Son.prototype = new Parent()

// 弊端：父類引用類型數據， 將會被子類的實例共享。

• 構造函數繼承

// 父類
function Parent(){}
// 子類
function Son(){
	Parent.call(this);
}

// 實質： 父類構造函數執行賦給子類的this。複製一份
// 弊端： 無法繼承父類在原型prototype上的屬性

• 組合繼承

// 父類
function Parent(){}
// 子類
function Son(){
	Parent.call(this);
}
Son.prototype = new Parent()

// 實質：構造函數繼承，原型繼承。
// 弊端： 構造函數Parent會被執行2次

• 寄生式繼承

function createAnother(original){
    var clone = Object(original);//創建一個新對象，original的副本
    clone.sayName = function(){ //對象的增強，添加額外的方法
        alert('hi');
    }
    return clone;
}
var parent= {
    name:'小明',
    friends:['小紅','小強']
}

// 應用場景： 考慮對象而不是自己定義類型和構造函數的情況下，寄生式繼承是一種有用的模式
// 實質：創建一個新的對象，併爲他添加新的方法和屬性。
// 弊端：但無法做到函數的複用

• 寄生組合式繼承

function inheritPrototype(son,parent){
		var prototype = Object.create(parent.prototype);//ES5中創建對象副本的方法
	    prototype.constructor = son; //彌補重寫原型失去的默認constructor屬性
	    son.prototype = prototype;
	}
}
function Parent(){}
function Son(name){
    Parent.call(this);
}
inheritPrototype(Son, Parent)
// 實質：構造函數繼承，原型繼承。
// 優點：寄生組合式繼承解決了組合式繼承調用兩次超類構造函數的問題

3. es6中的繼承

class Point {}
class ColorPoint extends Point {
	 constructor() {
	    super(); // 調用父類的constructor()
	  }
}
// 1.該類通過extends關鍵字實現繼承
// 2. 必須通過在constructor調用super方法得到子類的this對象，否則子類無法使用this
// 3. es5的繼承：實質是先創造子類的實例對象this，然後再將父類的方法添加到this上面（Parent.apply(this)））
// 4. es6繼承：實質是先將父類實例對象的屬性和方法，加到this上面（所以必須先調用super方法），然後再用子類的構造函數修改this。

如有錯誤，歡迎留言指正!