在JavaScript中,想要判斷某個對象值屬於哪種內置類型,最靠譜的做法就是通過Object.prototype.toString方法.
var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]"
本文要講的就是,toString方法是如何做到這一點的,原理是什麼.
ECMAScript 3
在ES3中,Object.prototype.toString方法的規范如下:
15.2.4.2 Object.prototype.toString()
在toString方法被調用時,會執行下面的操作步驟:
1. 獲取this對象的[[Class]]屬性的值.
2. 計算出三個字符串"[object ", 第一步的操作結果Result(1), 以及 "]"連接後的新字符串.
3. 返回第二步的操作結果Result(2).
[[Class]]是一個內部屬性,所有的對象(原生對象和宿主對象)都擁有該屬性.在規范中,[[Class]]是這麼定義的
然後給了一段解釋:
所有內置對象的[[Class]]屬性的值是由本規范定義的.所有宿主對象的[[Class]]屬性的值可以是任意值,甚至可以是內置對象使用過的[[Class]]屬性的值.[[Class]]屬性的值可以用來判斷一個原生對象屬於哪種內置類型.需要注意的是,除了通過Object.prototype.toString方法之外,本規范沒有提供任何其他方式來讓程序訪問該屬性的值(查看 15.2.4.2).
也就是說,把Object.prototype.toString方法返回的字符串,去掉前面固定的"[object "和後面固定的"]",就是內部屬性[[class]]的值,也就達到了判斷對象類型的目的.jQuery中的工具方法$.type(),就是干這個的.
在ES3中,規范文檔並沒有總結出[[class]]內部屬性一共有幾種,不過我們可以自己統計一下,原生對象的[[class]]內部屬性的值一共有10種.分別是:"Array", "Boolean", "Date", "Error", "Function", "Math", "Number", "Object", "RegExp", "String".
ECMAScript 5
在ES5.1中,除了規范寫的更詳細一些以外,Object.prototype.toString方法和[[class]]內部屬性的定義上也有一些變化,Object.prototype.toString方法的規范如下:
15.2.4.2 Object.prototype.toString ( )
在toString方法被調用時,會執行下面的操作步驟:
如果this的值為undefined,則返回"[object Undefined]".
如果this的值為null,則返回"[object Null]".
讓O成為調用ToObject(this)的結果.
讓class成為O的內部屬性[[Class]]的值.
返回三個字符串"[object ", class, 以及 "]"連接後的新字符串.
可以看出,比ES3多了1,2,3步.第1,2步屬於新規則,比較特殊,因為"Undefined"和"Null"並不屬於[[class]]屬性的值,需要注意的是,這裡和嚴格模式無關(大部分函數在嚴格模式下,this的值才會保持undefined或null,非嚴格模式下會自動成為全局對象).第3步並不算是新規則,因為在ES3的引擎中,也都會在這一步將三種原始值類型轉換成對應的包裝對象,只是規范中沒寫出來.ES5中,[[Class]]屬性的解釋更加詳細:
所有內置對象的[[Class]]屬性的值是由本規范定義的.所有宿主對象的[[Class]]屬性的值可以是除了"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"之外的的任何字符串.[[Class]]內部屬性是引擎內部用來判斷一個對象屬於哪種類型的值的.需要注意的是,除了通過Object.prototype.toString方法之外,本規范沒有提供任何其他方式來讓程序訪問該屬性的值(查看 15.2.4.2).
和ES3對比一下,第一個差別就是[[class]]內部屬性的值多了兩種,成了12種,一種是arguments對象的[[class]]成了"Arguments",而不是以前的"Object",還有就是多個了全局對象JSON,它的[[class]]值為"JSON".第二個差別就是,宿主對象的[[class]]內部屬性的值,不能和這12種值沖突,不過在支持ES3的浏覽器中,貌似也沒有發現哪些宿主對象故意使用那10個值.
ECMAScript 6
ES6目前還只是工作草案,但能夠肯定的是,[[class]]內部屬性沒有了,取而代之的是另外一個內部屬性[[NativeBrand]].[[NativeBrand]]屬性是這麼定義的:
[[NativeBrand]]屬性的解釋:
[[NativeBrand]]內部屬性用來識別某個原生對象是否為符合本規范的某一種特定類型的對象.[[NativeBrand]]內部屬性的值為下面這些枚舉類型的值中的一個:NativeFunction, NativeArray, StringWrapper, BooleanWrapper, NumberWrapper, NativeMath, NativeDate, NativeRegExp, NativeError, NativeJSON, NativeArguments, NativePrivateName.[[NativeBrand]]內部屬性僅用來區分區分特定類型的ECMAScript原生對象.只有在表10中明確指出的對象類型才有[[NativeBrand]]內部屬性.
表10 — [[NativeBrand]]內部屬性的值
可見,和[[class]]不同的是,並不是每個對象都擁有[[NativeBrand]].同時,Object.prototype.toString方法的規范也改成了下面這樣:
15.2.4.2 Object.prototype.toString ( )
在toString方法被調用時,會執行下面的操作步驟:
如果this的值為undefined,則返回"[object Undefined]".
如果this的值為null,則返回"[object Null]".
讓O成為調用ToObject(this)的結果.
如果O有[[NativeBrand]]內部屬性,讓tag成為表29中對應的值.
否則
讓hasTag成為調用O的[[HasProperty]]內部方法後的結果,參數為@@toStringTag.
如果hasTag為false,則讓tag為"Object".
否則,
讓tag成為調用O的[[Get]]內部方法後的結果,參數為@@toStringTag.
如果tag是一個abrupt completion,則讓tag成為NormalCompletion("???").
讓tag成為tag.[[value]].
如果Type(tag)不是字符串,則讓tag成為"???".
如果tag的值為"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp",或
者"String"中的任一個,則讓tag成為字符串"~"和tag當前的值連接後的結果.
返回三個字符串"[object ", tag, and "]"連接後的新字符串.
表29 — [[NativeBrand]] 標志值
"Function"
NativeArray
"Array"
StringWrapper
"String"
BooleanWrapper
"Boolean"
NumberWrapper
"Number"
NativeMath
"Math"
NativeDate
"Date"
NativeRegExp
"RegExp"
NativeError
"Error"
NativeJSON
"JSON"
NativeArguments
"Arguments"
可以看到,在規范上有了很大的變化,不過對於普通用戶來說,貌似感覺不到.
也許你發現了,ES6裡的新類型Map,Set等,都沒有在表29中.它們在執行toString方法的時候返回的是什麼?
console.log(Object.prototype.toString.call(Map())) //"[object Map]" console.log(Object.prototype.toString.call(Set())) //"[object Set]"
其中的字符串"Map"是怎麼來的呢:
15.14.5.13 Map.prototype.@@toStringTag
@@toStringTag 屬性的初始值為字符串"Map".
由於ES6的規范還在制定中,各種相關規定都有可能改變,所以如果想了解更多細節.看看下面這兩個鏈接,現在只需要知道的是:[[class]]沒了,使用了更復雜的機制.
以上所述是小編給大家分享的JavaScript中Object.prototype.toString方法的原理，希望對大家有所幫助！