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


Posted by ChloeLin 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

打包你的Python程式~PyInstaller基礎篇

打包你的Python程式~PyInstaller基礎篇

【Day06】Vue-cli & Vuex mapState

【Day06】Vue-cli & Vuex mapState

寫一個簡單堪用的 ESLint plugin

寫一個簡單堪用的 ESLint plugin


Comments