JavaScript繼承機(jī)制研究

周嵐

摘? 要：JavaScript是面向Web的編程語(yǔ)言，其高端、動(dòng)態(tài)以及面向?qū)ο蟮木幊田L(fēng)格，使得它已經(jīng)從一門(mén)簡(jiǎn)單的腳本語(yǔ)言進(jìn)化成為一門(mén)強(qiáng)大的編程語(yǔ)言。JS的核心是支持面向?qū)ο蟮?，同時(shí)它也提供了強(qiáng)大靈活的面向?qū)ο笳Z(yǔ)言的編程能力。本文針對(duì)JavaScript繼承機(jī)制的實(shí)現(xiàn)方式進(jìn)行了總結(jié)歸納，深入介紹了基于原型的繼承、構(gòu)造函數(shù)方式繼承、組合繼承、寄生式繼承等繼承機(jī)制，并分析了各自方式的優(yōu)缺點(diǎn)，便于讀者更深層次的理解JavaScript面向?qū)ο缶幊虣C(jī)制。

關(guān)鍵詞：原型鏈;繼承;原型對(duì)象;構(gòu)造函數(shù)

中圖分類(lèi)號(hào)：TP311? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

Research on JavaScript Inheritance Mechanism

ZHOU Lan

（Xuzhou Finance and Economics Branch，Jiangsu Union Technical Institute，Xuzhou 221008，China）

Abstract：Javascript is a web-oriented programming language.Its high-end，dynamic and object-oriented programming style has evolved from a simple scripting language to a powerful programming language.The core of JS is to support object-oriented，and it also provides powerful and flexible programming ability of object-oriented language.This paper summarizes the implementation of JavaScript inheritance mechanism，introduces the inheritance mechanism based on prototype，constructor，combination and parasitism，and analyzes the advantages and disadvantages of each method，which is convenient for readers to understand the JavaScript object-oriented programming mechanism.

Keywords：prototype chain;inheritance;prototype object;constructor

1? ?引言（Introduction）

JavaScript是面向Web的編程語(yǔ)言，其高端、動(dòng)態(tài)和面向?qū)ο蟮木幊田L(fēng)格，使得JavaScript已經(jīng)從一門(mén)簡(jiǎn)單的腳本語(yǔ)言進(jìn)化成為一門(mén)強(qiáng)大的編程語(yǔ)言[1]。在面向?qū)ο螅∣OP）的程序設(shè)計(jì)范型中通常強(qiáng)調(diào)類(lèi)的概念，早期的JavaScript中并沒(méi)有類(lèi)的概念，JavaScript采用基于原型的繼承風(fēng)格，雖然使用起來(lái)非常靈活、高效，但對(duì)于初學(xué)者，要正確理解和使用原型對(duì)象及其繼承機(jī)制是非常困難的，本文對(duì)比類(lèi)的繼承機(jī)制，并通過(guò)實(shí)例深入的討論了JavaScript特有的原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、寄生組合繼承、class extend等多種繼承機(jī)制。希望能給初學(xué)者答疑解惑。

2? ?基于類(lèi)的繼承（Class-based inheritance）

繼承是面向?qū)ο蟪绦蛑凶钪匾母拍钪?。繼承允許我們根據(jù)一個(gè)類(lèi)來(lái)定義另一個(gè)類(lèi)，當(dāng)創(chuàng)建一個(gè)類(lèi)時(shí)，不需要完全重新編寫(xiě)新的數(shù)據(jù)成員和數(shù)據(jù)函數(shù)，只需要設(shè)計(jì)一個(gè)新的類(lèi)，繼承了已有的類(lèi)的成員即可。這個(gè)已有的類(lèi)被稱(chēng)為基類(lèi)（父類(lèi)），新的類(lèi)被稱(chēng)為派生類(lèi)（子類(lèi)）。實(shí)現(xiàn)繼承的好處：（1）提高代碼重用性高。如果我們新創(chuàng)建的類(lèi)與已有的類(lèi)有絕大部分相類(lèi)似，則沒(méi)有必要再重新定義這個(gè)完整的類(lèi)。這樣做可以實(shí)現(xiàn)代碼的重用，大大減少了軟件開(kāi)發(fā)的成本。（2）繼承可以實(shí)現(xiàn)面向?qū)ο蟮摹岸鄳B(tài)”特性。程序員可以將子類(lèi)的對(duì)象直接賦值給父類(lèi)的引用，無(wú)須再編寫(xiě)顯式的類(lèi)型[2]。

