【JS】typeof和instanceof的区别是什么？

简介：typeof和instanceof的区别是：typeof的返回值是一个字符串，用来说明变量的数据类型；instanceof的返回值是布尔值，用于判断一个变量是否属于某个对象的实例。

​
 

比较typeof与instanceof

相同点：

JavaScript 中 typeof 和 instanceof 常用来判断一个变量是否为空， 或者是什么类型的。

不同点：

typeof：

1、返回值是一个字符串， 用来说明变量的数据类型。

typeof 操作符返回一个字符串，表示未经计算的操作数的类型

2、typeof 一般只能返回如下几个结果： number, boolean, string, function, object, undefined。

if (typeof a != "undefined") {

   console.log("ok");

 } eles {

    console.log("not ok");
}

//下面的代码是错误的

// if (a) //因为如果 a 不存在（ 未声明） 则会出错。

// if (a) {

//     console.log("ok");

// } else {

//     console.log('cc'); 

// }

对于 Array, Null 等特殊对象使用 typeof 一律返回 object， 这正是 typeof 的局限性。

instanceof：

1、返回值为布尔值

2、instanceof 用于判断一个变量是否属于某个对象的实例。

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上

使用如下：
 

​object instanceof constructor

object为实例对象，constructor为构造函数

构造函数通过new可以实例对象，instanceof能判断这个对象是否是之前那个构造函数生成的对象
 

分析：instance的意思是实例，因此可以知道instanceof的作用就是判断该对象是谁的实例，我们也就知道了instanceof是对象运算符。

这就牵扯到了对象的继承，他的判断就是根据原型链进行搜寻，在对象obj1的原型链上如果存在另一个对象obj2的原型属性，那么表达式（obj1 instanceof obj2）返回值为true，（判断obj1是否为obj2的实例），否则为false。

⏬ 示例： 

var a = new Array();
alert(a instanceof Array); // true
alert(a instanceof Object) // true

//如上， 会返回 true， 同时 alert(a instanceof Object) 也会返回 true;

// 这是因为 Array 是 object 的子类。
alert(b instanceof Array) // b is not defined


function Test() {};
var a = new test();
alert(a instanceof test) // true

⏬ 示例：  

// 定义构建函数
let Car = function() {}
let benz = new Car()
benz instanceof Car // true
let car = new String('xxx')
car instanceof String // true
let str = 'xxx'
str instanceof String // fals

总结：typeof与instanceof都是判断数据类型的方法，区别如下：

typeof返回值是一个字符串，instanceof返回的是一个布尔值

1、 typeof对于丰富的对象实例，只能返回object，导致有时候得不到真实的数据类型。

<script>
        var a, b, c, d, e, f,g,h,i;
        a = [1, 2, 3, 4, 5];
        b = 1;
        c = "weaface";
        d = false;
        f = null;
        e = new Date();
        g = undefined;
        h = function () {};

        console.log(typeof(a));//object
        console.log(typeof(b));//number
        console.log(typeof(c));//string
        console.log(typeof(d));//boolean
        console.log(typeof(e));//object
        console.log(typeof(f));//object
        console.log(typeof(g));//undefined
        console.log(typeof(h));//function
        console.log(typeof(i));//undefined
    </script>

typeof用于数据类型的判断，返回值有number、string、boolean、function、undefined、object 六个。但是，在其中你会发现，typeof判断null、array、object以及函数的实例（new + 函数）时，它返回的都是object。这就导致在判断这些数据类型的时候得不到真实的数据类型。所以，typeof 存在的弊端——它虽然可以判断基本数据类型（null 除外），但是引用数据类型中，除了function 类型以外，其他的也无法判断。由此引出instanceof。 

2、instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型。

instanceof用来判断对象，可以对不同的实例对象进行判断，判断方法是根据对象的原型链依次向下查询，如果obj2的原型属性存在于obj1的原型链上，代码形式（obj1 instanceof obj2）（判断obj1是否为obj2的实例），obj2必须为对象，否则会报错。返回的是布尔值。

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

如果需要通用检测数据类型，可以采用Object.prototype.toString，调用该方法，统一返回格式“[object Xxx]”的字符串，代码形式，如下：

Object.prototype.toString({})       // "[object Object]"
Object.prototype.toString.call({})  // 同上结果，加上call也ok
Object.prototype.toString.call(1)    // "[object Number]"
Object.prototype.toString.call('1')  // "[object String]"
Object.prototype.toString.call(true)  // "[object Boolean]"
Object.prototype.toString.call(function(){})  // "[object Function]"
Object.prototype.toString.call(null)   //"[object Null]"
Object.prototype.toString.call(undefined) //"[object Undefined]"
Object.prototype.toString.call(/123/g)    //"[object RegExp]"
Object.prototype.toString.call(new Date()) //"[object Date]"
Object.prototype.toString.call([])       //"[object Array]"
Object.prototype.toString.call(document)  //"[object HTMLDocument]"
Object.prototype.toString.call(window)   //"[object Window]"

了解了toString的基本用法，下面就实现一个全局通用的数据类型判断方法

function getType(obj){
  let type  = typeof obj;
  if (type !== "object") { // 先进行typeof判断，如果是基础数据类型，直接返回
    return type;
  }
  // 对于typeof返回结果是object的，再进行如下的判断，正则返回结果
  return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}

代码形式，使用如下：

getType([])     // "Array" typeof []是object，因此toString返回
getType('123')  // "string" typeof 直接返回
getType(window) // "Window" toString返回
getType(null)   // "Null"首字母大写，typeof null是object，需toString来判断
getType(undefined)   // "undefined" typeof 直接返回
getType()            // "undefined" typeof 直接返回
getType(function(){}) // "function" typeof能判断，因此首字母小写
getType(/123/g)      //"RegExp" toString返回

总之，instanceof和typeof是两个运算符，在程序设计中用到，常用来判断一个变量是否为空，或者是什么类型的。

instanceof和typeof的区别：

◼️ typeof

typeof 是一个一元运算，放在一个运算数之前，运算数可以是任意类型。 返回值是一个字符串，该字符串说明运算数的类型。

typeof 一般只能返回如下几个结果： number,boolean,string,function,object,undefined。

一般可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错，对于 Array，Null 等特殊对象使用 typeof 一律返回 object，这正是 typeof 的局限性。

◼️ instanceof

instance：实例,例子

a instanceof b?alert("true"):alert("false"); // a是b的实例？真:假

instanceof 用于判断一个变量是否某个对象的实例，如 var a=new Array();alert(a instanceof Array); 会返回 true，同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。