iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 12
0
Modern Web

JavaScript基礎二三事系列 第 12

Day12 物件與點

今天開始進入第四章節,物件與函式的部分囉。
第二天的筆記有提到,物件是一群名稱/值的組合

例如:

{
	rice: '米飯',
	soup: '海鮮濃湯'
}

而其值可以是另一個名稱/值的組合,也可以是數值、字串、布林、物件、函式....等等。

例如:

{
	rice: '米飯',
	soup: {
		seafood: '蝦子',
		hot: true,
		cook: function(){
			console.log('海鮮濃湯');
		}
	}
}

關於物件還有幾件事:

  • 物件可以有個原始的設定,又稱屬性Properties
  • 物件可以連結至另一個物件(物件裡包含著物件),這個被連結的物件也是屬性。
  • 物件裡可以有函式,當函式在物件裡,稱為方法Methods,它既是函式,又與物件相關。

接下來看看以下程式碼:

var Batman = new Object(); //宣告變數Batman並建立個新物件

Batman['firstname'] = 'Bruce';
Batman['lastname'] = 'Wayne';

Batman['firstname'][]是運算子「計算取用成員運算子」。
它是由左至右相依的,會把物件當成一個參數,把字串當成另一個參數,以此字串去尋找物件的屬性並回傳值。

可以這樣想:
Batman['firstname']='Bruce'就是對物件Batman取用firstname屬性,因為firstname不存在,所以這邊存取建立它並賦值字串Bruce

Batman['lastname'] = 'Wayne';就是對物件Batman取用lastname屬性,因為lastname不存在,所以這邊存取建立它並賦值字串Wayne

這時Batman會是:

{
  firstname:'Bruce',
  lastname:'Wayne'
}

console.log印出來看看

console.log(Batman);

這個運算子還可以這樣的用,宣告個變數Who並賦值字串firstname

var Who = 'firstname';
console.log(Batman[Who]);

結果會怎麼樣?
其實Batman[Who]就視同Batman['firstname'],所以當然是印出

這個用法好處在於可帶入變數來存取物件屬性,在開發上會有妙用,除了使用[]計算取用成員運算子來查找、取用屬性外,使用物件最簡單、最常用的運算子就是.了,.運算子也可以用來存取物件的屬性。

使用點這個運算子,會印出什麼?

console.log(Batman.firstname);

.運算子也是個函式,它叫做成員取用運算子,可以取用物件中的屬性與方法,使用上很直觀,是前端開發者最常用的運算子,且也不用像[]還要替後面的屬性名稱加上引號。

當我們看到Batman.firstname,通常會這樣想:「阿不就是Batman物件裡的firstname屬性」,這個口語上OO物件裡的XX屬性,在電腦上其實是透過.運算子去作用的,不管是[]運算子還是.運算子,基本上都是透過查找左邊物件(記憶體),去參照尋找右邊屬性(記憶體)位置。
 
 
 
 
小結
今天瞭解了物件與其存取屬性的[]運算子和.運算子,明天來看看物件實體語法
至於筆記內容可以參照Udemy課程:JavaScript 全攻略:克服JS 的奇怪部分4-30


上一篇
Day11 設定函式內的預設值
下一篇
Day13 物件與物件實體
系列文
JavaScript基礎二三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
棉花
iT邦新手 4 級 ‧ 2018-01-02 15:27:26

關於物件還有幾件事:
物件可以有個原始的設定,又稱屬性Primitive,

請問這邊屬性的英文是筆誤還是真的叫Primitive?

因為我查到的都是叫Properties

對 是筆誤/images/emoticon/emoticon04.gif
感謝提醒

我要留言

立即登入留言