前端中Typeof和Instanceof的原理和用法

本篇內容主要講解“前端中Typeof和Instanceof的原理和用法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“前端中Typeof和Instanceof的原理和用法”吧!

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. 特例：

(1)null所有機器碼均為0

(2)undefined：用 ?2^30 整數來表示

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

到此，相信大家對“前端中Typeof和Instanceof的原理和用法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！