前端百題斬【001】——typeof和instanceof

思慮良久，終於要動筆寫「前端百題斬」了，雖然是百題斬，但目前僅「 js、瀏覽器和網絡」部分就肯定了100個高能知識點。寫該系列文章的初衷是「 讓每位前端工程師掌握高頻知識點，爲工做助力」。但願朋友們關注公衆號「 執鳶者」，用知識武裝本身的頭腦。

1.1 typeof

1.1.1 基礎介紹

typeof是一個運算符，其有兩種使用方式：（1） typeof(表達式)；（2） typeof 變量名；返回值是一個字符串，用來講明變量的數據類型；因此能夠用此來判斷 number, string, object, boolean, function, undefined, symbol 這七種類型，每種狀況返回的內容以下表所示：

1.1.2 原理進階

typeof方法雖然很好用，但該方法有必定的侷限性： 對於對象、數組、 null 返回的值是 object 。好比 typeof(window)， typeof(document)， typeof(null)返回的值都是 object，這是爲何呢？這就要從底層提及。js在底層存儲變量的時候，會在變量的機器碼的低位1-3位存儲其類型信息：

1. 000：對象；
2. 010：浮點數；
3. 100：字符串；
4. 110：布爾值；
5. 1：整數；

6. 特例：javascript

   （1）null全部機器碼均爲0前端

   （2）undefined：用 −2^30 整數來表示java

typeof就是經過機器碼判斷類型，因爲null的全部機器碼均爲0，該機器碼和對象同樣，所以直接被看成對象來看待，因此經過 typeof就不可以判斷區分對象還有 null了。

1.1.3 實驗

說了這麼多，尚未進行驗證，下面就逐一驗證一下：

// 字符串
console.log(typeof('lili')); // string
// 數字
console.log(typeof(1)); // number
// 布爾值
console.log(typeof(true)); // boolean
// undefined
console.log(typeof(undefined)); // undefined
// 對象
console.log(typeof({})); // object
// 數組
console.log(typeof([])); // object
// null
console.log(typeof(null)); // object
// 函數
console.log(typeof(() => {})); // function
// Symbol值
console.log(typeof(Symbol())); // symbol

1.2 instanceof

1.2.1 基礎介紹

instanceof運算符用於檢測構造函數的 prototype 屬性是否出如今某個實例對象的原型鏈上,返回值爲布爾值，用於指示一個變量是否屬於某個對象的實例。其語法以下所示：

object instanceof constructor

1.2.2 原理進階

instanceof 主要的實現原理就是隻要右邊變量的 prototype 在左邊變量的原型鏈上便可。所以， instanceof 在查找的過程當中會遍歷左邊變量的原型鏈，直到找到右邊變量的 prototype，若是查找失敗，則會返回 false.步驟以下所示：

1. 獲取左邊變量的隱式原型（即：__ proto __ ,可經過Object.getPrototypeOf()獲取）；
2. 獲取右邊變量的顯示原型（即：prototype）；
3. 進行判斷，比較leftVal. proto . proto …… === rightVal.prototype，相等則返回true，不然返回false。

1.2.3 實驗

上面講述了instanceof的簡單使用和其原理，下面簡單使用一下並驗證一下該原理：

const arr = [1, 2];
// 判斷Object的prototype有沒有在數組的原型鏈上
console.log(arr instanceof Object); // true
// 數組arr的原型
const proto1 = Object.getPrototypeOf(arr);
console.log(proto1); // []
// 數組arr的原型的原型
const proto2 = Object.getPrototypeOf(proto1);
console.log(proto2); // []
// Object的prototype
console.log(Object.prototype);
// 判斷arr的原型是否與Object的prototype相等
console.log(proto1 === Object.prototype); // false
// 判斷arr的原型的原型是否與Object的prototype相等
console.log(proto2 === Object.prototype); // true

1.若是以爲這篇文章還不錯，來個分享、點贊吧，讓更多的人也看到數組

2.關注公衆號執鳶者，與號主一塊兒斬殺前端百題。瀏覽器