iT邦幫忙

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

JavaScript基礎二三事系列 第 28

Day28 內建的函式建構子

今天來看看內建的函式建構子

什麼是內建的函式建構子?
其實是將JS的內建的Number()String()Date()....等其他內建函式,與new函式建構子一起使用。

來看看看程式碼,直接在Chrome瀏覽器console上操作。

Number()是JS的內建函式之一,在程式碼Number的開頭前多了一個new建構子,根據昨天筆記,我們知道new這個function constructor函式建構子會創建新物件,並將後方函式內的this指向它,依照函式內的設定創造該新物件的屬性。

現在變數a指向的東西,並不是基本型別Primitive Types,而是物件型別Object Type,在這個物件裏頭,有一個基本型別數值3的存在。(別忘記物件是名稱與值配對的組合)

所以a是物件,原型是Number,用typeof檢查a的型別:

我們在console打Number.prototype.可以看到一些prototype的方法:

prototype不是用來取用函式自己的原型,而是用來取用new建構子創造出來的物件原型,
這代表我們可以對物件a做一些操作 例如:

重點在於,我們可以透過prototype去取用方法、新增方法,來看看以下程式碼:

字串"Simon"後面用.運算子去呼叫方法isLengthGreaterThan()並帶入參數3,字串的原型被我們新增了isLengthGreaterThan方法,透過原型鏈的查找,我們可以讓字串使用我們定義的函式,這等於我們可以改造JS程式,添加一些自己的函式進原型中。

那如果是數值呢?

報錯,因為JS動態轉型,字串有時候能被被轉成物件,數值卻沒辦法,我們需要用new來幫助我們建立物件才可以使用這個方法。

雖然函式建構子非常自由,可以新增自行設定的方法到數值、字串、陣列上,但一般不建議建立函式方法到看起來像基本型別Primitive Types的物件上。

透過new建立像基本型別Primitive Types物件型別Object Types,如今天講的字串、數值,可能導致我們開發時搞混,因而造成一些bug出現,畢竟new建立建立出來的是物件型別Object Types,在瀏覽器console試驗看看就知道了:

c == d,因為自動轉型的關西,回傳true
c === d,用三等號嚴格比較,連型別也一起比,c是數值d是物件,故回傳false

順帶一提,如果有用JS處理時間的需求,作者不建議使用JS內建的時間方法,他推薦使用JS函示庫moment.js,這可以幫助開發者迴避一些因建構子產生的問題。

 
 
 
 
小結
使用內建的函式建構子(JS內建函式 + new函式建構子)需要非常小心。
開發者往往覺得new Number()new String()new Date()...等寫法和Number()String()Date()的結果一樣:只是多了一個new建構子,一樣會建立新的基本型別Primitive Types,但只要使用new在函式前面,就會創建一個新的物件(型別)Object Types出來,而我們往往不會意識到...自己操作的其實是物件。

今天的筆記內容可以參照Udemy課程:JavaScript 全攻略:克服JS的奇怪部分5-60、5-61


上一篇
Day27 函式建構子與new
下一篇
Day29 Object.create與class
系列文
JavaScript基礎二三事30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言