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 属性是否出现在对象的原型链中的任何位置。即用于检测一个对象在其原型链中是否存在一个构造函数的 protorype 属性。其实现原理如下：

  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 类型以外，其他的也无法判断

　　可以看到，上述两种方法都有弊端，并不能满足所有场景的需求

　　4、补充：通过constructor判断数据类型

console.log((2).constructor === Number); // true
console.log(true.constructor === Boolean); // true
console.log("str".constructor === String); // true
console.log([].constructor === Array); // true
console.log(function () {}.constructor === Function); // true
console.log({}.constructor === Object); // true

　　但是需要注意，如果一个对象改变了原型，constructor 的判断就不再准确了，代码如下：

function Fnc() {}
// 改变原型
Fnc.prototype = new Array();
var ff = new Fnc();
console.log(ff.constructor === Fnc); // false
console.log(ff.constructor === Array); // true

　　如果需要通用检测数据类型，建议采用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]"

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。