// 基類(lèi)

public class Person

{

string _name;

public string Name

{

get {return _name;}

set {_name=value;}

}

public void Show（）

{

Console.WriteLine（"我是人，早上好！"）;

}

}

//派生類(lèi)

public class Student：Person

{

public void? SayHello（）

{

base.Show（）;//調(diào)用父類(lèi)Show方法

Console.WriteLine（"我是學(xué)生，早上好！"）;

}

}

上例中，class Student從class Person繼承而來(lái)，子類(lèi)Student的對(duì)象就繼承了父類(lèi)Person的所有非私有化成員。

3? ?基于原型的繼承（Prototype-based inheritance）

3.1? ?原型

在JavaScript中，只要?jiǎng)?chuàng)建一個(gè)新函數(shù)，就會(huì)根據(jù)一組特定規(guī)則為該函數(shù)創(chuàng)建一個(gè)prototype屬性，而這個(gè)屬性指向函數(shù)的原型對(duì)象。在默認(rèn)情況下，原型對(duì)象會(huì)自動(dòng)獲得一個(gè)constructor屬性，而這個(gè)屬性包含一個(gè)指向prototype屬性所在函數(shù)對(duì)象的指針[3]，如圖1所示。當(dāng)一個(gè)函數(shù)對(duì)象被創(chuàng)建時(shí)，function構(gòu)造器產(chǎn)生的函數(shù)對(duì)象會(huì)運(yùn)行代碼“：this.prototype={constructor：this};”。實(shí)例沒(méi)有prototype屬性，但是有__proto__屬性。函數(shù)同時(shí)有prototype和__proto__屬性。__proto__屬性雖然在ECMAScript6語(yǔ)言規(guī)范中標(biāo)準(zhǔn)化，但是不推薦被使用。

3.2? ?原型鏈

當(dāng)訪(fǎng)問(wèn)一個(gè)對(duì)象的屬性時(shí)，先在對(duì)象的本身找，如果找不到就去對(duì)象的原型上找，如果還是找不到，就去對(duì)象的原型（原型也是對(duì)象，也有它自己的原型）的原型上找，如此繼續(xù)，直到找到為止，或者查找到最頂層的原型對(duì)象（原型鏈的頂端Object類(lèi)型，Object.prototype.__proto__是原型鏈的頂端了，指向null）中也沒(méi)有找到，就結(jié)束查找，返回undefined，這條由對(duì)象及其原型組成的鏈就叫作原型鏈[4]，如圖2所示。

繼承存在的意義就是屬性共享，而原型鏈存在的意義就是繼承：訪(fǎng)問(wèn)對(duì)象屬性時(shí)，在對(duì)象本身找不到，就在原型鏈上一層一層找。說(shuō)白了就是一個(gè)對(duì)象可以訪(fǎng)問(wèn)其他對(duì)象的屬性。如下列所示：

這種繼承方式的缺點(diǎn)是子類(lèi)的實(shí)例可以訪(fǎng)問(wèn)父類(lèi)的私有屬性，子類(lèi)的實(shí)例還可以更改該屬性，這樣不安全。

4? ?構(gòu)造函數(shù)方式繼承（Constructor mode inheritance）

如下例所示，構(gòu)造函數(shù)方式繼承，用.call（）和.apply（）將父類(lèi)構(gòu)造函數(shù)引入子類(lèi)函數(shù)，父類(lèi)原型上的方法不會(huì)被子類(lèi)繼承。

這種方式的優(yōu)點(diǎn)是，借用構(gòu)造函數(shù)可以解決原型中引用類(lèi)型值被修改的問(wèn)題，但是也存在一個(gè)問(wèn)題，那就是，只能繼承父對(duì)象的實(shí)例屬性和方法，不能繼承父對(duì)象原型屬性和方法[5]。

5? ?組合繼承（Combinatorial inheritance）

