Web前端開發(fā)-交互式設計（JavaScript+jQuery） 課件 單元4 面向對象編程

Web前端開發(fā)—交互式設計

（JavaScript+jQuery）主編：孫佳帝

孫文江編委：白哲佳張卓2023年電子工業(yè)出版社JavaScript概述01JavaScript語言基礎02JavaScript函數 03面向對象編程 04JavaScript內置對象05BOM編程06DOM編程07DOM事件08利用JQuery編程09設計個性化網站1004單元4面向對象編程

Web前端開發(fā)—交互式設計4.1理解對象1.對象的基本概念

對象是無序集合數據類型，由若干鍵值對來組成。對象是一個抽象的概念，可以將其簡單理解為：數據集或功能集。對象有屬性和方法：屬性是對象的狀態(tài)，方法是對象的行為（完成某種任務）。對象的屬性和方法調用，參考【訓練4-2】2.屬性的類型（1）

數據屬性數據屬性包含一個數據值的位置，在這個位置可以讀取和寫入值。（不能直接訪問，所以將它們放在方括號中）。屬性描述默認值Configurable表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，或者能否把屬性修改為訪問器屬性trueEnumerable能否通過for-in循環(huán)返回屬性trueWritable能否修改屬性的值trueValue屬性的數據值undefined數據屬性可以直接使用對象字面量或newObject對象來定義，而這些特性值不能直接訪問，要修改默認的特性，要使用定義在Object對象中的defineProperty()方法。參考【訓練4-3】2.屬性的類型（2）訪問器屬性訪問器屬性不包含數據值。參考【訓練4-4】2.屬性的類型屬性描述默認值Configurable表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性特性，或者能否把屬性修改為訪問器屬性trueEnumerable表示能否通過for-in循環(huán)返回屬性trueGet獲取函數，在讀取屬性時調用undefinedSet設置函數，在寫入屬性時調用undefined2.屬性的類型（3）定義多個屬性Object.defineProperty()方法只能定義單個屬性，Object.defineProperties()方法可以通過描述符一次定義多個屬性。參考【訓練4-5】2.屬性的類型（4）讀取屬性特征Object.getOwnPropertyDescriptor()

方法返回指定對象上一個自有屬性對應的屬性描述符。參考【訓練4-6】4.2創(chuàng)建對象1.構造函數模式雖然使用Object構造函數或對象字面量可以方便地創(chuàng)建對象，但此方式也有明顯不足，創(chuàng)建具有同樣接口的多個對象需要大量重復代碼，為了解決這個問題引入構造函數模式。在JavaScript中，通過使用new關鍵字調用一個函數，該函數會被當作構造函數來執(zhí)行，從而創(chuàng)建一個新的對象。參考【訓練4-7】1.構造函數模式在【訓練4-7】這個例子中，fireworks函數作為構造函數，通過this.type=type;將屬性type添加到新創(chuàng)建的對象中，然后又通過this.model方法將一個方法添加到新對象中。最后，通過newfireworks('煙花')創(chuàng)建了一個對象yanhua，并成功調用了它的屬性和方法。2.原型模式原型模式是一種常見的對象創(chuàng)建方式。每個函數對象在被創(chuàng)建時，會自動關聯(lián)一個原型對象（prototype），我們可以通過修改這個原型對象來實現對象之間的共享屬性和方法。通過prototype調用構造函數,參考【訓練4-8】3.對象迭代（1）Object.values()Object.values()方法返回一個給定對象自身的所有可枚舉屬性值的數組，值的順序與使用for...in循環(huán)的順序相同(區(qū)別在于for-in循環(huán)枚舉原型鏈中的屬性)。返回對象自身可枚舉屬性值組成的數組，不包括原型鏈上的屬性，返回對象自身可枚舉屬性值組成的數組；不包括原型鏈上的屬性。參考【訓練4-11】3.對象迭代（2）Object.entries()Object.entries()返回對象自身可枚舉屬性的鍵值對數組，不包括原型鏈上的屬性，返回對象自身可枚舉屬的鍵值對數組;不包括原型鏈上的屬性；返回的是一個二維數組，屬性名在前，屬性值在后。參考【訓練4-12】4.3繼承1.原型鏈原型鏈是主要繼承方式。原型鏈其基本思想就是通過原型繼承多個引用類型的屬性和方法。在訪問一個處于原型鏈當中的對象的屬性，會沿著原型鏈對象一直向上查找，可以把這種原型遍歷操作看成是一個單向的鏈表，每一個處于原型鏈的對象都是鏈表當中的一個節(jié)點，JavaScript引擎會沿著這條鏈表一層一層的向下查找屬性，如果找到了一個與之匹配的屬性名，則返回該屬性的值，如果在原型鏈的末端都沒有找到與之匹配的屬性，則返回undefined。采用原型鏈的機制實現繼承，參考【訓練4-13】2.原型式繼承原型式繼承不使用構造函數實現繼承，即使不自定義類型也可以通過原型實現對象之間的信息共享。object()函數繼承：functionobject(o){functionF(){};F.prototype=o;returnnewF();}參考【訓練4-16】3.繼承式繼承寄生式繼承是與原型式繼承緊密相關的一種思路。寄生式繼承的思路與寄生構造函數和工程模式類似，即創(chuàng)建一個僅用于封裝繼承過程的函數，該函數的內部以某種方式來增強對象，最后再像真的是它做了所有工作一樣返回對象。參考【訓練4-17】4.寄生式組合繼承組合繼承存在這一定的效率問題，它的父類構造函數始終會被調用倆次，一次在創(chuàng)建字類原型時調用，另一次在子類構造函數中調用，本質上子類只需要在執(zhí)行時重寫自己的原型。參考【訓練4-19】參考【訓練4-20】4.4類1.類定義類抽象了對象的公共部分，它泛指某一大類（class）。class關鍵字聲明一個類，以這個類來實例化對象。對象特指某一個，通過類實例化一個具體的對象。創(chuàng)建類。語法格式：

classname{//classbody}//創(chuàng)建實例，語法格式如下：varxx=newname();2.類構造函數構造函數主要用來創(chuàng)建對象，并為對象的成員賦初始值?？梢园褜ο笾械囊恍┕驳膶傩院头椒ǔ槿〕鰜?，封裝到構造函數中。參考【訓練4-22】3.類成員（1）實現類的公有成員該類的任何實例都對外公開這些屬性和方法。（2）實現類的私有成員私有成員即在類的內部實現中可以共享的成員，不對外公開。在類的構造函數中可以為類添加成員，通過這種方式定義的類成員，實際上共享了在構造函數內部定義的局部變量，這些變量就可以看作類的私有成員。

參考【訓練4-23】3.類成員（3）實現靜態(tài)成員靜態(tài)成員屬于一個類的成員，它可以通過“類名.靜態(tài)成員名”的方式訪問。參考【訓練4-24】如果要給每個函數對象都添加通用的靜態(tài)方法，還可以通過函數對象所對應的類Function來實現。參考【訓練4-25】4.繼承繼承用來表示兩個類之間的關系，子類可以繼承父類的一些屬性和方法，在繼承以后還可以增加自己獨有的屬性和方法。類的繼承使用extends關鍵字。參考【訓練4-26】【案例4-1】

面向對象-煙花噴泉效果頁面【案例分析】利用本章所學的面向對象的思想，美化網頁頁面，制作一個煙花效果頁面。實現煙花噴泉的效果如下：【解決方案】創(chuàng)建一個背景及其顏色和大小，