iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
自我挑戰組

草頭黃小姐的 30 天 JavaScript 自學小本本系列 第 17

Day 17 物件導向程式設計

  • 分享至 

  • xImage
  •  

Object-Oriented Programming 物件導向程式設計,我們也可以簡稱他為 OOP。
這是程式設計的一種方法,也不限定哪一款程式語言能用,他有幾個特色:

物件是由"屬性"和"行為"組成,例如我是一個物件,
假設:

  • 物件 - 我
  • 屬性 - 年紀/性別
  • 行為 - 吃飯 / 睡覺 / 上班

它們其實有幾個特色:

  • 封裝:我們來舉一個最簡單的例子來說明封裝的概念,以電視遙控器來說,介面上有很多按鍵,按某顆按鍵,就能音量調大小或是頻道轉台,這些過程你不需要知道,你只知道當我按下這顆按鈕後,就會達到要的成果。這個概念其實就像我們會把一些骯髒或複雜的東西藏在某些地方,別人不需要知道,可以操作就好。
  • 繼承:我們可以把共同的行為或是屬性定在同一層,舉個例子來說:所有動物都會吃東西,所以貓跟狗都會吃東西,繼承有點像是分類,我是屬於哪個分類,我就是會做個這行為。

希望可以透過擬人化或是擬物化,讓你的程式碼被管理。

物件

物件導向都是為了讓程式碼更容易被維護,那我們又要怎麼開始在 JS 上寫呢?

  • 使用 Object()函數
Var hero1 = new object();
hero name = `神力女超人`;
hero skill= `打擊敵人`, `盾牌`,`神劍`;
hero power= 10000;

console.log(hero1[`name`]);  //印出神力女超人
console.log(hereo1.name); //印出神力女超人
  • 使用大括號
Var hero1 {
    name:`神力女超人`,
    skill:[`打擊敵人`, `盾牌`,`神劍`],
    power:10000;
}

console.log(hero1[`name`]);  //印出神力女超人
console.log(hereo1.name); //印出神力女超人
console.log(hero1.skill[1]); //印出打擊敵人

使用大括號要注意的事項,就是用 Key 和 Value 的組合,記得結束要用 ,,否則語法會出錯唷!


上一篇
Day 16 JavaScript 事件的基礎應用 (2)
下一篇
Day 18 物件導向程式設計之二三事
系列文
草頭黃小姐的 30 天 JavaScript 自學小本本30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言