[ JS筆記 ] JavaScript 物件導向 - 基礎介紹


Posted by Akira on 2022-01-19

物件導向是什麼?

MDN 說明:
物件導向程式設計 (Object-oriented programming;OOP)基本概念是:採用物件(objects)來模塑真實的實物世界:也就是在程式中的呈現是透過 objects 來塑造其模型,且或提供簡單方式存取其「難以或不可能採用的功能」。

用公仔來舉例

說白話一點,就像是我要做很多的貓咪公仔時,先出一個貓咪的素偶,還沒上色的形體,這個素偶就是建構子( Constructor )。這個素偶有好多個地方可以上色,眼睛、耳朵、圍巾⋯ ( 物件的屬性 property ) 。當然,你也可以內建機構 ( 物件的函式 Method ) ,讓他之後可以活動或說話。
接著你再將他上色,給他一個名字,根據素偶的機構,讓公仔可以活動。完成的公仔就是物件實體 ( Object instance )

用程式來說明

先來建立一個名叫 Cat 的建構子。

function Cat(name ,color) {
  this.name = name;
  this.color = color
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}

*注意:建構子函式名稱會以大寫字母起頭。

接著,呼叫建構子以建立物件。

const cat1 = new Cat('Pupu', 'red');
const cat2 = new Cat('Meow', 'blue');

實際print出來,cat裡面的屬性和函式,可以用一般物件的方式取出。

console.log(cat1.name)
// Pupu
cat1.greeting()
// Hi! I'm Pupu.
console.log(cat2.name)
// Meow
cat2.greeting()
// Hi! I'm Meow.

實際運用我們下回見~

初學者應知道的物件導向 JavaScript


#前端 #物件導向 #javascript







Related Posts

自駕車 Software Stack 架構介紹

自駕車 Software Stack 架構介紹

1661. Average Time of Process per Machine

1661. Average Time of Process per Machine

婚姻匹配問題(Stable Marriage Problem)

婚姻匹配問題(Stable Marriage Problem)


Comments