基于JavaScript技術實現的面向對象編程方法

宋文瑞

遼寧錦州渤海大學信息科學與技術學院

基于JavaScript技術實現的面向對象編程方法

宋文瑞

遼寧錦州渤海大學信息科學與技術學院

本文針對JavaScript技術實現的面向對象的編程實現方法，JavaScript編程技術作為一種腳本式函數語言嵌入到網頁的頁面中，在多年來，JavaScript編程技術是否具備面向對象的相關特性和要素，這種軟件編程技術長期處于具有面向對象特性的邊緣性是非常模糊的，本文通過使用簡單的程序示例，來講述JavaScript編程技術回歸面向對象編程的本意，本文將從編程技術語法角度講述JavaScript技術是一種擁有面向對象特性。JavaScript編程技術同其他高級語言C++和Java語言在語法上相似，為了深入了解JavaScript對象與函數是學習JavaScript編程技術的基礎。下面通過分析高級語言的面向對象的幾種特性：封裝性，繼承性，多態性，基于JavaScript語言實現的高級語言特性。本文通過JavaScript代碼片段實例，剖析JavaScript技術在網站開發中的編程與應用，在實際編程中使用JavaScript對象編程進行舉例說明。本文基于JavaScript技術實現的面向對象方法的一些探索，并給出了相關分析實例，展示了JavaScript編程技術在網頁編程中的優越性。

JavaScript 面向對象 編程語言 封裝性 繼承性 多態性

1 引言

目前，JavaScript編程技術是一種面向對象技術開發的高級編程語言，此高級編程語言可以被嵌入到網頁的頁面的文件里。通過JavaScript編程技術可以做到響應用戶點擊或者觸發的事件空間（例如：form表單的輸入情況、表單按鈕控件點擊情況），JavaScript編程技術和Java編程語言很類似，但也有本質上的區別，Java編程語言是一種比JavaScript技術更加復雜面向對象編程語言，而JavaScript則是相當簡單而且容易了解的編程語言。JavaScript只是注重程序開發的相關技巧，所以，許多Java編程語言的很多特性在JavaScript編程技術中并不支持。

JavaScript編程技術也是面向對象進行編程的思想。但是，很多程序員并不理解這一點是如何實現面向對象編程的思想。在JavaScript編程技術中的面向對象分為兩種情況：其一情況是可以稱為面向“普通對象”編程的思想，在JavaScript中存在的普通對象，例如：數字對象、布爾對象、日期對象、Number對象和各種用戶自定義的某個對象（如：方括號、花括號和圓括號）等等。其二情況是稱為面向“方法對象”編程的思想，在編程中通常定義為function函數。令人奇怪的是：function被稱為方法，它又怎么成為面向的對象編程呢？在JavaScript編程技術中，function方法確實被當成對象來看待。

在傳統面向對象的編程中，存在非常重要的幾個概念，本文將列出其中的兩個概念分別問：類和實例兩個概念。類則定義了相關事物存在公共的屬性和方法的集合；而實例則表示該類的具體實例對象是如何實現。在高級編程語言中面向對象編程有三個重要的特性分別為：封裝、繼承和多態。在JavaScript的編程實踐中，表面上并沒有高級編程語言的全部特性，尤其是：封裝、繼承和多態三個特性并不存在，而這些優良的特性真的不在JS中存在嗎？

由于JavaScript編程語言是基于對象編程OB（Object-Based）實現的，而非面向對象編程OO（Object-Oriented）實現的，雖然JavaScript編程技術并非基于面向對象編程的方法，但它完全實現一些面向對象編程的基本特征。下面通過分析高級編程語言的面向對象的幾種特性：封裝性、繼承性、多態性是如何在JS中實現，下面著重介紹這幾種特性實現過程。

2 通過JavaScript編程技術實現的對象封裝性

2.1 實現類的聲明過程

在JavaScript編程技術中，類的實現是基于函數方式來實現的過程，每個function直接被看成在Java編程中類的定義，這個類中可以定義相關的屬性或者方法，可以是全局變量或者局部變量，也可以賦初值或者定義一個默認的初值，在JavaScript編程技術中局部變量視為函數的成員對象，函數內部定義的函數可以自身的方法，下面簡單介紹關于類的聲明方式。通過定義一個動物類，其中包括動物類的屬性和相關方法，屬性為動物名稱、動物腿的數量、動物身體上顏色、動物生活區域等等，相關方法主要包括動物能夠實現“跑”的動作、能夠實現“吃肉”的動作。

Var 名稱；//定義一個全局的動物名稱變量

Var 腿數量； //定義一個全局的動物腿數量變量

Var 顏色； //定義一個全局的動物身上的顏色變量

Var 生活區域； //定義一個全局的動物生活區域的變量

Function 動物{//定義一個動物類，名稱為動物

This.名稱=”老虎”；//初始化動物名稱變量值

This.腿數量 =”4”； //初始化動物腿數量變量值

This.顏色=”黃色”； //初始化動物動物身上顏色變量值

This.生活區域=”森林中”； //初始化動物動物生活區域變量值

This.eat=function（）{alert（”表示該動物能吃肉!”）；}//函數表示該動物能吃肉

}

