JavaScript中typeof，instanceof，Object.prototype.toString

ゝ一纸荒年。 2022-02-25 05:22 346阅读 0赞

总结：typeof是一个用来检测变量数据类型的操作符，主要用来检测基本数据类型。为什么这么说呢？因为它可以判断一个变量是字符串、数值、布尔值还是undefined，有个例外null返回object，但是如果检测的变量是引用数据类型，返回object或者function，但不能细致地分出是array还是RegExp。

而 instanceof主要的目的就是检测引用类型,它可以判断出对象是Array还是RegExp。instanceof运算符只能用于对象（纯对象和数组），不适用原始类型（Undefined、Null、Boolean、Number 和 String）的值。

var s = 'hello';
    s instanceof String // false

那么instanceof的问题是，看下面代码：

var a = {};
    var b = [];
    var c = function () {};
    
    //a b c 都是 Object 的实例
    console.log(a instanceof Object) //true
    console.log(b instanceof Object) //true
    console.log(c instanceof Object) //true
    
    //只有 Array 类型的 b 才是 Array 的实例
    console.log(a instanceof Array) //false
    console.log(b instanceof Array) //true
    console.log(c instanceof Array) //false
    
    //只有 Function 类型的 c 才是 Function 的实例
    console.log(a instanceof Function) //false
    console.log(b instanceof Function) //false
    console.log(c instanceof Function) //true

所以，更简便的方式，即是使用Object.prototype.toString.call() 来确定类型。

总结起来就是：  
typeof和instanceof都是用来检测变量类型的操作符,二者的区别在于typeof一般是检测基本数据类型,而instanceof是用来检测引用数据类型。instanceof中对object的判断，我们使用Object.prototype.toString.call()

ECMAScript的数据类型分为2种：  
1.基本数据类型：number，string，boolean，undefined，null；  
2.引用数据类型：数组、对象Object、函数

**1.typeof**

var str1="nihao",  
          num1=15,  
          bol1=false,  
          obj1 = {name:'xiaoli',age:18},  
          arr1 = [1,2,3],  
          fun = function(){alert(2)},  
          n = null,  
          m;  
    console.log(typeof num1);   //number  
    console.log(typeof str1);   //string  
    console.log(typeof bol1);   //boolean  
    console.log(typeof obj1);   //object  
    console.log(typeof arr1);   //object  
    console.log(typeof n);      //object  
    console.log(typeof fun);    //function  
    console.log(typeof m);      //undefined<span style="font-size:18px;">

关于typeof null返回object的原因可以说：

JavaScript的值是由一个类型标签和实际值表示的，类型标签占3位，比如: 000就表示object。JavaScript中的null表示机器码中的NULL(空指针)，而在大多数平台下NULL是0x00(十六进制)，所以null是00000000，标签位也是000，故 typeof null === “object”。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

我们再看复杂一点的typeof比较：

typeof Function; // 'function'
    typeof new Function(); // 'function'
    typeof function() {}; // 'function'
    
    typeof Array; // 'function'
    typeof Array(); // 'object'
    typeof new Array(); // 'object'
    typeof []; // 'object'
    
    typeof Boolean; // "function"
    typeof Boolean(); // "boolean"
    typeof new Boolean(); // "object"
    
    typeof Math; // 'object'
    typeof Math(); // Math is not a function
    typeof new Math(); // Math is not a constructor

我们来看解释：

typeof Array; // 'function'
    typeof Array(); // 'object'
    typeof new Array(); // 'object'
    typeof []; // 'object'

Array是个构造函数，所以直接打印出function  
但构造出来的Array()却又是另一回事了，构造出来的结果是个数组，自然属于引用类型，所以也就打印出了‘object’

构造函数 Array(…) 不要求必须带 new 关键字。不带时，它会被自动补上。 因此 Array(1,2,3) 和 new Array(1,2,3) 的效果是一样的.

typeof Boolean; // "function"
    typeof Boolean(); // "boolean"
    typeof new Boolean(); // "object"

Boolean是个构造函数，第一句没问题  
Boolean()直接执行，得出了布尔值，所以得到了‘boolean’  
而new出来的是个Boolean对象，具体来说就是：通过构造函数创建出来的是封装了基本类型值的封装对象。

所以不建议使用包装类型（Boolean、Number、String）

typeof Math; // 'object'
    typeof Math(); // Math is not a function
    typeof new Math(); // Math is not a constructor

Math和Global（浏览器中替代为window）都是内置的对象，并不是引用类型的一种。

不是函数，不是构造器，Math和Global属于内置对象。

