第20章 面向?qū)ο缶幊?mdash;JavaScript中的.ppt

1、第20章 面向?qū)ο缶幊蘆avaScript中的類與繼承,上一章講述了如何使用JavaScript向HTML元素對象中添加新的屬性和方法。通過綜合以前章節(jié)的知識點，實現(xiàn)一個支持拖動、縮放、最大化和最小化的模擬窗口特效。同時還講述了如何書寫可以兼容“Fire Fox”瀏覽器的代碼。 本章將更加深入面向?qū)ο蟮木幊谈拍?，講述如何在JavaScript腳本中應(yīng)用面向?qū)ο蠓椒ǖ木幊趟枷搿?20.1 面向?qū)ο缶幊毯喗?隨著計算機應(yīng)用的發(fā)展，軟件正變得越來越大型化。與之相對應(yīng)的，程序設(shè)計與編寫的思路也在逐漸的改變著。面向?qū)ο螅ā癘bject Oriented”，簡寫為“OO”）的概念自上個世紀(jì)90年代開始流行

2、，直至今天，已經(jīng)成為程序員編寫程序的指導(dǎo)思想。,20.1.1 傳統(tǒng)編程方法的不足,最初人們使用的編程方法很簡單：需要執(zhí)行什么過程，就按照其邏輯編寫相應(yīng)代碼就可以了。例如需要執(zhí)行一個四則運算，那么就按照四則運算的法則，逐個對操作數(shù)進(jìn)行操作。這種編程方式被稱作過程型編程（PP）。 但是在代碼量逐漸增大后，人們發(fā)現(xiàn)，常常需要重復(fù)編寫同樣的功能模塊，為了減少不必要的工作量，函數(shù)（“function”）和子例程（“sub”）誕生了。人們將某些過程編寫為一個固定的功能代碼段，接受固定數(shù)量的參數(shù)或者不需要參數(shù)，執(zhí)行指定的過程，可能返回計算的結(jié)果或無返回值。這樣的編程方式被稱作函數(shù)型編程（FP）。 在源代碼長

3、度超過10000行的大型應(yīng)用程序中，即使是函數(shù)型編程也逐漸變得很難應(yīng)用。各種函數(shù)之間錯綜復(fù)雜的關(guān)系使得項目的邏輯變得很難理解。在修改了其中某個模塊后，造成的沖突范圍很難控制。,20.1.2 面向?qū)ο蟮幕靖拍?面向?qū)ο蟮木幊蹋ā癘bject Oriented Programing”，簡寫為“OOP”）方法可以克服上面提到的這些問題，這也是為什么這種思想這么收到程序員歡迎的原因。 首先需要讀者理解的是，面向?qū)ο缶幊淌且环N程序設(shè)計的思想，是一種實現(xiàn)軟件工程的工具，而不是程序編寫的目的。也可以說，面向?qū)ο笫浅绦騿T的一種“世界觀”，程序員把需要解決的問題抽象成“方法”、“模塊”還是“對象”，是“PP”

4、、“FP”和“OOP”的根本區(qū)別。,20.1.3 面向?qū)ο缶幊痰奶卣?面向?qū)ο缶幊叹哂幸恍癙P”和“FP”所沒有的特征： （1）對象唯一性。每個對象都有自身唯一的標(biāo)識，通過這種標(biāo)識，可找到相應(yīng)的對象。在對象的整個生命期中，它的標(biāo)識都不改變，不同的對象不能有相同的標(biāo)識。 （2）分類性。分類性是指將具有一致的數(shù)據(jù)結(jié)構(gòu)（屬性）和行為（操作）的對象抽象成類。 （3）繼承性。繼承性是子類自動共享父類數(shù)據(jù)結(jié)構(gòu)和方法的機制，這是類之間的一種關(guān)系。 （4）多態(tài)性（多形性）。多態(tài)性指相同的操作或函數(shù)、過程可作用于多種類型的對象上并獲得不同的結(jié)果。,20.1.4 面向?qū)ο缶幊痰囊?面向?qū)ο缶幊痰囊赜校?（1

