JS實現繼承的幾種方式

一、借用建構函式

1

function
father(val)
5function
child(val)
8var child1=new
child();
9 console.log(child1.val);

缺點：子類無法繼承父類的原型物件，並沒有真正的實現繼承（部分繼承）

如果給上述**再新增幾行：

1

function
father(val)7}
8function
child(val)
11var child1=new child(1);
12var child2=new child(2);
13 child1.arr.push(2);
1415 console.log(child1.val);    //
116 console.log(child2.val);    //217
18 console.log(child1.arr);    //
1,219 console.log(child2.arr);    //120
21 console.log(child1.fun === child2.fun);   //
false

上面**中21行報錯，是因為無法繼承方法，每個子類例項都有乙個新的方法，無法實現函式復用

二、原型鏈

1

function father()
5function child()
8 child.prototype=new father();  //
子類的原型等於父類的例項
9var child1=new child();        //
例項化乙個子類物件
10 console.log(child1.name);

缺點：原型物件的屬性是共享的

如果給上述**再新增幾行：

1

function father()
5function child()
8 child.prototype=new father();  //
子類的原型等於父類的例項910
var child1=new child();        //
例項化乙個子類物件
11var child2=new child();        //
例項化乙個子類物件
12 child1.name='李四'
13 child1.arr.push(2);
1415 console.log(child1.name);    //
李四16 console.log(child2.name);    //
張三17
18 console.log(child1.arr);     //
1,219 console.log(child2.arr);     //
1,2

此時就出現了乙個問題，第13行**明明是給child1例項新增了屬性，為什麼第19行**顯示child2也擁有了該屬性呢？這就是原型鏈繼承所存在的問題，原型物件的屬性是共享的。

三、組合式繼承

原型繼承+建構函式繼承

1

function father()
5 father.prototype.sayhai=function()
8function
child()
11 child.prototype=new father();     //
原型鏈繼承
1213
var child1=new
child();
14var child2=new
child();
1516 console.log(child1.sayhai==child2.sayhai);    //
true

將例項方法放到原型物件裡，以實現函式復用，同時還要保留借用建構函式方式的優點

優點：不存在屬性共享問題，函式可復用

缺點：父類建構函式被呼叫了兩次，**冗餘

四、寄生組合繼承

js實現繼承的幾種方式

一，js中物件繼承 js中有三種繼承方式 1.js原型 prototype 實現繼承 複製 如下 2.建構函式實現繼承 複製 如下 複製 如下 js手冊中對call的解釋 複製 如下 call 方法 呼叫乙個物件的乙個方法，以另乙個物件替換當前物件。call thisobj arg1 arg2 ar...

JS實現繼承的幾種方式

取自 1.js實現繼承的幾種方式 2.js 物件導向之繼承 多種組合繼承 js作為物件導向的弱型別語言，繼承也是其非常強大的特性之一。那麼如何在js中實現繼承呢？讓我們拭目以待。既然要實現繼承，那麼首先我們得有乙個父類，如下 定義乙個動物類 function animal name 原型方法 ani...

JS實現繼承的幾種方式

前言 js作為物件導向的弱型別語言，繼承也是其非常強大的特性之一。那麼如何在js中實現繼承呢？讓我們拭目以待。既然要實現繼承，那麼首先我們得有乙個父類，如下 定義乙個動物類 function animal name 原型方法 animal.prototype.eat function food 核心...