js實現繼承的5種方式

js是門靈活的語言，實現一種功能往往有多種做法,ecmascript沒有明確的繼承機制，而是通過模仿實現的，根據js語言的本身的特性,js實現繼承有以下通用的幾種方式

1.使用物件冒充實現繼承(該種實現方式可以實現多繼承)

實現原理:讓父類的建構函式成為子類的方法,然後呼叫該子類的方法,通過this關鍵字給所有的屬性和方法賦值

js**

function parent(firstname)

} function child(firstname)

} var mychild=new child("李");

mychild.saysomething();

2.採用call方法改變函式上下文實現繼承(該種方式不能繼承原型鏈,若想繼承原型鏈，則採用5混合模式)

實現原理:改變函式內部的函式上下文this,使它指向傳入函式的具體物件

js**

function parent(firstname)

} function child(firstname)

this.getname=function()

} var child=new child("張");

parent.call(child,child.getname());

child.saysomething();

js**

function parent(firstname)

} function child(firstname)

this.getname=function()

} var child=new child("張");

child.saysomething();

4.採用原型鏈的方式實現繼承

實現原理:使子類原型物件指向父類的例項以實現繼承,即重寫類的原型,弊端是不能直接實現多繼承

js**

function parent()

} function child(firstname)

} child.prototype=new parent();

var child=new child("張");

child.saysomething();

原型鏈的問題：

雖然很強大，可以用它來實現繼承，但它也存在一些問題。最主要的問題來自包含引用型別值的原型。在通過原型來實現繼承時，原型實際上會變成乙個型別的例項。於是，原先的例項屬性也順理成章的變成了現在的原型的屬性了。看例子吧！

function
supertype() 
function
subtype() 
//繼承了supertype
subtype.prototype = new
supertype();
var instance1 = new
subtype();
instance1.colors.push("black");
alert(instance1.colors); 
//red,green,blue,black
var instance2 = new
subtype();
alert(instance2.colors); 
//red,green,blue,black

supertype建構函式定義了乙個屬性，該屬性包含乙個陣列（引用型別值）。當subtype通過原型繼承了supertype之後，subtype.prototype就變成了supertype的乙個例項。因此也擁有了supertype的所有屬性和方法。結果subtype會共享這個colors屬性，我們通過對instance1.colors的修改，能夠通過instance2.colors反映出來。

第二個問題是建立子型別的例項時，不能向超型別的建構函式中傳遞函式。鑑於這幾點問題，實踐中很少會單獨使用原型鏈。

5.採用混合模式實現繼承

js**

function parent()

} parent.prototype.sayparent=function()

function child(firstname)

} child.prototype=new parent();

var child=new child("張");

child.saysomething();

child.sayparent();

js實現繼承的5種方式

js是門靈活的語言，實現一種功能往往有多種做法,ecmascript沒有明確的繼承機制，而是通過模仿實現的，根據js語言的本身的特性,js實現繼承有以下通用的幾種方式 1.使用物件冒充實現繼承該種實現方式可以實現多繼承實現原理讓父類的建構函式成為子類的方法,然後呼叫該子類的方法,通過this關...

js實現繼承的5種方式

js實現繼承的5種方式

js實現繼承的5種方式

js實現繼承的5種方式

相關推薦