5、）抽象。抽象是指強調(diào)實體的本質(zhì)、內(nèi)在的屬性。在系統(tǒng)開發(fā)中，抽象指的是在決定如何實現(xiàn)對象之前的對象的意義和行為。使用抽象可以盡可能避免過早考慮一些細(xì)節(jié)。 （2）封裝性（信息隱藏）。封裝性是保證軟件部件具有優(yōu)良的模塊性的基礎(chǔ)。 （3）共享性。面向?qū)ο蠹夹g(shù)在不同級別上促進(jìn)了共享： （4）.強調(diào)對象結(jié)構(gòu)而不是程序結(jié)構(gòu),20.2 JavaScript中的類,JavaScript是一種基于對象的語言，其與“面向?qū)ο蟆庇兄僭S的不同。在真正的面向?qū)ο蟮恼Z言中，例如“C+”或“Java”，有著用于定義“類”的關(guān)鍵字“Class”，也有著“Private”、“Public”等關(guān)鍵字定義屬性和方法的私有與公有。在

6、JavaScript中，“類”的實現(xiàn)是直接通過函數(shù)實現(xiàn)的。,20.2.1 JavaScript中類的構(gòu)造,前面說過，類是對具體對象的抽象。在JavaScript中，使用“function”來構(gòu)造類。例如： function User()/用戶類 ;/用戶的姓名 this.sex;/用戶的性別 函數(shù)“User”就定義了一個描述用戶對象的類。然后可以用： hutia = new User();,20.2.2 JavaScript類的屬性和方法,在JavaScript的類構(gòu)造函數(shù)中，通過“this”關(guān)鍵字向類中添加屬性和方法。例如前面給出的“User”類中，使用“var this.

7、name;”來聲明一個屬性。類中方法的添加與其類似，例如： function User()/用戶類 ;/用戶的姓名 this.login = function(password)/用戶的登錄方法 /類的方法 alert(“我在執(zhí)行登錄操作，密碼是：”+password); ,20.2.3 JavaScript類的原型“prototype”,所有的JavaScript均具有屬性“prototype”。此屬性指向構(gòu)建對象的原型。在使用關(guān)鍵字“new”和類的構(gòu)造函數(shù)來構(gòu)造新對象實例時，可以使用“prototype”來向類中添加新的屬性和方法。也就是說代碼.htm是一個使用“prot

8、otype”的例子。,20.3 JavaScript的封裝與繼承,面向?qū)ο缶幊讨?，比較重要的概念就封裝、繼承與多態(tài)。封裝著眼于數(shù)據(jù)的訪問控制，繼承使得代碼的重用性大大提高，多態(tài)能夠讓對象在運行時決定實際調(diào)用的方法體。由于JavaScript是一種動態(tài)語言，支持運行時綁定，討論它的多態(tài)實際上并沒有太大意義。下面將講述JavaScript封裝與繼承。,20.3.1 JavaScript的封裝,面向?qū)ο缶幊讨?，通過封裝來隱藏類內(nèi)部的實現(xiàn)細(xì)節(jié)。因此，類中的屬性和方法等成員數(shù)據(jù)的訪問權(quán)限分為三類：私有成員，僅允許類內(nèi)部的其他成員訪問；公共成員，允許任何域的函數(shù)對其進(jìn)行訪問、修改或刪除；特權(quán)成員，可以訪問

9、私有的變量和方法，同時其對公共域可見，可以被刪除或替換，但不可修改。 （1）私有變量通過“var”關(guān)鍵字在類的構(gòu)造函數(shù)內(nèi)部聲明，其語法如下： function myClass() var name = “hutia”;/類的私有變量 （2）公共函數(shù)和方法主要可以通過兩種方式加入類中，一種是在類的構(gòu)造函數(shù)中，通過關(guān)鍵字“this”來向其中添加公共成員，（3）類的特權(quán)方法可以訪問其私有成員，構(gòu)成了溝通外部和內(nèi)部的橋梁。其方式類似于公共方法的聲明，在類的構(gòu)造函數(shù)內(nèi)部聲明即可： function myClass()/類的構(gòu)造函數(shù) var data = hutia;/定義類的私有屬性 this.show

