JS中操作符typeof与instanceof的使用区别在哪-群英

上一篇：Javascript代码优化可以从哪些方面入手，怎么做下一篇：用JS怎样写一个仿小米轮播图的效果，代码是什么

这篇文章给大家介绍了“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]"

总结：

以上就是关于“JS中操作符typeof与instanceof的使用区别在哪”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。