1.面向對象編程介紹
1.1兩大編程思想
- 面向過程
- 面向對象
1.2面向過程編程POP（process-oriented Programming）
面向過程就是分析出解決問題所需要的步驟，然後用函數把這些步驟一步一步實現，使用的時候再一個一個的一次調用就可以了。
1.3面向對象編程OOP（Object Oriented Programming）
面向對象是把事務分解成爲一個個對象，然後由對象之間分工與合作。
在面向對象程序開發思想中，每一個對象都是功能中心，具有明確分工。
面向對象編程具有靈活、代碼可複用、容易維護和開發的優點，更適合多人合作的大型軟件項目。
面向對象的特性：
- 封裝性
- 繼承性
- 多態性
1.4面向過程和麪向對象的對比
面向過程：
- 優點：性能比面向對象高，適合跟硬件聯繫很密切的東西，例如單片機就採用面向過程編程
- 缺點：沒有面向對象易維護、易複用、易擴展
面向對象
- 優點：易維護、易複用、易擴展，由於面向對象有封裝、繼承、多態性的特徵，可以設計出低耦合的系統，使系統更加靈活、更加易於維護
- 缺點：性能比面向過程低
2.ES6中的類和對象
面向對象思維特點：
1.抽取（抽象）對象共用的屬性和行爲組織（封裝）成一個類（模板）
2.對類進行實例化，獲取類對象
面向對象編程我們考慮的是有哪些對象，按照面向對象的思維特點，不斷的創建對象，使用對象，指揮對象做事情
2.1對象
現實生活中：萬物皆對象，對象是一個具體的事物，看得見摸得着的實物，例如：一本書、一輛汽車、一個人、可以是“對象”，一個數據庫、一張網頁、一個與遠程服務器的連接也可以是“對象”。
在JavaScript中，對象是一組無序的相關屬性和方法的集合，所有的事物都是對象，例如：字符串、數值、數組、函數等。
對象是由屬性和方法組成的：
- 屬性：事物的特性，在對象中用屬性來表示（常用名詞）
- 方法：事物的行爲，在對象中用方法來表示（常用動詞）
2.2類class
在ES6中新增了類的概念，可以使用class關鍵字聲明一個類，之後以這個類來實例對象。
類抽象了對象的公共部分，它泛指某一大類（class）對象特指某一個，通過類實例化一個具體的對象
2.3創建類
語法：
創建實例：
注意：類必須使用new實例化對象
2.4類constructor構造函數
constructor()方法是類的構造函數（默認方法），用於傳遞參數，返回實例對象，通過new命令生成對象實例時，自動調用該方法，如果沒有顯示定義，類內部會自動給我們創建一個constructor()
2.5類添加方法
語法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.創建一個類 class 創建一個 明星類
class Star {
//類的共有屬性放到constructor裏面
constructor(uname, age) {
this.uname = uname;
this.age = age;
}
sing(song) {
console.log(this.uname + song);
}
}
//2.利用類創建對象 new
var ldh = new Star("劉德華", 18);
var zxy = new Star("張學友", 20);
console.log(ldh);
console.log(zxy);
//(1).通過class關鍵字創建類，類名我們還是習慣定義首字母大寫
//(2)類裏面有個constructor函數 可以接收傳遞過來的參數 同時返回實例對象
//(3)constructor函數 只要new生成實例時 就會自動調用這個函數 如果我們不寫這個函數
//類也會自動生成這個函數
//(4)生成實例new 不能省略
//(5)最後注意語法規範，創建類 類名後面不要加小括號 生成實例 類名後面加小括號 構造函數不需要加 function
ldh.sing("冰雨");
zxy.sing("李香蘭");
</script>
</body>
</html>
3.類的繼承
3.1繼承
現實中的繼承：子承父業，比如我們都繼承了父親的姓。
程序中的繼承：子類可以繼承父類的一些屬性和方法
語法：
3.2super關鍵字
super關鍵字用於訪問和調用對象父類上的函數，可以調用父類的構造函數，也可以調用父類的普通函數
子類調用父類構造函數：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//1.類的繼承
// class Father {
// constructor() {
// }
// money() {
// console.log(100);
// }
// }
// class Son extends Father {}
// var son = new Son();
// son.money();
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
class Son extends Father {
constructor(x, y) {
super(x, y); //調用了父類中的構造函數
}
}
var son = new Son(1, 2);
var son1 = new Son(11, 22);
son.sum();
son1.sum();
</script>
</body>
</html>
子類調用父類普通函數：
語法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//super關鍵字調用父類普通函數
class Father {
say() {
return '我是爸爸';
}
}
class Son extends Father {
say() {
// console.log('我是兒子');
console.log(super.say() + '兒子');
//super.say()就是調用父類中的普通函數say()
}
}
var son = new Son();
son.say();
//繼承中的屬性或者方法查找原則：就近原則
//1.繼承中，如果實例化子類輸出一個方法，想看子類有沒有這個方法，如果有就先執行子類的
//2.繼承中，如果子類裏面沒有，就去查找父類有沒有這個方法，如果有，就執行父類的這個方法（就近原則）
</script>
</body>
</html>
子類繼承父類的方法同時擴展自己的方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
class Father {
constructor(x, y) {
this.x = x;
this.y = y;
}
sum() {
console.log(this.x + this.y);
}
}
//子類繼承父類加法方法 同時擴展減法方法
class Son extends Father {
constructor(x, y) {
//利用super調用父類的構造函數
//super必須在子類this之前調用
super(x, y);
this.x = x;
this.y = y;
}
subtract() {
console.log(this.x - this.y);
}
}
var son = new Son(5, 3);
son.subtract();
son.sum();
</script>
</body>
</html>
注意：子類在構造函數中使用super，必須放到this前面（必須先調用父類的構造方法，再使用子類構造方法）
4.ES6中的類和對象
三個注意點：
1.在ES6中類沒有變量提升，所以必須先定義類，才能通過類實例化對象
2.類裏面的共有屬性和方法一定要加this使用
3.類裏面的this指向問題
4.constructor裏面的this指向實例對象，方法裏面的this指向這個方法的調用者
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>點擊</button>
<script>
var that;
var _that;
class Star {
constructor(uname, age) {
//constructor裏面this 指向的是 創建的實例對象
that = this;
console.log(this);
this.uname = uname;
this.age = age;
// this.sing();
this.btn = document.querySelector('button');
this.btn.onclick = this.sing;
}
sing() {
// console.log('hi');
//這個sing方法中的this指向的是btn這個按鈕 因爲這個按鈕調用了這個函數
console.log(this);
// console.log(this.uname); //輸出undefined， 因爲sing（）被btn調用， this指向btn， 而btn沒有uname屬性
console.log(that.uname); //that裏面存儲的是constructor裏面的this
}
dance() {
//這個dance裏面的this 指向的是實例對象 ldh 因爲ldh調用了這個函數
_that = this;
console.log(this);
}
}
var ldh = new Star("劉德華");
console.log(that === ldh); //返回true
// ldh.sing();
ldh.dance();
console.log(_that === ldh); //返回true
//1.在ES6中類沒有變量提升，所以必須要先定義類 才能通過類實例化對象
//2.類裏面的共有的屬性和方法一定要加this使用
</script>
</body>
</html>