参考文章：  
[https://github.com/amandakelake/blog/issues/34][https_github.com_amandakelake_blog_issues_34]  
[https://www.cnblogs.com/strick/p/4979949.html][https_www.cnblogs.com_strick_p_4979949.html]

**2.instance of**

instanceof的作用：会检查右边构造函数的原型对象（prototype），是否在左边对象的原型链上。

//所以可用于检测实例是否是由某个构造函数而来的
    function Ninja(){}
    const ninja = new Ninja();
    
    ninja instanceof Ninja;   //true，其中原理就是instanceof会检查右边构造函数的原型对象（prototype），是否在左边对象的原型链上。

因此，下面两种写法是等价的。

v instanceof Vehicle
    // 等同于
    Vehicle.prototype.isPrototypeOf(v)

上面代码中，Object.prototype.isPrototypeOf的含义如下：

var p = {x:1};//定义一个原型对象
    var o = Object.create(p);//使用这个原型创建一个对象
    p.isPrototypeOf(o);//=>true：o继承p
    Object.prototype.isPrototypeOf(p);//=> true p继承自Object.prototype

由于instanceof检查整个原型链，因此同一个实例对象，可能会对多个构造函数都返回true。

var d = new Date();
    d instanceof Date // true
    d instanceof Object // true

上面代码中，d同时是Date和Object的实例，因此对这两个构造函数都返回true。

instanceof的原理是检查右边构造函数的prototype属性，是否在左边对象的原型链上。有一种特殊情况，就是左边对象的原型链上，只有null对象。这时，instanceof判断会失真。

var obj = Object.create(null);
    typeof obj // "object"
    Object.create(null) instanceof Object // false

上面代码中，Object.create(null)返回一个新对象obj，它的原型是null（Object.create的详细介绍见后文）。右边的构造函数Object的prototype属性，不在左边的原型链上，因此instanceof就认为obj不是Object的实例。但是，只要一个对象的原型不是null，instanceof运算符的判断就不会失真。

缺点：instanceof运算符只能用于对象（纯对象和数组），不适用原始类型（Undefined、Null、Boolean、Number 和 String）的值。

**3.Object.prototype.toString.call()**

从以上代码来看，要判断复合数据类型，可以如下判断：

//对象
    (a instanceof Object) && !(a instanceof Function) && !(a instanceof Function)
    //数组
    (a instanceof Object) && (a instanceof Array)
    //函数
    (a instanceof Object) && (a instanceof Function)

由于 JavaScript 中一切都是对象，任何都不例外，对所有值类型应用 Object.prototype.toString.call() 方法结果如下：

console.log(Object.prototype.toString.call(123)) //[object Number]
    console.log(Object.prototype.toString.call('123')) //[object String]
    console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
    console.log(Object.prototype.toString.call(true)) //[object Boolean]
    console.log(Object.prototype.toString.call({})) //[object Object]
    console.log(Object.prototype.toString.call([])) //[object Array]
    console.log(Object.prototype.toString.call(function(){})) //[object Function]

所有类型都会得到不同的字符串，几乎完美。

参考文章：  
[https://blog.csdn.net/JaneLittle/article/details/79587250][https_blog.csdn.net_JaneLittle_article_details_79587250]  
[https://www.jianshu.com/p/59a5a32629d8][https_www.jianshu.com_p_59a5a32629d8]  
[https://blog.51cto.com/mazey/2048538][https_blog.51cto.com_mazey_2048538]  
[https://allanhao.com/2019/02/21/typeof-instanceof/][https_allanhao.com_2019_02_21_typeof-instanceof]  
[https://www.jianshu.com/p/4bdae8b63ce6][https_www.jianshu.com_p_4bdae8b63ce6]  
[https://juejin.im/post/5c0224c1f265da611d666514][https_juejin.im_post_5c0224c1f265da611d666514]  
[https://www.cnblogs.com/wishyouhappy/p/3801048.html][https_www.cnblogs.com_wishyouhappy_p_3801048.html]  
[https://www.cnblogs.com/youhong/p/6209054.html][https_www.cnblogs.com_youhong_p_6209054.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220225/044569302c434e29b928e830f7b95610.png
[https_github.com_amandakelake_blog_issues_34]: https://github.com/amandakelake/blog/issues/34
[https_www.cnblogs.com_strick_p_4979949.html]: https://www.cnblogs.com/strick/p/4979949.html
[https_blog.csdn.net_JaneLittle_article_details_79587250]: https://blog.csdn.net/JaneLittle/article/details/79587250
[https_www.jianshu.com_p_59a5a32629d8]: https://www.jianshu.com/p/59a5a32629d8
[https_blog.51cto.com_mazey_2048538]: https://blog.51cto.com/mazey/2048538
[https_allanhao.com_2019_02_21_typeof-instanceof]: https://allanhao.com/2019/02/21/typeof-instanceof/
[https_www.jianshu.com_p_4bdae8b63ce6]: https://www.jianshu.com/p/4bdae8b63ce6
[https_juejin.im_post_5c0224c1f265da611d666514]: https://juejin.im/post/5c0224c1f265da611d666514
[https_www.cnblogs.com_wishyouhappy_p_3801048.html]: https://www.cnblogs.com/wishyouhappy/p/3801048.html
[https_www.cnblogs.com_youhong_p_6209054.html]: https://www.cnblogs.com/youhong/p/6209054.html