周嵐
摘? 要:JavaScript是面向Web的編程語言,其高端、動態(tài)以及面向?qū)ο蟮木幊田L(fēng)格,使得它已經(jīng)從一門簡單的腳本語言進化成為一門強大的編程語言。JS的核心是支持面向?qū)ο蟮?,同時它也提供了強大靈活的面向?qū)ο笳Z言的編程能力。本文針對JavaScript繼承機制的實現(xiàn)方式進行了總結(jié)歸納,深入介紹了基于原型的繼承、構(gòu)造函數(shù)方式繼承、組合繼承、寄生式繼承等繼承機制,并分析了各自方式的優(yōu)缺點,便于讀者更深層次的理解JavaScript面向?qū)ο缶幊虣C制。
關(guān)鍵詞:原型鏈;繼承;原型對象;構(gòu)造函數(shù)
中圖分類號:TP311? ? ?文獻標(biāo)識碼: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的編程語言,其高端、動態(tài)和面向?qū)ο蟮木幊田L(fēng)格,使得JavaScript已經(jīng)從一門簡單的腳本語言進化成為一門強大的編程語言[1]。在面向?qū)ο螅∣OP)的程序設(shè)計范型中通常強調(diào)類的概念,早期的JavaScript中并沒有類的概念,JavaScript采用基于原型的繼承風(fēng)格,雖然使用起來非常靈活、高效,但對于初學(xué)者,要正確理解和使用原型對象及其繼承機制是非常困難的,本文對比類的繼承機制,并通過實例深入的討論了JavaScript特有的原型鏈繼承、構(gòu)造函數(shù)繼承、組合繼承、寄生組合繼承、class extend等多種繼承機制。希望能給初學(xué)者答疑解惑。
2? ?基于類的繼承(Class-based inheritance)
繼承是面向?qū)ο蟪绦蛑凶钪匾母拍钪?。繼承允許我們根據(jù)一個類來定義另一個類,當(dāng)創(chuàng)建一個類時,不需要完全重新編寫新的數(shù)據(jù)成員和數(shù)據(jù)函數(shù),只需要設(shè)計一個新的類,繼承了已有的類的成員即可。這個已有的類被稱為基類(父類),新的類被稱為派生類(子類)。實現(xiàn)繼承的好處:(1)提高代碼重用性高。如果我們新創(chuàng)建的類與已有的類有絕大部分相類似,則沒有必要再重新定義這個完整的類。這樣做可以實現(xiàn)代碼的重用,大大減少了軟件開發(fā)的成本。(2)繼承可以實現(xiàn)面向?qū)ο蟮摹岸鄳B(tài)”特性。程序員可以將子類的對象直接賦值給父類的引用,無須再編寫顯式的類型[2]。
// 基類
public class Person
{
string _name;
public string Name
{
get {return _name;}
set {_name=value;}
}
public void Show()
{
Console.WriteLine("我是人,早上好!");
}
}
//派生類
public class Student:Person
{
public void? SayHello()
{
base.Show();//調(diào)用父類Show方法
Console.WriteLine("我是學(xué)生,早上好!");
}
}
上例中,class Student從class Person繼承而來,子類Student的對象就繼承了父類Person的所有非私有化成員。
3? ?基于原型的繼承(Prototype-based inheritance)
3.1? ?原型
在JavaScript中,只要創(chuàng)建一個新函數(shù),就會根據(jù)一組特定規(guī)則為該函數(shù)創(chuàng)建一個prototype屬性,而這個屬性指向函數(shù)的原型對象。在默認情況下,原型對象會自動獲得一個constructor屬性,而這個屬性包含一個指向prototype屬性所在函數(shù)對象的指針[3],如圖1所示。當(dāng)一個函數(shù)對象被創(chuàng)建時,function構(gòu)造器產(chǎn)生的函數(shù)對象會運行代碼“:this.prototype={constructor:this};”。實例沒有prototype屬性,但是有__proto__屬性。函數(shù)同時有prototype和__proto__屬性。__proto__屬性雖然在ECMAScript6語言規(guī)范中標(biāo)準(zhǔn)化,但是不推薦被使用。
3.2? ?原型鏈
當(dāng)訪問一個對象的屬性時,先在對象的本身找,如果找不到就去對象的原型上找,如果還是找不到,就去對象的原型(原型也是對象,也有它自己的原型)的原型上找,如此繼續(xù),直到找到為止,或者查找到最頂層的原型對象(原型鏈的頂端Object類型,Object.prototype.__proto__是原型鏈的頂端了,指向null)中也沒有找到,就結(jié)束查找,返回undefined,這條由對象及其原型組成的鏈就叫作原型鏈[4],如圖2所示。
繼承存在的意義就是屬性共享,而原型鏈存在的意義就是繼承:訪問對象屬性時,在對象本身找不到,就在原型鏈上一層一層找。說白了就是一個對象可以訪問其他對象的屬性。如下列所示:
////////原型鏈繼承方式
//汽車
function automobile(name)
{
this.name=name||'automobile';
this.drive=function() {
console.log("drive"+this.name);
}
this.energy=function() {
console.log("汽油驅(qū)動")
}
}
automobile.prototype.fun=function() {
console.log('可以載人');
}
//公交車
function bus()
{
this.energy=function() {
console.log("電力驅(qū)動")
}
}
bus.prototype=new automobile('bus');
bus.prototype.constructor=bus;
var bus1=new bus();
bus1.drive();
//如果調(diào)用父類的方法
automobile.call(bus1);
bus1.energy();
bus1.fun();
這種繼承方式的缺點是子類的實例可以訪問父類的私有屬性,子類的實例還可以更改該屬性,這樣不安全。
4? ?構(gòu)造函數(shù)方式繼承(Constructor mode inheritance)
如下例所示,構(gòu)造函數(shù)方式繼承,用.call()和.apply()將父類構(gòu)造函數(shù)引入子類函數(shù),父類原型上的方法不會被子類繼承。
function book(name,price) {
this.name=name;
this.price=price;
this.mark=function() {
console.log("在書可以標(biāo)注");
}
}
book.prototype.read=function() {
console.log("書可以用來閱讀");
}
function computerBook(name,price,lang)
{
this.lang=lang;
book.apply(this,[name,price]);
this.show=function() {
console.log(this.name+"-"+this.lang+"-"+this.price);
}
}
var book2=new computerBook('html5入門','35','html5');
book1.show();
book2.show();
//book1.read();不能調(diào)用
book2.mark();//可以調(diào)用父類的方法
這種方式的優(yōu)點是,借用構(gòu)造函數(shù)可以解決原型中引用類型值被修改的問題,但是也存在一個問題,那就是,只能繼承父對象的實例屬性和方法,不能繼承父對象原型屬性和方法[5]。
5? ?組合繼承(Combinatorial inheritance)
組合繼承,就是原型鏈繼承+借用構(gòu)造函數(shù)。它的優(yōu)點是:(1)能夠在實例化子類對象的時候給繼承來的屬性賦值;(2)能夠繼承父類的原型對象中的方法。缺點是:繼承了兩次父類的模板,分別是call綁定和子類原型對象賦值的時候,如果繼承來的屬性特別多,這會很耗費時間來維護[6]。
function father(job)
{
this.gender="male";
this.job=job;
}
father.prototype.getJob=function() {
return this.job;
}
function mother(favorite) {
this.favorite=favorite;
this.showFavorite=function() {
console.log("i like "+this.favorite);
}
}
function son(job,favorite) {
father.call(this,job);
mother.call(this,favorite);
}
son.prototype=new father();
son.constructor=son;
var son1=new son('teacher','swimming');
console.log(son1.getJob());//調(diào)用父類原型方法
console.log(son1.gender);//父類屬性
son1.showFavorite();//調(diào)用父類的原型方法
6? ?寄生式繼承(Parasitic inheritance)
寄生式繼承是通過Object.create()將子類的原型繼承到父類的原型上。寄生式繼承其實就是對原型繼承的第二次封裝,在封裝過程中對繼承的對象進行了擴展,也存在原型繼承的缺點,這種思想的作用也是為了寄生組合式繼承模式的實現(xiàn)[7]。
function book(name,price)
{
this.name=name;
this.price=price;
}
function inheritObject(o) {
var F=function() {
}
F.prototype=o;
return F();
}
function createBook(o){
// 通過原型繼承方式創(chuàng)建對象
var object=new inheritObject(o);
// 拓展新對象
o.show=function() {
console.log("書名:"+this.name+"單價:"+this.price)
}
// 返回擴展后的對象
return o;
}
var book1=createBook(book);
book1.price="52";
book1.show();
7? ?ES6新增的Class(類)(ES6 new class)
ES6新增的Class(類),給我們編程帶來了極大方便,可以通過class聲明一個類,通過extends關(guān)鍵字來實現(xiàn)繼承關(guān)系。新的class寫法只是讓對象原型的寫法更加清晰、更像面向?qū)ο缶幊痰恼Z法而已,ES6中的類,實際上也是函數(shù),寫法更加面向?qū)ο?,原理還是原型鏈[8]。
class Person{
constructor(name,age)
{
this.name=name;
this.age=age;
}
say() {
console.log("hello");
}
static run()
{
console.log("i can run");
}
}
class Teacher extends Person{
constructor(name,age,professional)
{
super(name,age);
this.professional=professional;
super.say();
}
teach() {
console.log("i can teach");
}
say() {
super.say();//調(diào)用父類方法
console.log("hello everyone");
}
}
class student extends Person{
constructor(name,age,stuid)
{
super(name,age);
this.stuid=stuid;
}
study() {
console.log("I'm studying");
}
show() {
console.log("姓名:"+this.name+";年齡"+this.age+";學(xué)號:"+this.stuid);
}
}
let student1=new student('zhangsan',16,'N0001');
student1.show();
student.run();//調(diào)用靜態(tài)方法
let teacher1=new Teacher('wangyong',35,'計算機');
teacher1.teach();
teacher1.say();
8? ?結(jié)論(Conclusion)
傳統(tǒng)基于類的面向?qū)ο笏季S在一定程度上妨礙了大家對JavaScript面向?qū)ο筇匦缘睦斫?,本文通過比較分析及舉例說明的研究方法深入討論了JavaScript的面向?qū)ο蟮睦^承的特性。它的弱類型,簡單易用性、解釋性和跨平臺性,使其在Web的應(yīng)用開發(fā)中可以說是無處不在,但它的無類動態(tài)對象、原型鏈繼承、組合繼承、寄生式繼承等特性使其具有更高的靈活性[9]。所以,只有深入理解JavaScript中實現(xiàn)繼承的原理,實現(xiàn)繼承機制才可以變得游刃有余。
參考文獻(References)
[3] 呂遠.基于JavaScript原型鏈的繼承機制研究[J].江陰工學(xué)院學(xué)報,2017(10):13-18.
[4] 石正喜.MySQL數(shù)據(jù)庫實用教程[M].北京:北京師范大學(xué)出版社,2014.
[5] 姜承堯.高性能網(wǎng)站MySQL數(shù)據(jù)庫實踐[J].程序員,2013(9):
49-53.
[6] 黃華林,宋陽秋.JavaScript面向?qū)ο筇匦詼\析與范例[J].安慶師范學(xué)院學(xué)報:自然科學(xué)版,2005(4):85-88.
[7] Zakas N C.JavaScript高級程序設(shè)計(第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.
作者簡介:
周? 嵐(1977-),女,碩士,副教授.研究領(lǐng)域:程序設(shè)計,軟件開發(fā)與數(shù)據(jù)庫.