前言

關(guān)于JavaScript繼承相關(guān)的定義和方法網(wǎng)上已經(jīng)有很多解釋啦，本菜鳥(niǎo)就不抄抄寫寫惹人嫌了，本文主要探討三種基本的繼承方式并且給出優(yōu)化方案。

正文

借助構(gòu)造函數(shù)實(shí)現(xiàn)繼承

function Parent1() {

this.name = '喵喵喵';this.arr = [1];}Parent1.prototype.say = function () {alert('我肯定沒(méi)被繼承，所以彈不出來(lái)');};function Child1() {Parent1.call(this); // 這里是借助構(gòu)造函數(shù)實(shí)現(xiàn)繼承的關(guān)鍵}var t1 = new Child1();

好的，我們來(lái)通過(guò)控制臺(tái)看看結(jié)果：

可以發(fā)現(xiàn)，Child1已經(jīng)成功繼承了Parent1構(gòu)造函數(shù)中個(gè)屬性，那么問(wèn)題來(lái)了，Parent1原型的屬性Child1繼承了嗎？

答案是并沒(méi)有！這就是借助構(gòu)造函數(shù)實(shí)現(xiàn)繼承的缺點(diǎn)，被繼承對(duì)象原型上的屬性不能被繼承。

2.借助原型鏈實(shí)現(xiàn)繼承

Tips:所有實(shí)例對(duì)象共享的屬性和方法都放在prototype中

function Parent2() {this.arr = [1];this.a = '1'; } Parent2.prototype.say = function () {alert('終于被繼承了'); }; function Child2() {this.type = '汪汪汪'; } Child2.prototype = new Parent2(); // 這里是借助原型鏈實(shí)現(xiàn)繼承的關(guān)鍵 var s1 = new Child2(); var s2 = new Child2();

我們?cè)俅未蜷_(kāi)控制臺(tái)看看：

ok！到這里，我們已經(jīng)成功實(shí)現(xiàn)讓Parent2中的屬性以及它原型鏈上的屬性都被繼承。但是這里要注意包含引用類型屬性的原型會(huì)被所有的實(shí)例共享。啥意思呢？Child2.prototype = new Parent2(); 這行代碼把Parent2的實(shí)例賦給了Child2的原型，而Parent2中存在引用類型this.arr。

s1和s2本是Child2的兩個(gè)不同實(shí)例，但修改s2.arr同樣映射到s1.arr這個(gè)問(wèn)題體現(xiàn)出了借助原型鏈實(shí)現(xiàn)繼承的缺點(diǎn)： Parent2中的引用屬性被Child2的實(shí)例共享了。

3.組合方式實(shí)現(xiàn)繼承（原型鏈 + 構(gòu)造函數(shù)）

function Parent3() {this.type = '喵喵喵';this.arr = [1] } function Child3() {this.type = '汪汪汪';Parent3.call(this); // 與2的唯一區(qū)別是多了這一句 } Child3.prototype = new Parent3(); var s3 = new Child3(); var s4 = new Child3();

組合方式實(shí)現(xiàn)了Child3對(duì)Parent3構(gòu)造函數(shù)內(nèi)和原型上所有屬性和方法的繼承，并且Child3的實(shí)例對(duì)象之間也不會(huì)相互干擾。當(dāng)然啦，厲害的看官已經(jīng)發(fā)現(xiàn)了組合方式的問(wèn)題：Parent3.call(this)、new Parent3();
在實(shí)現(xiàn)組合繼承的過(guò)程中Parent3執(zhí)行了兩次，這其實(shí)是沒(méi)有必要的。

• 組合方式實(shí)現(xiàn)繼承-優(yōu)化

function Parent4() {this.type = '喵喵喵';this.arr = [1]}Parent4.prototype.cide = [1,2,3];function Child4() {this.type = '汪汪汪';Parent4.call(this);}Child4.prototype = Parent4.prototype;// 優(yōu)化重點(diǎn)var s5 = new Child4();var s6 = new Child4();

這種組合方式的優(yōu)化方案其實(shí)可以分兩步來(lái)看：
1） Parent4.call(this) 實(shí)現(xiàn)對(duì)構(gòu)造函數(shù)中的屬性和方法的繼承
2）Child4.prototype = Parent4.prototype; 實(shí)現(xiàn)對(duì)構(gòu)造函數(shù)的原型的屬性和方法的繼承

觀察3中的代碼我們可以發(fā)現(xiàn)，通過(guò)Parent3.call(this)我們規(guī)避了Parent構(gòu)造函數(shù)中引用屬性對(duì)child實(shí)例的影響，但如果Parent的原型中存在引用類型（Parent4.prototype.cide），那么在child的實(shí)例中修改該屬性，同樣會(huì)映射到其它實(shí)例。

總結(jié)

以上是生活随笔為你收集整理的浅谈JavaScript继承的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。