物件導向概念

OOP 能吃嗎?

C 語言程式設計是以函數 (Function) 為單元的結構化程式設計, C++ 語言程式設計則是以類別 (Class)為單元的物件導向程式設計。
-- C++ 全方位學習,古頤榛
物件導向程式設計 (Object-Oriented Programming, OOP) 是使用類別物件為主的程式設計。類別觀念是由結構衍生而來。
類別可以包含資料變數與處理資料的函數:
  • 資料成員: 我是類別中的資料!
  • 成員函數: 我是類別中的函式!
對於沒有本科經驗的人來說,物件導向一直是個謎一樣的存在。
我依稀記得,在去年的 JSDC Workshop 的某個議程中,講者保哥提到了物件導向並且問了在座的各位有沒有聽過。
令人驚訝的是!還真的有很多人不知道 XDD
所以各位讀者如果學會了,說不定就能成為前10%的開發者喔
我自己對物件導向程式設計的見解是:
一種設計思維,利用該思維實作出一個物體的抽象概念。
-- 帥氣的我。
公X小,如果以螃蟹機器人作為舉例,機器人完成組裝的那一刻有什麼是確定的呢?
大概有:
  • 資訊
    • 製造商
    • 型號
    • 序列號碼
    • 諸如此類...
  • 行為、行為所需的參數
    • 電量
    • 向右移
    • 向左移
    • 諸如此類...
以物件導向下去實作的話,大概會長這樣:
1
class tableTopRobot {
2
constructor(data){
3
let {sN, vendor, material, power} = data;
4
this.sN = sN;
5
// ...
6
}
7
moveToRight(){
8
// ...
9
}
10
moveToLeft(){
11
// ...
12
}
13
}
14
let data = {
15
sN: '2030',
16
vendor: 'ianToy',
17
// ...
18
}
19
let peter = new tableTopRobot(data);
Copied!
我們利用資料成員以及成員函數詳細的定義螃蟹機器人的各項細節,包含它要如何行走、電量、生產細節...等資訊。
此外,物件導向也包含了繼承的概念:
1
class people {
2
public name: string;
3
constructor(name:string){
4
this.name = name;
5
}
6
sayHi(){
7
return `Hello! My name is ${this.name}`;
8
}
9
}
10
class superHero extends people {
11
public birthday: number;
12
constructor(name: string, birthday: number){
13
super(name);
14
this.birthday = birthday;
15
}
16
tellMeBirthday(){
17
return `${this.birthday}`
18
}
19
}
20
let peter = new superHero('Peter',19990119);
21
console.log(peter.tellMeBirthday())
Copied!
上面的程式是使用 TypeScirpt 撰寫,我們可以在範例中觀察到 superHero 類別繼承了 people 類別的特性。
這邊只是先讓讀者對物件導向有粗淺的了解,詳細的實作方面會用多篇文章細談。

至於 JavaScript 呢?

早期, JavaScript 是不支援物件導向的,它更傾向函式語言程式設計。
幸好,在廣大的開發者社群的努力下, JavaScript 終於在 ES6(2015) 正式的支援物件導向程式設計。
我們在更仔細的回想上一小節提到的:
類別可以包含資料變數與處理資料的函數。
有經驗的開發者可能就會問: 阿物件不是也可以嗎!
沒錯,其實 JavaScript 的 Class 就是物件的語法糖。
JS ES5:
1
function Point(x, y) {
2
this.x = x;
3
this.y = y;
4
}
5
6
Point.prototype.toString = function () {
7
return '(' + this.x + ', ' + this.y + ')';
8
};
9
10
var p = new Point(1, 2);
Copied!
JS ES6:
1
class Point {
2
constructor(x, y) {
3
this.x = x;
4
this.y = y;
5
}
6
7
toString() {
8
return '(' + this.x + ', ' + this.y + ')';
9
}
10
}
Copied!
JS 提供了一個讓人勉強接受的 Class ,好消息是: TypeScript 當然針對這點做出了全面的加強,詳細的用法筆者會在後面幾個篇章向大家好好介紹。

原型鏈

JS 是一門奇怪的語言,你如果不知道原型鏈是什麼也能寫出程式碼,
但筆者認為,如果知道這個概念對於讀者會更好。
請先參考本日的延伸閱讀。

延伸閱讀

同樣的事情在不同人眼中可能會有不同的見解、看法。
在讀完本篇以後,筆者也強烈建議大家去看看以下文章,或許會對型別、變數宣告...等觀念有更深層的看法唷!
Last modified 1yr ago