JavaScript高級之面向對象和類的繼承

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.1 對象

現實生活中：萬物皆對象，對象是一個具體的事物，看得見摸得着的實物。例如，一本書、一輛汽車、一個人可以是“對象”，—個數據庫、一張網頁、一個與遠程服務器的連接也可以是“對象”。

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

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

• 屬性：事物的特徵，在對象中用屬性來表示(常用名詞)
• 方法：事物的行爲，在對象中用方法來表示(常用動詞)

2.2 類class

在ES6中新増加了類的概念，可以使用class關鍵字聲明一個類，之後以這個類來實例化對象。

• 類抽象了對象的公共部分，它泛指某一大類(class)
• 對象特指某一個，通過類實例化一個具體的對象

面向對象的思維特點：

1. 抽取（抽象）對象共用的屬性和行爲組織（封裝）成一個類（模板）
2. 對類進行實例化，獲取類的對象

2.3 創建類

語法：

class Name {
	// class body
}

創建實例：

var xx = new Name();

注意：類必須使用new實例化對象

2.4 類 constructor 構造函數

constructor()方法是類的構造函數(默認方法)，用於傳遞參數，返回實例對象，通過new命令生成對象實例，自動調用該方法。如果沒有顯示定義類，內部會自動給我們建一個 constructor()

// 1. 創建類 class 創建一個明星類
class Star {
    constructor(uname, age) {
        this.uname = uname;
        this.age = age;
    }
}

// 2. 利用類創建對象 new
var ldh = new Star('劉德華',18);
console.log(ldh.uname); // 劉德華
console.log(ldh.age); // 18

總結：

1. 通過class關鍵字創建類，類名我們還是習慣性定義首字母大寫
2. 類裏面有個constructor函數，可以接受傳遞過來的參數，同時返回實例對象
3. constructor函數只要new生成實例時，就會自動調用這個函數，如果我們不寫這個函數，類也會自動生成這個函數
4. 生成實例new不能省略
5. 最後注意語法規範，創建類時類名後面不要加小括號，生成實例時類名後面加小括號，構造函數不需要加function

2.5 類添加方法

語法：

class Person {
	constructor(name, age) {
    	this.name = name;
    	this.age = age;
	}
	say() {
    	console.log(this.name + "你好");
  	}
}

注意：

1. 我們類裏面所有的函數不需要寫function
2. 多個函數方法之間不需要添加逗號分隔

2.6 三個注意點

1. 在ES6中類沒有變量提升，所以必須先定義類，才能通過類實例化對象
2. 類裏面的共有的屬性和方法一定要加this使用
3. 類裏面的this指向問題：constructor裏面的this指向實例對象，方法裏面的this指向這個方法的調用者

var that;
var _that;
class Star {
  constructor(uname, age){
    // constructor 裏面的this指向的是 創建的實例對象
    that = this
    console.log(this) // Star

    this.uname = uname
    this.age = age
    // this.sing() // 在構造函數中使用定義好的方法，對象一new出來就直接執行該方法
    this.btn = document.querySelector('button')
    this.btn.onclick = this.sing // 按鈕點擊，執行方法
  }
  sing(){
    // 這個sing方法裏面的this指向的是btn這個按鈕，因爲這個按鈕調用了這個函數
    console.log(this) // <button>點擊</button>

    console.log(that.uname) // that 裏面存儲的是constructor裏面的this
  }
  dance(){
    // 這個dance裏面的this指向的是實例對象ldh，因爲ldh調用了這個函數 
    _that = this
    console.log(this) // Star
  }
}

var ldh = new Star('劉德華', 18)
console.log(that == ldh); // true
ldh.dance()
console.log(_that == ldh); // true

3. 類的繼承

3.1 繼承

現實中的繼承：子承父業，比如我們都繼承了父親的姓。
程序中的繼承：子類可以繼承父類的一些屬性和方法。

語法：

class Father {
    constructor() {}
    money() {
        console.log(100);
    }
}
// 繼承
class Son extends Father {

}

var son = new Son()
son.money()

3.2 super關鍵字

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

• 1.調用父類的構造函數：

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,z){
      super(x,y) // 調用了父類中的構造函數,super可以理解爲Father(父類)的實例對象
      this.z = z
    }
    out_ans(){
      console.log(this.z);
    }
}

var son = new Son(1, 2, 4)
son.sum() // 3 
son.out_ans() // 4

Son中的constructor傳遞Son的參數，super表示調用父類的構造函數，也就是說，將參數同樣傳遞給Father，再執行繼承過來父類的sum方法。

• 2.調用父類的普通函數
  • 繼承中，如果實例化子類輸出一個方法，先看子類有沒有這個方法，如果有就先執行子類的方法
  • 繼承中，如果子類裏面沒有，就去查找父類有沒有這個方法，如果有，就執行父類的這個方法（就近原則）

class Father {
  say() {
    return "我是爸爸";
  }
}

class Son extends Father {
  say() {
    console.log(super.say() + '的兒子');
  }
}

var son = new Son();
son.say();

總結：繼承中的屬性或者方法查找原則：就近原則

• 3.子類繼承父類方法同時擴展自己的方法

// 父類有加法方法
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
  }
  substract(){
    console.log(this.x - this.y);
  }
}

var son = new Son(5,3)
son.sum() //8
son.substract() //2

注：super 必須在子類this之前調用

參考資料

參考pink老師B站視頻：https://www.bilibili.com/video/BV1X7411n72U?p=1