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也做了區(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]'
}
到了判斷復雜類型的時候,一般我們用Object.prototype.toString或者是instanceof。如果是前者的話會返回類似'[object Object]'的字符串。后者則會判斷一個對象的原型鏈上是否存在一個構造函數(shù)。
兩者還有一些不同。Object.prototype.toString.call(1) 和 Object.prototype.toString.call(Number(1))時,返回的都是"[object Number]",也就是說,它并不能區(qū)分原始類型和復雜類型。可見,Object.prototype.toString.call并不像很多教程說的那樣好用。
Object.prototype.toString.call(1) "[object Number]" Object.prototype.toString.call(Number(1)) "[object Number]"
如果要使用,就需要像尤大一樣,把原始類型單獨拎出來判斷,再去判斷復雜類型,而走到這一步的時候尤大就寫了上面說那行const _toStr。這是因為,toString實在是太容易被重寫了。如果toString被其他人重寫,將會對代碼中涉及到的部分造成影響,所以就保存下來防止這種情況發(fā)生。
補充:Object.prototype.toString方法的原理
前言
我們在判斷一個對象的內置類型時,我們一般可以使用以下方法:
var arr = []; console.log(Object.prototype.toString.call(arr)) //"[object Array]"
那么,這個方法的原理是什么呢?
ECMAScript 3
在toString方法被調用時,會執(zhí)行下面的操作步驟:
1. 獲取this對象的[[Class]]屬性的值.
2. 計算出三個字符串"[object ", 第一步的操作結果Result(1), 以及 "]"連接后的新字符串.
3. 返回第二步的操作結果Result(2).
[[Class]]是一個內部屬性,所有的對象(原生對象和宿主對象)都擁有該屬性.在規(guī)范中,[[Class]]是這么定義的
[[Class]] 一個字符串值,表明了該對象的類型.
然后給了一段解釋:
所有內置對象的[[Class]]屬性的值是由本規(guī)范定義的.所有宿主對象的[[Class]]屬性的值可以是任意值,甚至可以是內置對象使用過的[[Class]]屬性的值.[[Class]]屬性的值可以用來判斷一個原生對象屬于哪種內置類型.需要注意的是,除了通過Object.prototype.toString方法之外,本規(guī)范沒有提供任何其他方式來讓程序訪問該屬性的值。
ECMAScript 5
在toString方法被調用時,會執(zhí)行下面的操作步驟
如果this的值為undefined,則返回"[object Undefined]".
如果this的值為null,則返回"[object Null]".
讓O成為調用ToObject(this)的結果.
讓class成為O的內部屬性[[Class]]的值.
返回三個字符串"[object ", class, 以及 "]"連接后的新字符串.
ES5中,[[Class]]屬性的解釋更加詳細:
所有內置對象的[[Class]]屬性的值是由本規(guī)范定義的.所有宿主對象的[[Class]]屬性的值可以是除了"Arguments", "Array", "Boolean", "Date", "Error", "Function", "JSON", "Math", "Number", "Object", "RegExp", "String"之外的的任何字符串.[[Class]]內部屬性是引擎內部用來判斷一個對象屬于哪種類型的值的.需要注意的是,除了通過Object.prototype.toString方法之外,本規(guī)范沒有提供任何其他方式來讓程序訪問該屬性的值。
總而言之,要獲取一個對象的真實的內置類型,我們需要通過獲取[[Class]]的屬性值,在es5之前,該屬性值只能通由Object.prototype.toString來訪問,因此,通過Object.prototype.toString.call(arr)改變tostring方法的this指向,從而獲得對象的內置類型。
總結
以上所述是小編給大家介紹的Vue源碼中要const _toStr = Object.prototype.toString的原因分析,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關文章
使用Vue Router進行路由組件傳參的實現(xiàn)方式
Vue Router 為 Vue.js 應用提供了完整的路由解決方案,其中包括了組件間的數(shù)據(jù)傳遞功能,通過路由組件傳參,我們可以輕松地在導航到新頁面時傳遞必要的數(shù)據(jù),本文將深入探討如何使用 Vue Router 進行路由組件間的傳參,并通過多個示例來展示其實現(xiàn)方式2024-09-09
vue動態(tài)添加路由addRoutes之不能將動態(tài)路由存入緩存的解決
這篇文章主要介紹了vue動態(tài)添加路由addRoutes之不能將動態(tài)路由存入緩存的解決方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
Vue2.0+ElementUI實現(xiàn)查詢條件展開和收起功能組件(代碼示例)
文章介紹了如何將查詢條件表單封裝成一個通用組件,以提高開發(fā)效率,組件支持多條件的折疊和展開功能,并提供了使用示例,感興趣的朋友一起看看吧2025-01-01
vue3+vite中使用import.meta.glob的操作代碼
在vue2的時候,我們一般引入多個js或者其他文件,一般使用? require.context 來引入多個不同的文件,但是vite中是不支持 require的,他推出了一個功能用import.meta.glob來引入多個,單個的文件,下面通過本文介紹vue3+vite中使用import.meta.glob,需要的朋友可以參考下2022-11-11
element日期選擇器el-date-picker樣式圖文詳解
最近寫的項目里面有一個功能是日期選擇功能,第一反應是使用element里面的el-date-picker組件,下面這篇文章主要給大家介紹了關于element日期選擇器el-date-picker樣式的相關資料,需要的朋友可以參考下2022-09-09

