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

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

const _toStr = Object.prototype.toString

那么為什么要這么做呢？

先說(shuō)下判斷類型。眾所周知，typeof在判斷對(duì)象時(shí)不能正確判斷Null，并且不能識(shí)別出Array，但在判斷基礎(chǔ)類型時(shí)是沒(méi)問(wèn)題的。所以尤大也寫(xiě)了：

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

判斷Object也做了區(qū)分，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]'
}

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

兩者還有一些不同。Object.prototype.toString.call(1) 和 Object.prototype.toString.call(Number(1))時(shí)，返回的都是"[object Number]"，也就是說(shuō)，它并不能區(qū)分原始類型和復(fù)雜類型?？梢?jiàn)，Object.prototype.toString.call并不像很多教程說(shuō)的那樣好用。

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

如果要使用，就需要像尤大一樣，把原始類型單獨(dú)拎出來(lái)判斷，再去判斷復(fù)雜類型，而走到這一步的時(shí)候尤大就寫(xiě)了上面說(shuō)那行const _toStr。這是因?yàn)?，toString實(shí)在是太容易被重寫(xiě)了。如果toString被其他人重寫(xiě)，將會(huì)對(duì)代碼中涉及到的部分造成影響，所以就保存下來(lái)防止這種情況發(fā)生。

補(bǔ)充:Object.prototype.toString方法的原理

前言

我們?cè)谂袛嘁粋€(gè)對(duì)象的內(nèi)置類型時(shí)，我們一般可以使用以下方法：

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

那么，這個(gè)方法的原理是什么呢？

ECMAScript 3

在toString方法被調(diào)用時(shí),會(huì)執(zhí)行下面的操作步驟:

1. 獲取this對(duì)象的[[Class]]屬性的值.

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

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

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

[[Class]] 一個(gè)字符串值,表明了該對(duì)象的類型.

然后給了一段解釋:

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

ECMAScript 5

在toString方法被調(diào)用時(shí),會(huì)執(zhí)行下面的操作步驟

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

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

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

總結(jié)

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

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com