iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 9
0
Modern Web

好 Js 不學嗎 !? JavaScript 入門中的入門。系列 第 9

[Day09] JavaScript - 物件、方法與屬性 (上)

大綱

  • 物件基本概念

物件基本概念
JavaScript 除了原生型別 number、string、boolean、null、undefined 之外,幾乎都是物件,物件具有屬性 (properties) 與方法 (methods) 可以操作,使用『物件』來做程式設計模式稱為『物件導向程式設計』。

物件基本概念:認識物件導向
物件導向 (Object-oriented) 是程式開發設計的模式,顧名思義就是以物件為主的設計方法。

建立物件之前必須先定義物件的規格形式,稱為『類別 (class)』,也就是先定義好這個物件長什麼樣子以及要做哪些事情。類別定義的樣式,稱為 『屬性 (Properties)』,要做的事或提供的方法,稱為『類別 (Methods)』。『物件』則是由類別利用 new 關繫字建立的物件實體 (intance),由類別建立物件實體的過程稱為『實體化 (Instantiation)』。

物件導向的三大特性,分別是『封裝 (Encapsulation)』、『繼承 (Inheritance)』與『多型 (Polymorphism)』,以下簡單說明這三大特性。

  • 封裝:類別的內部成員封裝起來,他人不需要知道程式內部是如何實作,只能透過類別所提供的介面來操作公開的成員,達到『資料隱藏 (information hiding)』的效果,避免資料被任意修改及讀寫,也能過濾不必要或錯誤的資料。
  • 繼承:利用舊的類別建立出新的類別,舊類別稱為『父類別』,新的類別則稱為『子類別』。子類別不但會保有父類別公開的屬性及方法,還能夠擴充自己的屬性與方法。如此一來,程式就可以重複利用。
  • 多型:多行也稱為『同名異式』,簡單來說就是使用同一個介面,在不同的條件下執行不同的動作。

物件基本概念:JavaScript 的物件導向
JavaScript 雖然是物件導向程式語言,不過它與其他物件導向程式 (例如 C++、Java) 有很大的差別。因為 JavaScript 沒有真正的類別 (class) ! JavaScript 是以原型 (prototype-based) 為基礎的物鍵導向,用函數來當作類別 (class) 的建構子 (Constructor),稱為建構子函數,用複製建構子函數的方式來模擬繼承。ES6 加入了 class 關鍵字來處理物件,但底層依然是原型 (prototype),只是程式敘述看起來比較像一般認知的的類別寫法。以下先舉例 ES5 建構子函式及物件實體的寫法:

function Person(name, age) {    //建構子函式建立類別
  this.neme = name;
  this.age = age;
}
Person.prototype.showInfo = function() {    //定義 Person 共享的 showInfo 方法
  return '(' + this.name + ', ' + this.age + ')';
};
var girl = new Person('eileen', '18');    //物件實體
console.log(girl)

上面建立了一個名為 Person 的建構子函式,利用 var girl = new Person() 來建立 Person 的物件實體,在 JavaScript 中,只要物件都有預設一個公開的 prototype 屬性,prototype 就是所謂的『原型』,Person.prototype.showInfo 就會讓所有物件實體共用 showInfo 這個方法。

雖然 ES6 提供使用 class 關鍵字來定義類別,程式看起來很接近一般認知的物件導向,不過依然是以原型為基礎,只是以更簡潔的語法來建立物件。上面程式如果以 class 關鍵字來改寫,其寫法如下:

calss Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  showInfo() {
    return '(' + this.name + ', ' + this.age + ')';
  }
}
var girl = new Person('eileen', '18');
console.log(girl)

上一篇
[Day08] JavaScript - 函式與作用域
下一篇
[Day10] JavaScript - 物件、方法與屬性 (下)
系列文
好 Js 不學嗎 !? JavaScript 入門中的入門。30

尚未有邦友留言

立即登入留言