iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 5
0
自我挑戰組

重新開始的Vue.js 30day系列 第 6

從頭開始的Javascript 入門 -物件 day5

從頭開始的Javascript 入門 -物件 day5

Object-Oriented Programming 物件導向程式設計

OOP 是一種程式設計方法
先講個補充事件來聽聽看吧?
物件?房子?

簡單來講:

物件(Object) = 屬性(Property) + 行為(Behavior)

小明 這個人 代表物件 ,他的名字 性別 膚色 衣服穿什麼
這都代表他的屬性,而當小明會有吃飯 講話 睡覺 這些行為就是他的動詞。

var obj ={
    a:'hello world',
    b:42,
    c:true

};
obj.a;   // "hello world"
obj.b;  //   42
obj.c; //    true
// 同等於
obj["a"]   // "hello world"
obj["b"];  //   42
obj["c"]; //    true

以圖像來表現就是

物件的特性表現方式:

  • 點記號法 :obj.a 特性存取(property access)
  • 方括號法 :obj["a"] 鍵值存取(key access),意即 [ ]

因為點記號比較短,容易閱讀,所以盡量優先使用它


以上圖來說

屬性: 
  名稱:cat,
  年齡:4,
  貓色:花色
行為:
  吃飯,
  睡覺,
  玩

另外一種定義方式:

var cat =new Object();
cat.name ='cat';
cat.LastName ='cho';
cat.age =4;

console.log(cat);

如何添加數組到和function 到objects

var cat ={
    age:5,
    name:"cat",
    job:"loser",
    family:["dad", "mom" ,"kelly"],
    calculate: function yearOfBirth(myage){
       return 2017 -myage;
    }

};

console.log(cat.family[1]) // mom
console.log(cat.calculate(10)) // 2007

OOP 特性 :

  1. 封裝 對於使用者(指的是你用他人寫好的api)而你不需要了解他的實作怎麼去做,你只要知道怎麼用就行了
    你知道貓會叫但怎麼叫 你不會知道
    你知道使用遙控器要做什麼,但怎麼使用原理你不會知道
  2. 繼承
    爸爸有的,兒子一旦繼承了也會有,爸爸有的你不但擁有,還可以加上兒子自己的東西。好處是可以減少重覆撰寫相同的程式碼,也可以限制兒子需要實作什麼方法(Method)
  • 可以把共同的屬性或行為定義在上一層
    我們都會吃東西,貓跟狗都會吃東西。屬於動物那一塊。

為什麼我們需要 OOP :

用「擬人化」或「擬物化」的方式
來看待程式碼
使程式碼更好管力

使用一些包含特殊字符或動態產生的字串作為屬性名稱,就必須使用鍵值存取 [ ] 的方式。

包含特殊字符的屬性名稱。

const obj = {
  '!!12345!!': 'Hello World',
};

obj.!!12345!! // Uncaught SyntaxError: Unexpected token !
obj['!!12345!!'] // "Hello World"

函式構建式

參考以下文章:
https://wcc723.github.io/javascript/2017/12/18/javascript-constructor/

肚子餓 想到傳統雞蛋糕 會有很多模板 卡拉赫拉 比卡丘 等等
首先製作一個烤盤模型如下:

function CuteAnimation(name, skill) {
 this.name = name;
 this.skill = skill;
}

var pikachu = new CuteAnimation("⽪卡丘","⼗萬伏特");

var frog = new CuteAnimation("妙蛙種⼦","藤鞭");


var turtle = new CuteAnimation("傑尼⿔","⽔槍");


console.log(pikachu.name); // 印出 "⽪卡丘"
console.log(turtle.skill); // 印出 "⽔槍"
console.log(frog.skill); // 印出 "藤鞭"

我們都是用同一烤盤,同一模型但烤出來是不一樣的東西,
烤盤就像是建模的模組,但出來的東西會不一樣。


上一篇
從頭開始的Javascript 入門 -陣列 day4
下一篇
從頭開始的Javascript 入門 -迴圈 day6
系列文
重新開始的Vue.js 30day21

1 則留言

0
阿展展展
iT邦好手 1 級 ‧ 2019-12-30 06:20:47

有貓XD

我要留言

立即登入留言