iT邦幫忙

2021 iThome 鐵人賽

DAY 5
1
自我挑戰組

JavaScript 奇奇怪怪的核心觀念系列 第 5

(Day5) 原始型別及物件型別

  • 分享至 

  • xImage
  •  

在 JavaScript 這語言裡,其實指分成兩種型別:原始型別、物件型別

原始型別

原始型別又稱純值,在 JS 世界中除了 7 種原始型別,其他的都是物件型別,所以這邊先來認識一下有哪些屬於原始型別:

  • Boolean
  • Number
  • String
  • Null
  • Undefined

以及後來新增的兩種原始型別:

  • Biglnt
  • Symbol

使用 typeof() 這個方法可以查詢變數、常數的型別,比較特別的是 查詢 null 會回傳 object ,這是 JS 長久以來存在的 bug,由於修正了會有許多老舊網站無法運作,於是他變一直存在。

const string = 'test'
typeof(string) // "string"

const num = 1232
typeof(num) //"number"

const boolean = true
typeof(boolean) //"boolean"

const unde = undefined
typeof(unde) //"undefined"

const nu = null 
typeof(nu) //object

值得一提的是這些原始型別,都有一些能夠使用的特別方法,例如

const string1 = 'test'
string1.length //4
string1.toUpperCase() // TEST

之所以這些原始型別能夠使用這些方法,是因為當我們對 原始型別的資料 使用這些方法時,原始型別會夠透過 基本型別包裹器(Primitive Wrapper) 將 原始型別資料 暫時轉換成 帶有這些 特殊方法的 物件。

實際上我們可以直接使用 new 的建構式方法,來建立轉換後的資料,並且對使用 new 建構式建立的資料 使用 typeof 來做他都會回傳 Object,也因為這個特性我們實做時不太會使用這種方法建立相關資料。

const string2 = new String('test')
typeof string2 //object 

在瀏覽器輸入 string2 除了會回傳我們建立的資料,還有一個 [[Prototype]] (原型)欄位,將他點開會發現 該型別能使用的特別方法都藏在這裡:

(原型以及建構式,在後續原型章節則會再介紹到。)

new Boolean();
new String();
new Number();
BigInt();
Symbol();

唯獨 undefined 以及 null 是沒有基本型別包裹器。

物件型別:

除了上面 7 種原始,其他都屬於物件型別,這邊也介紹一下常用到的物件型別。

array

陣列也是屬於物件型別的一種,這邊使用上面提到的 typeof() 就能確認這點

const array =[1,2,3]
typeof(array ) //object

函示

函示也是物件型別的一種,使用 typeof() 他會回傳 "function" ,但函示其實是比較特別的物件,被稱做『函式物件 ( Function Object )』, 這點 MDN 文件也有提到:

Function 建構函式可建立一個新的 Function 物件。在 JavaScript 中,所有的函式實際上都是 Function 物件。

參考資料


上一篇
(Day4) 陳述式 /表達式
下一篇
(Day6) 強制轉型&顯性轉型
系列文
JavaScript 奇奇怪怪的核心觀念30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
Ray
iT邦研究生 4 級 ‧ 2021-09-28 13:49:31

原始行別 -> 原始型別

Ryder iT邦新手 4 級 ‧ 2021-09-28 15:49:18 檢舉

感恩大德

我要留言

立即登入留言