Day 04 [原型鍊02]淺談instanceof 和typeof 的實現原理

第 12 屆 iThome 鐵人賽

DAY 4

Modern Web

從技術文章深入學習 JavaScript系列第 4 篇

12th鐵人賽 javascript

s95050937

2020-09-14 09:32:54

2090 瀏覽

文章選自

作者：nicole_zhang18970

連接：https://juejin.im/post/6844903613584654344

來源：掘金

typeof

一般被用於判斷一個變量的類型，可判斷七種類型

number, string, object, boolean, function, undefined, symbol

但有一個很麻煩的事情，只能知道那個變量是object不能知道更精確的類型

let s = new String('abc'); 

typeof  s === 'object'  // true

// 還必須靠instanceof
s instanceof String // true

而且還有一個老梗，就是null也會顯示object (上古bug)

typeof null // object

所以typeof通常只被用來檢查基本類型

附註: 有一個不錯的方法

不錯的方法: Object.prototype.toString.call(element)

可以利用這個做出更精銳的判斷

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

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

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

Object.prototype.toString.call(['foo','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]"

起初的底層原理

參考自 https://2ality.com/2013/10/typeof-null.html

會顯示 typeof null 為 object 這個錯誤源自於 JavaScript 第一個版本。

於此版本中，JavaScript的值以32位元存儲，其中包括了一個小型單位標籤(1~3位)，此類型標籤存在32位元的低位，如以下五個。

000：對象

010：浮點數

100：字符串

110：布爾

1：整數

那我們也就知道為啥null會跑出object了，因為null的所有機器碼全部都是0。
之後null的typeof為object從此被納入ECMA規格中，而所有現代引擎皆按照此規格沿用至今(所以引擎內部實現原理不一定還是為此)。

instanceof

在講這個之前請務必先看以下文章，因為要先建立原型鍊的概念，講解也會用該文的概念去解釋

https://ithelp.ithome.com.tw/articles/10235950

有啥用 ?

主要的作用是判斷一個實例是否屬於某種類型 (也可以是父類型或者祖先類型)

// 1.
function Person() {
    ...
}
let nicole = new Person()
nicole instanceof Person // true

// 2.
function Person () {
    ...
}
function Programmer () {
    ...
}
Programmer.prototype = new Person()
let nicole = new Programmer()
nicole instanceof person // true
nicole instanceof Programmer // true

整理出來的偽代碼

其實就是先找右邊的prototype( 因為機器的prototype會等於實例的__ proto __ )

然後跟左邊的p比較如果不相等就再往上找直到取到null 並 return false

代碼:

// 不難就上面提到的概念看一下應該就會懂
function new_instance_of(leftVaule, rightVaule) { 
    let rightProto = rightVaule.prototype; // 取右表达式的 prototype 值
    leftVaule = leftVaule.__proto__; // 取左表达式的__proto__值
    while (true) {
    	if (leftVaule === null) {
            return false;	
        }
        if (leftVaule === rightProto) {
            return true;	
        } 
        leftVaule = leftVaule.__proto__ 
    }
}