從上面的這段代碼片段可以看出，動物類已經定義了名稱、腿數量、顏色和生活區域四個與之相關的屬性，并在此類中定義了一個屬于該類的成員方法eat（），在函數外部的調用某個類的屬性時使用點”.”操作符，上面的代碼中名稱、腿數量、顏色和生活區域四個變量是公有的成員變量，那么在在JavaScript中能否定義私有成員變量呢？下面看這段代碼片段。

Function 動物{

Var 動物昵稱=”私有變量”； //這里定義很多的私有變量

This.名稱=”老虎”； //定義一個局部的動物名稱變量

This.腿數量 =”4”； //定義一個局部的動物腿數量變量

This.顏色=”黃色”； //定義一個局部的動物身上的顏色變量

This.生活區域=”森林中”； //初始化動物動物生活區域變量值

This.eat=function（）{alert（”表示該動物能吃肉!”）；} //函數表示該動物能吃肉

}

在上面的代碼中，Var動物昵稱=“私有變量”；則表示為該類中的私有成員變量，并且只在動物類中起到引用的作用，并不被外部的程序或者類所使用，僅僅屬于該類自己的變量。因此，在JavaScript中可以通過定義類中局部變量成為私有變量。

2.2 JavaScript中實現的構造函數

在JavaScript編程技術中，構造函數是為了實現對象的變量值初始化操作的功能，通過this變量和點“·”操作符實現構造函數的變量初始化操作，并且將變量值賦給某個對象的某個屬性，在編程語言中我們可以通過參考下面的代碼片段實現構造函數，使對象的變量進行初始化操作。

Function 動物（名稱，腿數量，顏色）{//定義一個動物類構造函數，含有三個參數分別是動物名稱、動物腿數量、動物身上顏色

This.名稱= 名稱； //通過動物類構造函數對動物名稱的變量賦初值

This.腿數量 =腿數量； //通過動物類構造函數對動物腿數量的變量賦初值

This.顏色=顏色； //通過動物類構造函數對動物身上顏色的變量賦初值

}

上面的這個代碼片段實現了在高級語言中的構造函數，為了某個類中的部分變量的初始化操作。

2.3 JavaScript中創建實例對象

通過JavaScript編程技術中創建某個類的實例化對象，下面通過創建幾個不同的動物類對象的實例化，下面的定義方式為創建某個類的實例化對象：

Var 老虎=new 動物（”老虎”，”4”，”黃色”）；

Var 華南老虎 =new 動物（”華南老虎”，”4”，”黃白相間”）；

上面的代碼是通過函數方式實現對象的實例化和封裝，通過JavaScript編程技術中創建某個類的實例化對象。

3 JavaScript中繼承性的實現

本節中講述的繼承性是指子類繼承父類的屬性或者方法，在子類中無需編寫與父類相同的代碼，在JavaScript中并沒有支持繼承的語法作支持，但是有一種方式可以通過隱式方式實現繼承，如果要實現繼承，簡單的方式是通過apply方法實現類之間的繼承性，將父類對象賦給子類對象上，即可實現子類對象中增加一處代碼即可實現，如下面的所示代碼片段實現類與類之間的繼承性。

Function 狗類（名稱，腿數量）{

動物.apply（this，顏色）；//將父類對象賦給子類對象中；

This.名稱= 名稱；//子類對象通過繼承父類參數對子類進行賦值

This.腿數量 =腿數量；

}

4 JavaScript中多態性的實現

本節中講述的多態性是在類中允許出現多個相同或者相似的函數名稱，構造成幾個表面上十分相似的函數名稱，但是，存在某些細微的差別之處，差別在于函數的參數個數、參數類型、函數的實現功能是不同的，如何在JavaScript編程技術中實現多態，有下面的幾種實現方式：重載和覆蓋。重載是根據在類中允許存在多個相似名稱的函數，而這些函數參數類型、個數或者返回值不同而已，或者參數和返回值都不同，只是看是相似而本質上并不相似。通過下面的代碼片段認識一下如何在JavaScript中實現多態性。

Function 動物（名稱）{This.名稱= 名稱；}

//含有一個參數動物類的構造函數，并通過動物類構造函數對動物名稱的變量賦初值

Function 動物（名稱，腿數量）{This.名稱= 名稱；This.腿數量 =腿數量；}

//含有兩個參數動物類的構造函數，并通過動物類構造函數對動物名稱的變量和動物腿數變量的初值

Function 動物（名稱，腿數量，顏色）{This.名稱= 名稱；

This.腿數量 =腿數量；This.顏色=顏色；}

//含有三個參數動物類的構造函數，并通過動物類構造函數對動物名稱的變量、動物腿數變量、動物身上顏色變量的初值

Function 主函數（）{

動物（“老虎”）； //此處調用帶有一個參數的動物類的構造函數，參數為“老虎”

動物（“老虎”，”4”）； //此處調用帶有兩個參數的動物類的構造函數，參數為“老虎”，“4”

動物（“老虎”，”4”，”黃色”） //此處調用帶有三個參數的動物類的構造函數，參數為“老虎”，“4”，“黃色”

}

上述的偽代碼片段顯示，實現了多個參數不同的函數動物類（名稱）、動物類（名稱，腿數量）、動物類（名稱，腿數量，顏色），動物類則是需要函數重載方式，總之，在JavaScript編程技術中實現函數重載是根據程序員自身定義形成一種重載方式，下面通過覆蓋的方式實現某類對象的多態性的具體實例，對于在網頁的網頁中重寫關閉當前網頁函數的代碼片段如下所示：