組合繼承，就是原型鏈繼承+借用構(gòu)造函數(shù)。它的優(yōu)點(diǎn)是：（1）能夠在實(shí)例化子類(lèi)對(duì)象的時(shí)候給繼承來(lái)的屬性賦值;（2）能夠繼承父類(lèi)的原型對(duì)象中的方法。缺點(diǎn)是：繼承了兩次父類(lèi)的模板，分別是call綁定和子類(lèi)原型對(duì)象賦值的時(shí)候，如果繼承來(lái)的屬性特別多，這會(huì)很耗費(fèi)時(shí)間來(lái)維護(hù)[6]。

6? ?寄生式繼承（Parasitic inheritance）

寄生式繼承是通過(guò)Object.create（）將子類(lèi)的原型繼承到父類(lèi)的原型上。寄生式繼承其實(shí)就是對(duì)原型繼承的第二次封裝，在封裝過(guò)程中對(duì)繼承的對(duì)象進(jìn)行了擴(kuò)展，也存在原型繼承的缺點(diǎn)，這種思想的作用也是為了寄生組合式繼承模式的實(shí)現(xiàn)[7]。

7? ?ES6新增的Class（類(lèi)）（ES6 new class）

ES6新增的Class（類(lèi)），給我們編程帶來(lái)了極大方便，可以通過(guò)class聲明一個(gè)類(lèi)，通過(guò)extends關(guān)鍵字來(lái)實(shí)現(xiàn)繼承關(guān)系。新的class寫(xiě)法只是讓對(duì)象原型的寫(xiě)法更加清晰、更像面向?qū)ο缶幊痰恼Z(yǔ)法而已，ES6中的類(lèi)，實(shí)際上也是函數(shù)，寫(xiě)法更加面向?qū)ο?，原理還是原型鏈[8]。

8? ?結(jié)論（Conclusion）

傳統(tǒng)基于類(lèi)的面向?qū)ο笏季S在一定程度上妨礙了大家對(duì)JavaScript面向?qū)ο筇匦缘睦斫?，本文通過(guò)比較分析及舉例說(shuō)明的研究方法深入討論了JavaScript的面向?qū)ο蟮睦^承的特性。它的弱類(lèi)型，簡(jiǎn)單易用性、解釋性和跨平臺(tái)性，使其在Web的應(yīng)用開(kāi)發(fā)中可以說(shuō)是無(wú)處不在，但它的無(wú)類(lèi)動(dòng)態(tài)對(duì)象、原型鏈繼承、組合繼承、寄生式繼承等特性使其具有更高的靈活性[9]。所以，只有深入理解JavaScript中實(shí)現(xiàn)繼承的原理，實(shí)現(xiàn)繼承機(jī)制才可以變得游刃有余。

參考文獻(xiàn)（References）

[3] 呂遠(yuǎn).基于JavaScript原型鏈的繼承機(jī)制研究[J].江陰工學(xué)院學(xué)報(bào)，2017（10）：13-18.

[4] 石正喜.MySQL數(shù)據(jù)庫(kù)實(shí)用教程[M].北京：北京師范大學(xué)出版社，2014.

[5] 姜承堯.高性能網(wǎng)站MySQL數(shù)據(jù)庫(kù)實(shí)踐[J].程序員，2013（9）：

49-53.

[6] 黃華林，宋陽(yáng)秋.JavaScript面向?qū)ο筇匦詼\析與范例[J].安慶師范學(xué)院學(xué)報(bào)：自然科學(xué)版，2005（4）：85-88.

[7] Zakas N C.JavaScript高級(jí)程序設(shè)計(jì)（第3版）[M].北京：人民郵電出版社，2015：147-161.

[8] Nicholas C，Zakas.JavaScript面向?qū)ο缶猍M].北京：人民郵電出版社，2014：53-60.

[9] Stoyan Stefanov，Kumar Chetan Sharma.JavaScript面向?qū)ο缶幊讨改希ǖ?版）[M].北京：人民郵電出版社，2015：4-6.

作者簡(jiǎn)介：

周? 嵐（1977-），女，碩士，副教授.研究領(lǐng)域：程序設(shè)計(jì)，軟件開(kāi)發(fā)與數(shù)據(jù)庫(kù).