關(guān)于js typeof 與 instanceof 判斷數(shù)據(jù)類型區(qū)別及開(kāi)發(fā)使用

更新時(shí)間：2021年10月18日 09:44:05 作者：Serendipity

我們經(jīng)常會(huì)遇到判斷一個(gè)變量的數(shù)據(jù)類型或該變量是否為空值的情況，你是如何去選擇判斷類型操作符的？本文來(lái)記錄一下我們開(kāi)發(fā)人員必須掌握關(guān)于 typeof 和 instanceof 的知識(shí)點(diǎn)及在開(kāi)發(fā)中的使用建議，同時(shí)在面試過(guò)程中也經(jīng)常會(huì)遇到這樣的問(wèn)題,需要的朋友可參考下文章內(nèi)容

日常的開(kāi)發(fā)中，我們經(jīng)常會(huì)遇到判斷一個(gè)變量的數(shù)據(jù)類型或者該變量是否為空值的情況，你是如何去選擇判斷類型的操作符的？本文來(lái)總結(jié)記錄一下我們開(kāi)發(fā)人員必須掌握的關(guān)于 typeof 和 instanceof 的知識(shí)點(diǎn)以及在開(kāi)發(fā)中的使用建議，同時(shí)在面試過(guò)程中也經(jīng)常會(huì)遇到這樣的問(wèn)題。

1、typeof 操作符

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

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

返回值	含義值
"undefined"	未定義
"boolean"	布爾值
"string"	字符串
"number"	數(shù)值
"object"	對(duì)象（而不是函數(shù)）或 null
"function"	函數(shù)
"symbol"	符號(hào)

（2）常見(jiàn)使用方法

        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'
        //對(duì)于Array，Null等特殊對(duì)象使用typeof一律返回object，這正是typeof的局限性
        console.log(typeof null);   //'object'
        console.log(typeof [1, 2, 3]);//'object'
        console.log(typeof undefined);  //'undefined'
        //通過(guò) typeof 操作符來(lái)區(qū)分函數(shù)和其他對(duì)象
        function f1() { console.log(111); }
        console.log(typeof f1);  //'function'  
        console.log(typeof f1());  // 111 'undefined'

（3）不能通過(guò)typeof 來(lái)判斷一個(gè)變量是否存在

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

2、instanceof 操作符

typeof雖然對(duì)原始值很有用，但它對(duì)引用值的用處不大。我們通常不關(guān)心一個(gè)值是不是對(duì)象，而是想知道它是什么類型的對(duì)象。為了解決這個(gè)問(wèn)題，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 的實(shí)例，因此通過(guò) instanceof 操作符檢測(cè)任何引用值和Object 構(gòu)造函數(shù)都會(huì)返回 true 。

類似地，如果用 instanceof 檢測(cè)原始值，則始終會(huì)返回 false ，因?yàn)樵贾挡皇菍?duì)象。

instanceof 運(yùn)算符用于判斷構(gòu)造函數(shù)的 prototype 屬性是否出現(xiàn)在對(duì)象的原型鏈中的任何位置。其實(shí)現(xiàn)原理如下：

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

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

3、typeof 和 instanceof 的區(qū)別以及開(kāi)發(fā)中的使用建議

typeof 與 instance 都是判斷數(shù)據(jù)類型的方法，區(qū)別如下：

typeof會(huì)返回一個(gè)變量的基本類型，instanceof返回的是一個(gè)布爾值
instanceof 可以準(zhǔn)確地判斷復(fù)雜引用數(shù)據(jù)類型，但是不能正確判斷基礎(chǔ)數(shù)據(jù)類型
而typeof 也存在弊端，它雖然可以判斷基礎(chǔ)數(shù)據(jù)類型（null 除外），但是引用數(shù)據(jù)類型中，除了function 類型以外，其他的也無(wú)法判斷

可以看到，上述兩種方法都有弊端，并不能滿足所有場(chǎng)景的需求

如果需要通用檢測(cè)數(shù)據(jù)類型，建議采用Object.prototype.toString，調(diào)用該方法，統(tǒng)一返回格式“[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]"

總結(jié)：

到此這篇關(guān)于關(guān)于js typeof 與 instanceof 判斷數(shù)據(jù)類型區(qū)別及開(kāi)發(fā)使用的文章就介紹到這了,更多相關(guān)js typeof 與 instanceof 內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: