instanceof和typeof原理

JS數(shù)據(jù)類型判斷和數(shù)組判斷

js七種數(shù)據(jù)類型:Number, String, Boolean, symbol, null, undefined, object
前六種都是基本數(shù)據(jù)類型,只有object(數(shù)組array,函數(shù)function都屬于object)是引用數(shù)據(jù)類型。
undefined 和 null沒(méi)有本質(zhì)區(qū)別,undefined就是定義了一個(gè)變量或函數(shù)卻沒(méi)有給他賦值。

typeof實(shí)現(xiàn)原理

在判斷不是 object 類型的數(shù)據(jù)的時(shí)候,typeof能比較清楚的告訴我們具體是哪一類的類型。
但是很遺憾的一點(diǎn)是,typeof 在判斷一個(gè) object的數(shù)據(jù)的時(shí)候只能告訴我們這個(gè)數(shù)據(jù)是 object, 而不能細(xì)致的具體到是哪一種 object, 比如??

let s = new String('abc');
typeof s === 'object'// true
s instanceof String // true

要想判斷一個(gè)數(shù)據(jù)具體是哪一種 object 的時(shí)候,我們需要利用 instanceof 這個(gè)操作符。
js 在底層存儲(chǔ)變量的時(shí)候,會(huì)在變量的機(jī)器碼的低位1-3位存儲(chǔ)其類型信息??

  • 000:對(duì)象
  • 010:浮點(diǎn)數(shù)
  • 100:字符串
  • 110:布爾
  • 1:整數(shù)
    但是對(duì)于 undefined 和 null 來(lái)說(shuō),這兩個(gè)值的信息存儲(chǔ)是有點(diǎn)特殊的。
  • null:所有機(jī)器碼均為0
  • undefined:用 ?2^30 整數(shù)來(lái)表示
    所以,typeof 在判斷 null 的時(shí)候就出現(xiàn)問(wèn)題了,由于 null 的所有機(jī)器碼均為0,因此直接被當(dāng)做對(duì)象來(lái)看待。

然而用 instanceof 來(lái)判斷的話??

null instanceof null // TypeError: Right-hand side of 'instanceof' is not an object

null 直接被判斷為不是 object,這也是 JavaScript 的歷史遺留bug,可以參考typeof

最好是用 typeof 來(lái)判斷基本數(shù)據(jù)類型(包括symbol),避免對(duì) null 的判斷

Object.prototype.toString

還有一個(gè)不錯(cuò)的判斷類型的方法,就是Object.prototype.toString,我們可以利用這個(gè)方法來(lái)對(duì)一個(gè)變量的類型來(lái)進(jìn)行比較準(zhǔn)確的判斷

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

Object.prototype.toString.call('hi') // "[object String]"

Object.prototype.toString.call({a:'hi'}) // "[object Object]"

Object.prototype.toString.call([1,'a']) // "[object Array]"

Object.prototype.toString.call(true) // "[object Boolean]"

Object.prototype.toString.call(() => {}) // "[object Function]"

Object.prototype.toString.call(null) // "[object Null]"

Object.prototype.toString.call(undefined) // "[object Undefined]"

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

instanceof實(shí)現(xiàn)原理

instanceof是用來(lái)判斷對(duì)象的具體類型,其實(shí) instanceof 主要的作用就是判斷對(duì)象是否是構(gòu)造函數(shù)原型鏈上的實(shí)例。

let obj1 = {}
let obj2 = new Date()
let obj3 = []
let obj4 = Object.create(null)

obj1 instanceof Object // true 
obj2 instanceof Object //true
obj2 instanceof Date // true
obj3 instanceof Object // true
obj3 instanceof Array // true
obj3 instanceof String //false 
obj4 instanceof Object //false

// 由于obj4的原型是null, 因此是false
let person = function () {
}
let nicole = new person()
nicole instanceof person // true

當(dāng)然,instanceof 也可以判斷一個(gè)實(shí)例是否是其父類型或者祖先類型的實(shí)例。

let person = function () {
}
let programmer = function () {
}
programmer.prototype = new person()
let nicole = new programmer()
nicole instanceof person // true
nicole instanceof programmer // true

instanceof 的原理是什么呢?
其實(shí) instanceof 主要的實(shí)現(xiàn)原理就是只要右邊變量的 prototype 在左邊變量的原型鏈上即可。因此,instanceof 在查找的過(guò)程中會(huì)遍歷左邊變量的原型鏈,直到找到右邊變量的 prototype,如果查找失敗,則會(huì)返回 false,告訴我們左邊變量并非是右邊變量的實(shí)例。

function new_instance_of(leftVaule, rightVaule) { 
    let rightProto = rightVaule.prototype; // 取右表達(dá)式的 prototype 值
    leftVaule = leftVaule.__proto__; // 取左表達(dá)式的__proto__值
    while (true) {
        if (leftVaule === null) {
            return false;   
        }
        if (leftVaule === rightProto) {
            return true;    
        } 
        leftVaule = leftVaule.__proto__ 
    }
}

看幾個(gè)有趣的例子

function Foo() {
}

Object instanceof Object // true
Function instanceof Function // true
Function instanceof Object // true
Foo instanceof Foo // false
Foo instanceof Object // true
Foo instanceof Function // true

要想全部理解 instanceof 的原理,除了我們剛剛提到的實(shí)現(xiàn)原理,我們還需要知道 JavaScript 的原型繼承原理。

我們知道每個(gè) JavaScript 對(duì)象均有一個(gè)隱式的 proto 原型屬性,而顯式的原型屬性是 prototype,只有 Object.prototype.proto 屬性在未修改的情況下為 null 值。根據(jù)圖上的原理,我們來(lái)梳理上面提到的幾個(gè)有趣的 instanceof 使用的例子。

  • Object instanceof Object
    由圖可知,Object 的 prototype 屬性是 Object.prototype, 而由于 Object 本身是一個(gè)函數(shù),由 Function 所創(chuàng)建,所以 Object.proto 的值是 Function.prototype,而 Function.prototype 的 proto 屬性是 Object.prototype,所以我們可以判斷出,Object instanceof Object 的結(jié)果是 true 。用代碼簡(jiǎn)單的表示一下
leftValue = Object.__proto__ = Function.prototype;
rightValue = Object.prototype;
// 第一次判斷
leftValue != rightValue
leftValue = Function.prototype.__proto__ = Object.prototype
// 第二次判斷
leftValue === rightValue
// 返回 true

Function instanceof Function 和 Function instanceof Object 的運(yùn)行過(guò)程與 Object instanceof Object 類似,故不再詳說(shuō)。

  • Foo instanceof Foo
    Foo 函數(shù)的 prototype 屬性是 Foo.prototype,而 Foo 的 proto 屬性是 Function.prototype,由圖可知,F(xiàn)oo 的原型鏈上并沒(méi)有 Foo.prototype ,因此 Foo instanceof Foo 也就返回 false 。
leftValue = Foo, rightValue = Foo
leftValue = Foo.__proto = Function.prototype
rightValue = Foo.prototype
// 第一次判斷
leftValue != rightValue
leftValue = Function.prototype.__proto__ = Object.prototype
// 第二次判斷
leftValue != rightValue
leftValue = Object.prototype = null
// 第三次判斷
leftValue === null
// 返回 false
  • Foo instanceof Object
leftValue = Foo, rightValue = Object
leftValue = Foo.__proto__ = Function.prototype
rightValue = Object.prototype
// 第一次判斷
leftValue != rightValue
leftValue = Function.prototype.__proto__ = Object.prototype
// 第二次判斷
leftValue === rightValue
// 返回 true 
  • Foo instanceof Function
leftValue = Foo, rightValue = Function
leftValue = Foo.__proto__ = Function.prototype
rightValue = Function.prototype
// 第一次判斷
leftValue === rightValue
// 返回 true 

總結(jié)

簡(jiǎn)單來(lái)說(shuō),我們使用 typeof 來(lái)判斷基本數(shù)據(jù)類型是 ok 的,不過(guò)需要注意當(dāng)用 typeof 來(lái)判斷 null 類型時(shí)的問(wèn)題,如果想要判斷一個(gè)對(duì)象的具體類型可以考慮用instanceof,但是 instanceof 也可能判斷不準(zhǔn)確,比如一個(gè)數(shù)組,他可以被 instanceof 判斷為 Object。所以我們要想比較準(zhǔn)確的判斷對(duì)象實(shí)例的類型時(shí),可以采取 Object.prototype.toString.call 方法。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,406評(píng)論 6 538
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,034評(píng)論 3 423
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,413評(píng)論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,449評(píng)論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 72,165評(píng)論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,559評(píng)論 1 325
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,606評(píng)論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,781評(píng)論 0 289
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,327評(píng)論 1 335
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 41,084評(píng)論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 43,278評(píng)論 1 371
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,849評(píng)論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,495評(píng)論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,927評(píng)論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,172評(píng)論 1 291
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 52,010評(píng)論 3 396
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 48,241評(píng)論 2 375

推薦閱讀更多精彩內(nèi)容