Vue源碼中要const _toStr = Object.prototype.toString的原因分析

在vue的源碼中，vue/src/shared/util.js文件中存放的是一些方法。其中作者用了Object.prototype.toString這個方法來判斷類型，但是并沒有直接用，而是單獨保存在一個變量：

const _toStr = Object.prototype.toString

那么為什么要這么做呢？

先說下判斷類型。眾所周知，typeof在判斷對象時不能正確判斷Null，并且不能識別出Array，但在判斷基礎類型時是沒問題的。所以尤大也寫了：

export function isPrimitive (value: any): boolean %checks {
 return (
 typeof value === 'string' ||
 typeof value === 'number' ||
 // $flow-disable-line
 typeof value === 'symbol' ||
 typeof value === 'boolean'
 )
}

判斷Object也做了區分，isObject和isPlainObject ：

export function isObject (obj: mixed): boolean %checks {
 return obj !== null && typeof obj === 'object'
}
export function isPlainObject (obj: any): boolean {
 return _toString.call(obj) === '[object Object]'
}

到了判斷復雜類型的時候，一般我們用Object.prototype.toString或者是instanceof。如果是前者的話會返回類似'[object Object]'的字符串。后者則會判斷一個對象的原型鏈上是否存在一個構造函數。

兩者還有一些不同。Object.prototype.toString.call(1) 和 Object.prototype.toString.call(Number(1))時，返回的都是"[object Number]"，也就是說，它并不能區分原始類型和復雜類型。可見，Object.prototype.toString.call并不像很多教程說的那樣好用。

Object.prototype.toString.call(1)
"[object Number]"
Object.prototype.toString.call(Number(1))
"[object Number]"

如果要使用，就需要像尤大一樣，把原始類型單獨拎出來判斷，再去判斷復雜類型，而走到這一步的時候尤大就寫了上面說那行const _toStr。這是因為，toString實在是太容易被重寫了。如果toString被其他人重寫，將會對代碼中涉及到的部分造成影響，所以就保存下來防止這種情況發生。

補充:Object.prototype.toString方法的原理

前言

我們在判斷一個對象的內置類型時，我們一般可以使用以下方法：

var arr = [];
console.log(Object.prototype.toString.call(arr)) //"[object Array]"

那么，這個方法的原理是什么呢？

ECMAScript 3

在toString方法被調用時,會執行下面的操作步驟:

1. 獲取this對象的[[Class]]屬性的值.

2. 計算出三個字符串"[object ", 第一步的操作結果Result(1), 以及 "]"連接后的新字符串.

3. 返回第二步的操作結果Result(2).

[[Class]]是一個內部屬性,所有的對象(原生對象和宿主對象)都擁有該屬性.在規范中,[[Class]]是這么定義的

[[Class]] 一個字符串值,表明了該對象的類型.

然后給了一段解釋:

所有內置對象的[[Class]]屬性的值是由本規范定義的.所有宿主對象的[[Class]]屬性的值可以是任意值,甚至可以是內置對象使用過的[[Class]]屬性的值.[[Class]]屬性的值可以用來判斷一個原生對象屬于哪種內置類型.需要注意的是,除了通過Object.prototype.toString方法之外,本規范沒有提供任何其他方式來讓程序訪問該屬性的值。

ECMAScript 5

在toString方法被調用時,會執行下面的操作步驟

如果this的值為undefined,則返回"[object Undefined]".
如果this的值為null,則返回"[object Null]".
讓O成為調用ToObject(this)的結果.
讓class成為O的內部屬性[[Class]]的值.
返回三個字符串"[object ", class, 以及 "]"連接后的新字符串.
ES5中,[[Class]]屬性的解釋更加詳細:

所有內置對象的[[Class]]屬性的值是由本規范定義的.所有宿主對象的[[Class]]屬性的值可以是除了"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"之外的的任何字符串.[[Class]]內部屬性是引擎內部用來判斷一個對象屬于哪種類型的值的.需要注意的是,除了通過Object.prototype.toString方法之外,本規范沒有提供任何其他方式來讓程序訪問該屬性的值。

總而言之，要獲取一個對象的真實的內置類型，我們需要通過獲取[[Class]]的屬性值，在es5之前，該屬性值只能通由Object.prototype.toString來訪問，因此，通過Object.prototype.toString.call(arr)改變tostring方法的this指向，從而獲得對象的內置類型。

總結

以上所述是小編給大家介紹的Vue源碼中要const _toStr = Object.prototype.toString的原因分析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com