JavaScript面向對象

1.1兩大編程思想：

1、面向過程

? 面向過程：POP(Process-oriented programming)

面向過程就是分析出解決問題所需要的步驟，然后用函數把這些步驟一步一步實現，使用的時候再一個一個的依次調用就可以了。

? 大象放到冰箱：打開冰箱==》放入大象==》關上冰箱

2、面向對象

? 面向對象：OOP (Object Oriented Programming)

面向對象是把事務分解成為一個個對象，然后由對象之間分工與合作。

大象(體重，走)，冰箱(質量，開門，關門)：都看成對象功能

面向過程:按照步驟完成面向對象:對象與對象之間合作完成

面向對象和過程區別

? 面向過程：小項目

? 面向對象：多人合作大項目

比如：

? 一個人蓋小狗窩，直接和泥，方磚，修飾既可

? 但是蓋高樓的話，需要打地基，需要運輸材料，需要財務結算等，此時不需要等，個做個的，效率高【模塊完成】

1.2面向對象三大特性

• 封裝性【已經把掃把功能準備好，負責開即可】
• 繼承性【繼承與拖拉機，會開拖拉機就會弄這個，繼承自拖拉機】
• 多態性【可以放到一起，也可以單獨拿下來，而且那個掃把壞了換哪個不影響其他的】

面向對象和過程優缺點

? 面向過程：

? 優點：性能比面向對象高，步驟聯系緊密

? 缺點：不好維護，不易多次使用及擴展

? 面向對象：

? 優點：易維護，可復用，可擴展，靈活性高

? 缺點性能沒有面向過程高

面向過程就是一份蛋炒飯，味道均勻，但是假如有的人不喜歡吃雞蛋，沒辦法分開

面向對象就是一個蓋澆飯，但是味道不均勻，而不想吃某種味道，可以分開

簡單程序面向過程，復雜程序用面向對象

ES6中的類和對象

ECMAScript5,ECMAScriot6;
JS：ECMAScript，DOM，BOMES5：沒有類，ES6：類類是在ES6中新加進入的，學會區分類和對象的概念類：泛指一類對象：類中的具體的某個實例，【屬性和方法的集合體】

類：抽象

? 類模擬抽象的，泛指的，對象是具體的

? 面向對象模擬現實世界，更貼近實際生活，生活照分為抽象事物和具體事物

	比如：手機【兩層含義：具體某個手機，和籠統的概念手機】1、抽取，把對象的屬性和行為封裝成一個類2、對類進行實例化, 獲取類的對象

例如：人有身高，體重等，但是具體的某個人也有這個屬性練習了解類和對象人==>姚明電影明星==》周星馳

對象：具體

? 對象：類中的具體的某個實例【屬性和方法的集合體】

? 現實生活中：萬物皆對象，對象是一個具體的事物，看得見摸得著的實物。例如，一本書、一輛汽車、一個人可以是“對象”

? 在JavaScript 中，對象是一組無序的相關屬性和方法的集合，所有的事物都是對象，例如字符串、數值、數組、函數等。

var n = 3;
var arr = [1,2,3]
var str = 'abcd';
function fn () {}

對象是由屬性和方法組成的：

? 屬性：對象有什么【訪問】【語法：對象.屬性】

? 方法：對象做什么【執行】【語法：對象.方法()】

? 屬性：事物的特征，在對象中用屬性來表示（常用名詞）

? 方法：事物的行為，在對象中用方法來表示（常用動詞）

arr.length
arr.reverse();
對象的屬性：對象.屬性
對象的方法：對象.方法();

面向對象的思維特點:

? 1.抽取（抽象）對象共用的屬性和方法組織(封裝)成一個類(模板)

? 2.對類進行實例化, 獲取類的對象

類class

在ES6中新增加了類的概念，可以使用class關鍵字聲明一個類，之后以這個類來實例化對象。【構造函數實例化對象】

• 類抽象了對象的公共部分，它泛指某一大類（class）

創建類

語法：class 類名 {屬性和方法}【構造函數語法糖】class Person {}注意類名首字母大寫類要抽取公共屬性方法，定義一個類

class Star {
};var ldh = new Star();類就是構造函數的語法糖

類constructor構造函數

語法：

class Star {constructor (uname,age){this.uname = uname;this.age = age;}
}屬性：放到constructor，構造函數里面

注意：類里面的方法不帶function，直接寫既可類里面要有屬性方法，屬性方法要是想放到類里面，我們用constructor構造器構造函數作用：接收參數，返回實例對象，new的時候主動執行，主要放一些公共的屬性

constructor() 方法是類的構造函數(默認方法)，用于傳遞參數,返回實例對象，通過new命令生成對象實例時，自動調用該方法。

注意：每個類里面一定有構造函數，如果沒有顯示定義, 類內部會自動給我們創建一個constructor() ，

