js--typeof 和 instanceof 判斷數據類型的區別及開發中的使用

前言

　　日常的開發中，我們經常會遇到判斷一個變量的數據類型或者該變量是否為空值的情況，你是如何去選擇判斷類型的操作符的？本文來總結記錄一下我們開發人員必須掌握的關於 typeof 和 instanceof 的知識點以及在開發中的使用建議，同時在面試過程中也經常會遇到這樣的問題。

正文

　　1、typeof 操作符

　　typeof 操作符，確定任意變量的數據類型,確切說，它是判斷一個變量是否為字符串、數值、布爾值或 undefined 的最好方式。其返回值為字符串類型，其使用方法如下：typeof 是一個操作符，不是一個函數，但是使用可以將變量作為參數傳入：

　　a、typeof  operand

　　b、typeof (operand)

　　（1）返回值為字符串類型，其中：

　　

返回值	含義值
"undefined"	未定義
"boolean"	布爾值
"string"	字符串
"number"	數值
"object"	對象（而不是函數）或 null
"function"	函數
"symbol"	符號

　　（2）常見使用方法

        console.log(typeof undefined);//'undefined'
        console.log(typeof true);//'bpplean'
        console.log(typeof ("number"));  //'string'
        console.log(typeof "number");  //'string' 
        console.log(typeof 1);//'number'
        console.log(typeof Symbol());//'symbol'
        //對於Array，Null等特殊對象使用typeof一律返回object，這正是typeof的局限性
        console.log(typeof null);   //'object'
        console.log(typeof [1, 2, 3]);//'object'
        console.log(typeof undefined);  //'undefined'
        //通過 typeof 操作符來區分函數和其他對象
        function f1() { console.log(111); }
        console.log(typeof f1);  //'function'  
        console.log(typeof f1());  // 111 'undefined'

　　（3）不能通過typeof 來判斷一個變量是否存在

        var a;
        if (a === undefined) {
            console.log("變量不存在")
        } else {
            console.log("變量存在")
        }
　　　　　// 變量不存在

　　2、instanceof 操作符

　　typeof雖然對原始值很有用，但它對引用值的用處不大。我們通常不關心一個值是不是對象，而是想知道它是什么類型的對象。為了解決這個問題，ECMAScript 提供了 instanceof 操作符。使用如下：

        function f1() { console.log(111); }
        console.log(f1 instanceof Object);//true
        console.log(f1 instanceof Function);//true
        console.log(f1 instanceof RegExp);//false

　　所有引用值都是 Object 的實例，因此通過 instanceof 操作符檢測任何引用值和Object 構造函數都會返回 true 。類似地，如果用 instanceof 檢測原始值，則始終會返回 false ，因為原始值不是對象。

　　instanceof 運算符用於判斷構造函數的 prototype 屬性是否出現在對象的原型鏈中的任何位置。其實現原理如下：

  function myInstanceof(left, right) {
    let proto = Object.getPrototypeOf(left), // 獲取對象的原型
    prototype = right.prototype; // 獲取構造函數的 prototype 對象

  // 判斷構造函數的 prototype 對象是否在對象的原型鏈上
    while (true) {
      if (!proto) return false;
      if (proto === prototype) return true;
      proto = Object.getPrototypeOf(proto);
    }
 }

　　3、typeof 和 instanceof 的區別以及開發中的使用建議

　　typeof 與 instance 都是判斷數據類型的方法，區別如下：

• typeof會返回一個變量的基本類型，instanceof返回的是一個布爾值

• instanceof 可以准確地判斷復雜引用數據類型，但是不能正確判斷基礎數據類型

• 而 typeof 也存在弊端，它雖然可以判斷基礎數據類型（null 除外），但是引用數據類型中，除了 function 類型以外，其他的也無法判斷

　　可以看到，上述兩種方法都有弊端，並不能滿足所有場景的需求

　　如果需要通用檢測數據類型，建議采用Object.prototype.toString，調用該方法，統一返回格式“[object Xxx]” 的字符串。使用如下：

        console.log(Object.prototype.toString.call(undefined))  //"[object Undefined]"
        console.log(Object.prototype.toString.call(true))  // "[object Boolean]"
        console.log(Object.prototype.toString.call('1'))  // "[object String]"
        console.log(Object.prototype.toString.call(1))    // "[object Number]"
        console.log(Object.prototype.toString.call(Symbol()))    // "[object Symbol]"
        console.log(Object.prototype.toString.call({}))   // "[object Object]"
        console.log(Object.prototype.toString.call(function () { }))   // "[object Function]"
        console.log(Object.prototype.toString.call([]))       //"[object Array]"
        console.log(Object.prototype.toString.call(null))    //"[object Null]"
        console.log(Object.prototype.toString.call(/123/g))     //"[object RegExp]"
        console.log(Object.prototype.toString.call(new Date()))  //"[object Date]"

寫在最后

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。