10、 = function()/定義特權(quán)方法 alert(data); obj1 = new myClass();/創(chuàng)建實例 obj1.show();/調(diào)用特權(quán)方法,20.3.2 JavaScript的繼承,繼承是面向?qū)ο笳Z言中擴展已有類型的一種有效途徑，JavaScript沒有提供用于實現(xiàn)繼承的“extends”關(guān)鍵字或者“:”操作符，但是，作為一種動態(tài)語言，可以在需要的時候，用“prototype”向類中添加屬性和方法。也就是說，JavaScript和一般真正的面向?qū)ο笳Z言不同的是，JavaScript只能通過原型來實現(xiàn)模擬的繼承，例如： function myParentClass()/聲明

11、一個父類 this.data = hutia;/聲明一個公共屬性 function mySubClass()/聲明一個子類 this.showSubData = function()/定義一個公共方法 alert(公共屬性data的值是：+this.data); mySubCtotype = new myParentClass();/使用原型來模擬繼承 obj1 = new mySubClass();/創(chuàng)建一個子類的實例對象 obj1.showSubData();/調(diào)用子類的公共方法,20.3.3 獲取函數(shù)對象的調(diào)用參數(shù),已經(jīng)反復(fù)提到的一個概念是，在JavaScript中，所有

12、的組成元素都是基于對象的。因此，“函數(shù)”這種在很多語言中僅僅是一種過程編程組織形式的元素，在JavaScript中也成為了一種對象。上一小節(jié)中，實現(xiàn)JavaScript繼承的一種方法，就是通過調(diào)用“函數(shù)”對象的“apply”方法來實現(xiàn)的。 函數(shù)對象除了上面提到的“apply”和“call”方法外，還有著很多很有用的屬性。 “arguments”屬性，儲存了函數(shù)被調(diào)用時提供的參數(shù)。其引用語法為： funcHandle.arguments “funcHandle”是某個函數(shù)的引用句柄。在“funcHandle”函數(shù)體中，引用此對象時，可以省略“funcHandle”部分?！癮rguments”屬性

13、指向一個類似于數(shù)組的對象，具有“l(fā)ength”屬性，來標(biāo)志其組成元素的長度。因此可以通過循環(huán)來獲得當(dāng)前函數(shù)被調(diào)用時的所有函數(shù)。,20.3.4 獲取函數(shù)對象的上級函數(shù),函數(shù)對象具有另一個屬性是“caller”。此屬性指向調(diào)用此函數(shù)的上級函數(shù)對象。如果不是在函數(shù)中，而是在過程執(zhí)行中調(diào)用的函數(shù)，則此屬性返回“null”。例如： function main() sub_func();/調(diào)用子函數(shù) function sub_func() alert(sub_func.caller);/返回對函數(shù)“main”的引用 ,20.4 構(gòu)造一個菜單類,前面的講述對于新手來說可能有些過于抽象，下面將演示一個具體的應(yīng)

14、用例子，使用類封裝和繼承的方法來構(gòu)造一個Web頁面菜單效果。使用類的封裝來實現(xiàn)Web頁面特效，可以首先設(shè)計一個非常抽象的類，定義好其結(jié)構(gòu)等，然后通過繼承對其逐步擴展和完善。 代碼20-6.htm是一個Web頁面的菜單特效。 20-6.htm 構(gòu)造菜單類 20-6 構(gòu)造菜單類 * font-size:12px; font-family:宋體, Arial; /*規(guī)定了所有的字體樣式*/ body overflow:auto; .item float:left; cursor:pointer; padding:1px 6px; width:100%; .item_mover background-

15、color:#D0E0F0; .menu_layer width:160px; border:1px outset buttonface; background-color:buttonface; ,20.5 小結(jié),本章從程序設(shè)計的角度，講解了JavaScript中，面向?qū)ο蟮膶崿F(xiàn)方法。由于JavaScript是一種基于對象的語言，因此其面向?qū)ο蟮膶崿F(xiàn)與傳統(tǒng)的面向?qū)ο蟮恼Z言稍有不同。在JavaScript中，沒有用于實現(xiàn)類和繼承機制的關(guān)鍵字，而是使用函數(shù)來實現(xiàn)類的構(gòu)造和繼承。本章講解的知識點有： （1）面向?qū)ο缶幊袒A(chǔ)。講述了什么是面向?qū)ο?，面向?qū)ο缶幊痰膬?yōu)勢和需要注意的要素。 （2）JavaScript中類的實現(xiàn)。講述了如何使用函數(shù)作為類的構(gòu)造器。 （3）“prototype”原型的作用。