JavaScript面向對象學習(part1)——筆記整理+課後練習 ×1+this指向問題

文章目錄
一.面向過程與面向對象
   1.2面向對象
   1.3面向過程與面向對象對比
二.對象與類
   2.1對象
   2.1.1創建對象
   2.2類
   2.2.1創建類
   2.2.3類的繼承

一.面向過程與面向對象

1.2面向對象

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

1.3面向過程與面向對象對比

	面向過程	面向對象
優點	性能比面向對象高，適合跟硬件聯繫很緊密的東西，例如單片機就採用的面向過程編程。	易維護、易複用、易擴展，由於面向對象有封裝、繼承、多態性的特性，可以設計出低耦合的系統，使系統 更加靈活、更加易於維護
缺點	不易維護、不易複用、不易擴展	性能比面向過程低

二.對象與類

2.1對象

對象是由屬性和方法組成的：是一個無序鍵值對的集合,指的是一個具體的事物

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

2.1.1創建對象

創建對象：

//字面量創建對象
var ldh = {
    name: '易烊千璽',
    age: 18
}
console.log(ldh);

構造函數創建對象：

//構造函數創建對象
  function Star(name, age) {
    this.name = name;
    this.age = age;
 }
var ldh = new Star('易烊千璽', 18)//實例化對象
console.log(ldh);	

2.2類

• ES6後，可以使用 class 關鍵字聲明一個類，之後以這個類來實例化對象。類抽象了對象的公共部分，它泛指某一大類（class）對象特指某一個，通過類實例化一個具體的對象。

2.2.1創建類

1. 語法:

//步驟1 使用class關鍵字
class name {
  // class body
}     
//步驟2使用定義的類創建實例  注意new關鍵字
var xx = new name();     

2. 示例

 // 1. 創建類 class  創建一個 明星類
 class Star {
   // 類的共有屬性放到 constructor 裏面
   constructor(name, age) {
   this.name = name;
   this.age = age;
   }
 }
   // 2. 利用類創建對象 new
   var ldh = new Star('易烊千璽', 18);
   console.log(ldh);

創建對象注意事項：

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

2.2.3類的繼承

1. 語法(extends)繼承父類

// 父類
class Father{   
} 

// 子類繼承父類
class  Son  extends Father {  
}       

2. 子類使用super關鍵字訪問父類的方法

//定義了父類
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); //使用super調用了父類中的構造函數
    	}
    }
    var son = new Son(1, 2);
    son.sum(); //結果爲3

注意:

1. 繼承中,如果實例化子類輸出一個方法,先看子類有沒有這個方法,如果有就先執行子類的

2. 繼承中,如果子類裏面沒有,就去查找父類有沒有這個方法,如果有,就執行父類的這個方法(就近原則)

3. 如果子類想要繼承父類的方法,同時在自己內部擴展自己的方法,利用super 調用父類的構造函數,super 必須在子類this之前調用

4. 在 ES6 中類沒有變量提升，所以必須先定義類，才能通過類實例化對象

---

時刻注意this的指向問題,類裏面的共有的屬性和方法一定要加this使用.

1. constructor中的this指向的是new出來的實例對象
2. 自定義的方法,一般也指向的new出來的實例對象
3. 綁定事件之後this指向的就是觸發事件的事件源

---

練習題part：

子類繼承父類的屬性和方法

• 題目描述

  一個父類中有money(錢) cars(車) house(房) company(公司) 屬性,有管理(manage)的方法,子類要繼承父類中的屬性和方法

• 訓練目標

  能夠理解繼承的原理

• 訓練提示

  1. 創建父類添加屬性和方法
  2. 子類通過extends關鍵字繼承到父類的屬性和方法
  3. 注意constructor和this的問題

<script>
        class Father {
            constructor(money, cars, house, company) {
                this.money = 100000000;
                this.cars = '保時捷';
                this.house = '海景別墅';
                this.company = '開心代碼有限公司';
            }
            manages(manage) {
                console.log('喫飯睡覺碼代碼喫飯睡覺碼代碼');
            }
        }

        class Son extends Father {
            //兒子啥都不想幹啥都不會
        }

        var result = new Son();
        console.log(result.money + 'and' + result.cars + 'and' + result.house + 'and' + result.company);
        result.manages();
    </script>

---

碼代碼