# day01-面向對象和類的繼承 # 1.面向對象編程介紹 ## 1.1兩大編程思想 ●面向過程 ●面向對象 ## 1.2面向過程編程POP(Process-oriented programming) 面向過程就是分析出解決問題所需要的步驟,然后用函數把這些步驟一步- 步實現， 使用的時候再一個- 一個的依 次調用就可以了。 舉個栗子:將大象裝進冰箱,面向過程做法。  面向過程,就是按照我們分析好了的步驟,按照步驟解決問題。 ## 1.3面向對象編程OOP (Object Oriented Programming) 面向對象是把事務分解成為一個個對象,然后由對象之間分工與合作。 舉個栗子:將大象裝進冰箱,面向對象做法。 先找出對象,并寫出這些對象的功能: 1.大象對象 ●進去 2.冰箱對象 ●打開 ●關閉 3.使用大象和冰箱的功能 > 面向對象是以對象功能來劃分問題,而不是步驟。 在面向對象程序開發思想中,每一一個對象都是功能中心,具有明確分工。 面向對象編程具有靈活、代碼可復用、容易維護和開發的優點,更適合多人合作的大型軟件項目。 面向對象的特性: ●封裝性 ●繼承性 ●多態性  ## 1.4面向過程和面向對象的對比 ### 面向過程 ●優點:性能比面向對象高,適合跟硬件聯系很緊密 的東西,例如單片機就采用的面向過程編程。 ●缺點:沒有面向對象易維護、易復用、易擴展 ### 面向對象 ●優點:易維護、易復用、易擴展，由于面向對象有 封裝、繼承、多態性的特性,可以設計出低耦合的 系統，使系統更加靈活、更加易于維護 ●缺點:性能比面向過程低 用面向過程的方法寫出來的程序是一份蛋炒飯 ,而用面向對象寫出來的程序是一份蓋澆飯。 ## 2\. ES6中的類和對象 面向對象 面向對象更貼近我們的實際生活,可以使用面向對象描述現實世界事物.但是事物分為具體的事物和抽象的事物  面向對象的思維特點: 1.抽取(抽象)對象共用的屬性和行為組織(封裝)成一 個類(模板) 2.對類進行實例化， 獲取類的對象 面向對象編程我們考慮的是有哪些對象,按照面向對象的思維特點不斷的創建對象使用對象指揮對象做事情. # 2\. ES6中的類和對象 ## 2.1對象 現實生活中:萬物皆對象,對象是一個具體的事物 ,看得見摸得著的實物。例如,一本書、- 輛汽車、一個人 可以是“對象”, -一個數據庫、- -張網頁、一個與遠程服務器的連接也可以是”對象”。 在JavaScript中,對象是一組無序的相關屬性和方法的集合,所有的事物都是對象,例如字符串、數值、數組、 函數等。 對象是由屬性和方法組成的: ●屬性:事物的特征,在對象中用屬性來表示(常用名詞) ●方法:事物的行為,在對象中用方法來表示(常用動詞) ## 2.2類class 在ES6中新增加了類的概念,可以使用class關鍵字聲明一個類,之后以這個類來實例化對象。 類抽象了對象的公共部分,它泛指某一大類( class ) 對象特指某一個,通過類實例化一個具體的對象  ## 2.2類class 類抽象了對象的公共部分,它泛指某一大類( class ) 對象特指某一個,通過類實例化一個具體的對象 ### 面向對象的思維特點: 1.抽取(抽象)對象共用的屬性和行為組織(封裝)成一 個類(模板) 2.對類進行實例化，獲取類的對象 ## 2.3創建類 語法: ~~~ class name { // class body } ~~~ 創建實例: `var XX = new name() ;` > 注意:類必須使用new實例化對象 ## 2.4類constructor構造函數 constructor(方法是類的構造函數(默認方法) ,用于傳遞參數返回實例對象,通過new命令生成對象實例時 自動調用該方法。如果沒有顯示定義類內部會自動給我們創建一個constructor(） ## 2.5類添加方法 語法: ~~~ class Person { const ructor (name, age) { // constructor構造器或者構造函數 this.name = name ; this.age = age; } say() { console.log (this.name + '你好') ; } ~~~ # 3.類的繼承 ## 3.1繼承 現實中的繼承:子承父業,比如我們都繼承了父親的姓。 程序中的繼承:子類可以繼承父類的一些屬性和方法。 語法: ~~~ class Father { //父類 } class Son extends Father { // 子類繼承父類 } ~~~ ## 3.2 super 關鍵字 super關鍵字用于訪問和調用對象父類上的函數。可以調用父類的構造函數,也可以調用父類的普通函數 語法: ~~~ class Person { //父類 constructor (surname) { this.surname = surname; } } class Student extends Person { //子類繼承父類 constructor (surname , firstname) { super (surname); //調用父類的constructor (surname) this.firstname = firstname; //定義子類獨有的屬性 } } ~~~ > 注意:子類在構造函數中使用super,必須放到this前面(必須先調用父類的構造方法，在使用子類構造方法) ### ES6中的類和對象 三個注意點: 1.在ES6中類沒有變量提升,所以必須先定義類,才能通過類實例化對象. 2.類里面的共有屬性和方法一定要加this使用. 3.類里面的this指向問題 4\. constructor 里面的this指向實例對象方法里面的this指向這個方法的調用者 # 4.面向對象案例 ### 面向對象版tab欄切換 功能需求: 1.點擊tab欄，可以切換效果. 2\. 點擊+號,可以添加tab項和內容項. 3\. 擊x號,可以刪除當前的tab項和內容項. 4\. 雙擊tab項文字或者內容項文字，可以修改里面的文字內容. ### 面向對象版tab欄切換 抽象對象: Tab對象 1.該對象具有切換功能 2.該對象具有添加功能 3.該對象具有刪除功能 4.該對象具有修改功能 ### 面向對象版tab欄切換添加功能 1.點擊+可以實現添加新的選項卡和內容 2\. 第一步:創建新的選項卡li和新的內容section 3.第二步:把創建的兩個元素追加到對應的父元素中. 4.以前的做法:動態創建元素createElement ,但是元素里面內容較多需要innerHTML賦值在appendChild追加到父元素里面. 5.現在高級做法:利用insertAdjacentHTMLO可以直接把字符串格式元素添加到父元素中 ### 面向對象版tab欄切換刪除功能 1.點擊x可以刪除當前的li選項卡和當前的section 2\. X是沒有索引號的,但是它的父親li有索引號,這個索引號正是我們想要的索引號 3.所以核心思路是:點擊x號可以刪除這個索引號對應的li和section ### 面向對象版 tab 欄切換編輯功能 1.雙擊選項卡li或者section里面的文字可以實現修改功能 2.雙擊事件是: ondblclick 3.如果雙擊文字會默認選定文字,此時需要雙擊禁止選中文字 4\. window.getSelection ? window.getSelection0.removeAllRanges():document.selection.empty0; 5.核心思路:雙擊文字的時候，在里面生成一個文本框, 當失去焦點或者按下回車然后把文本框輸入的值給原先 元素即可.