天天看點

一文詳解JavaScript的繼承模式

#### ES6中通過原型繼承多個引用類型的屬性和方法,由于原型和執行個體的關系,即每個構造函數都有自己的原型對象,同時原型有一個屬性指向構造函數,并且執行個體有一個内部的指針指向原型。如果存在某原型是另一個類型的執行個體時,以此類推。便形成了原型鍊。

-實作原型鍊的基本代碼模式:

function SubType(){}

SubType.prototype.getValue = function(){}

此時,函數SubType的原型上邊定義了一個方法 getValue 在下一步進行執行個體化的時候,便可以通過這個方法通路函數上的相關屬性。

同時,一個函數或者方法的原型可以繼承自另外一個函數或者類的執行個體。

例如:

function SonType(){}

繼承自SubType

SonType.prototype  = new SubType();

例:

function SuperType(){

this.color = ['red','blue','green']

}

繼承自SuperType

function SubType(){  SuperType.call(this) }

let instance = new SubType();

instance.color.push("skyblue)

console.log(instance.color)  red,blue,green,skyblue;

此種方式的優點在于能夠在子類的構造函數當中向父類的構造函數傳遞參數。

SuperType.call(this,'此處傳遞參數')

缺點在于必須在構造函數中定義方法,函數無法重用,同時子類也無法通路父類原型上的定義的方法。

組合式繼承模式

該繼承綜合了原型鍊和盜用構造函數繼承:将優點集中到一起。

基本思路:通過原型鍊繼承原型上的屬性和方法,通過盜用構造函數繼承執行個體屬性。

執行個體代碼:

SuperType.prototype.sayName = function(){

function SubType(name,age){

SubType.ptototype = new SuperType();

SubType.prototype.sayAge = function(){

該繼承模式彌補了原型鍊繼承和盜用構造函數繼承的不足,是使用最多的繼承模式,同時還保留了instanceof操作符和isPrototypeOf()方法。

原型式繼承

function object(o) {

當隻有一個參數時,同上文定義的object函數功能相同。寄生式繼承

function createAnother(origin){

思路類似于:寄生構造函數和工廠模式。建立一個實作繼承的函數,以某種方式增強這個對象,最後傳回。寄生式組合繼承

function SuperType(name){

SubType.prototype = new SuperType();第一次調用SuperType()

SubType.prototype.constructor = SubType;

function inheritPrototype(subType,superType){

通過這種方式 隻需要調用一次SuperType構造函數效率更高,原型鍵依然保持不變,同時instance操作符和isProtoTpe方法正常有效。

繼續閱讀