注意：this代表當前實力化對象，誰new就代表誰

---

類添加方法

語法：注意方法和方法之間不能加逗號

class Star {constructor () {}sing () {}tiao () {}}

class 類名 { constructor(){}   方法名(){} }注意：類中定義屬性，調用方法都得用thisthis.屬性this.方法()

注意：方法之間不能加逗號分隔，同時方法不需要添加function 關鍵字

總結：類有對象的公共屬性和方法，用class創建，class里面包含constructor和方法，我們把公共屬性放到constructor里面，把公共方法直接往后寫既可，但是注意不要加逗號

上午回顧：

? 編程思想：面向過程，面向對象（封裝，繼承，多態）

? ES6：類（泛指），對象（具體）

? 創建類：class 類名 {contructor () {屬性} 方法() {} 方法() {}}

? 實例化：new 類名();

類的繼承

extends

語法：class Father {}class Son extends Father{}注意：是子類繼承父類

super關鍵字

我們應用的過程中會遇到父類子類都有的屬性，此時，沒必要再寫一次，可以直接調用父類的方法就可以了

super關鍵字用于訪問和調用對象父類上的函數。可以調用父類的構造函數，也可以調用父類的普通函數

當子類沒有constructor的時候可以隨意用父類的，但是如果子類也含有的話，constructor會返回實例，this的指向不同，不可以再直接使用父類的東西super：調用父類的方法（普通方法，構造方法）

調用父類構造函數

class F { constructor(name, age){} }class S extends F { constructor (name, age) { super(name,age); } }注意: 子類在構造函數中使用super, 必須放到this 前面(必須先調用父類的構造方法,在使用子類構造方法

調用父類普通函數

class F { constructor(name, age){} say () {} }class S extends F { constructor (name, age) { super(name,age); } say () { super.say() } }注意：如果子類也有相同的方法，優先指向子類，就近原則

總結：super調用父類的屬性和方法，那么查找方法的原則就近原則

屬性和方法：

? 屬性：如果子類既想有自己的屬性，又想繼承父類的屬性，那么我們用super【super(參數，參數)】

? 方法：如果子類和父類有相同的方法，加入子類依舊想用父類的方法，那么我們用super調用【super.方法()】

三個注意點

• 在ES6中類沒有變量提升，所以必須先定義類，才能通過類實例化對象.
• 類里面的共有屬性和方法一定要加this使用.【this，對象調用屬性和方法】按鈕練習
• 類里面的this指向問題.
• constructor 里面的this指向實例對象, 方法里面的this 指向這個方法的調用者

class Button {constructor () {var btn = document.querySelector('input');btn.onclick = this.cli;}cli () {console.log('點擊了');}}var anniu = new Button();

類里面的this指向

• 構造函數的this指向實例對象

• 普通函數的this是調用者，誰調用this是誰

	<input type="button" value="點擊">var that;class F {constructor (name, age) {this.name = name;this.age = age;// console.log(this);that = this;this.btn = document.querySelector('input');this.btn.onclick = this.cli;}cli () {console.log(this);}say () {console.log(this);}}var obj = new F('劉德華',22);

課程回顧：

? 編程思想：面向過程，面向對象（封裝，繼承，多態）

? ES6：類（泛指），對象（具體）

? 創建類：class 類名 {構造器（）{} 普通方法（） {}}

? 實例化：new 類

? 繼承：class Son extends Father {super}

? 三個注意點：

? 1、先定義類，再實例化

? 2、在類里面用屬性和方法，this.XXX;

? 3、構造函數this指向實例對象，普通函數this指向調用者

tab欄案例

this執行==》構造函數，new的對象，方法：this,調用者

面向對象版tab 欄切換

1.tab欄切換的主要思路是：2.點擊當前li 添加liactive 類其余li移除類3.根據當前li 的索引號當前section 添加類，其余section 刪除類4.這里可以把添加放入切換函數里面5.新增一個清除類函數，專門移除其余li和section 類6.注意里面this 指向問題

面向對象版tab 欄切換添加功能

1.點擊+ 可以實現添加新的選項卡和內容2.第一步: 創建新的選項卡li 和新的內容section3.第二步: 把創建的兩個元素追加到對應的父元素中.4.以前的做法:  動態創建元素createElement, 但是元素里面內容較多, 需要innerHTML賦值,在appendChild追加到父元素里面.5.現在高級做法:   利用insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中6.appendChild不支持追加字符串的子元素, insertAdjacentHTML支持追加字符串的元素7.insertAdjacentHTML(追加的位置,‘要追加的字符串元素’)  8.追加的位置有: beforeend插入元素內部的最后一個子節點之后9.該方法地址:  https://developer.mozilla.org/zh-CN/docs/Web/API/Element/insertAdjacentHTML