物件導向程式設計（OOP）

Walle

Published in

漫築蘭格

4 min readApr 23, 2019

先舉個例子來了解物件導向的基本概念。車子是一種擁有許多資料與功能的物件：

資料（製造廠、型號、車牌號碼等）
功能（加速、換檔、開車門等）

OOP 讓我們用抽象（車）與具體（特定的車種）這種方式來思考。

所謂的類別（class）代表一種統稱的東西（像是車）
物件實例（instance）則代表特定的東西（例如：我的車）

可以認同，我們不會為了一台新產出來的車，而定下一種關於車的新知識。
所以當我們第一次建立 instance 時，會執行他的class，建構式會將物件實例初始化。

而OOP也提供將class分類的方式，例如我們可以建立一個更通用的class，像是交通工具（包含車子、船、飛機、腳踏車），因為這些交通工具之間的資料與功能可能不同（像是船沒有輪子、腳踏車不需要加油等等）。這時候，我們可以說交通工具是車的父類別，車是交通工具的子類別。

子類別可以繼承父類別的所有方法，反之則不行，也就是繼承是單向的。
讓我們直接來看一個例子吧：

class Vehicle {
  constructor(){
    this.passengers = [];
  }
  addPassenger(p) {  //這是Vehicle的類別方法
    this.passengers.push(p)
  }
}class Car extends Vehicle {
  constructor(make, model) {
    super();
    this.make = make;
    this.model = model;
  }
  deployAirbags() { //車子有安全氣囊，但不是每種交通工具都有
    console.log("BOOM!")
  }
}

上面用到了extends功能，這個語法會將Car標成Vehicle的子類別。
另外一個功能super( )，這是JS的特殊函示，可以呼叫父類別的建構式，是子類別必用的功能。

const car = new Car("Tesla", "Model S") 
const vehicle = new Vehicle()car.addPassenger("Walle")
vehicle.addPassenger("John")console.log(car)
console.log(vehicle)

在上面這個範例中，terminal的結果：

可以注意到我們用Car這個class建立了一個instance，他繼承了父類別中addPassenger( )這個方法。

我們在看另一個範例：

car.deployAirbags()
vehicle.deployAirbags()

terminal顯示：

由此可知，繼承是無法反過來的。

建構式函式（constructor）

class是ES6新增的語法，在ES5中，有另一種建立類別的方式，它們的意思是一樣的，因為類別其實就是函式：

function Car(make, model) { }  //這叫做建構式函式，慣例上名稱要大寫開頭class Car { 
  constructor(make, model) {
  } 
}

＊關鍵字 “new”

在呼叫建構式函式 Car() 之前，我們必須用 new 這個關鍵字：

const car = new Car("Tesla", "Model S")

使用 new 時，事情會按以下順序發生：

先有一個空物件被建立
執行 Car函式
Car 裡的 this 被指定成剛剛的空物件。

物件導向程式設計（OOP）

建構式函式（constructor）

＊關鍵字 “new”

Written by Walle