如何在JavaScript中判断变量的类型
注：本文章是作者在网上阅读资料后的个人总结，必然有一定疏漏，希望大家可以在评论区指出错误
文章目录
- 如何在JavaScript中判断变量的类型
- 前言
- 一、typeof
- 二、Instanceof
- 三、Object.prototype.toString.call
前言
在前端开发的过程中，JavaScript语言的熟练使用是重中之重，而在使用过程中，往往会遇见需要我们去判断变量类型的情况，本篇文章旨在帮助大家理解并掌握几种常用的判断方法，并找到它们之间的区别。
众所周知，在 ECMAScript 规范中，共定义了 7 种数据类型，分为基本类型和引用类型两大类。
基本类型：String、Number、Boolean、Symbol、Undefined、Null
引用类型：Object
一、typeof
typeof 一般来说是我们最常使用的，简单方便，但它有一个致命的缺点，下面我们通过一段代码来看一下：
typeof 'hhh'; // string 有效
typeof 1; // number 有效
typeof true; //boolean 有效
typeof Symbol(); // symbol 有效
typeof undefined; //undefined 有效
typeof new Function(); // function 有效
typeof null; //object 无效
typeof [] ; //object 无效
typeof new Date(); //object 无效有没有发现什么问题？
我们发现：返回的结果用该类型的字符串(全小写字母)形式表示，包括以下 7 种：string、number、boolean、symbol、undefined、object、function
是的，只包括这七种，这和我们的预期大大不符！数组呢？null呢？
可惜的是，我们的常用选手typeof不能判断稍微复杂一点的引用类型
但要是typeof这么全能，那要把其余选手置于何地呢？
正所谓：腹中天地阔，常有渡人船
老哲学家了
总结一下：
对于基本类型，除 null 以外，均可以返回正确的结果。
对于引用类型，除 function 以外，一律返回 object 类型。
对于 null ，返回 object 类型。
下面一位：Instanceof
二、Instanceof
相较于typeof，这位兄弟就要稍微的难理解一些
简单来说：instanceof 检测的是原型，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true，否则返回 false。
说到原型，可能有些人就有些烦躁了
的确原型链也是个说难不难，但绝不简单的知识点，在这里也就不多赘述，对这部分不太理解的同学可以先去学习一下原型链的知识。
这张图相信大家都看过，这是一张解释原型链原理的经典图片
前面讲过，instanceof运算符的左边是实例对象，右边是构造函数，左边变量暂称为A，右边变量暂称为B，那么表达式就是：
A instanceof B
这个式子的意义是，它会检查右边构造函数的原型对象（prototype），是否在左边对象的原型链上。
也就是说instanceof的判断规则是：
instanceof会检查整个原型链，将沿着A的__proto__这条线来一直找，同时沿着B的prototype这条线来一直找，直到能找到同一个引用，即同一个对象，那么就返回true。如果找到终点还未重合，则返回false。
按照以上规则，我们来看看“ f1 instanceof Object ”这句代码为什么是true？
根据上图很容易就能看出来， f1–>proto–>proto 和Object–>prototype 指向同一个对象。
真可谓是：有缘千里来相会
如果你原型链弄明白的话，instanceof也很容易理解的吧！
三、Object.prototype.toString.call
这个方法比起以上两个，少了一些人气，但是它判断出来的类型，更加的直观，不像instanceof，返回的是一个布尔值，下面我们来看一看实际使用情况
console.log(Object.prototype.toString.call("hhh"));//[object String]
console.log(Object.prototype.toString.call(12));//[object Number]
console.log(Object.prototype.toString.call(true));//[object Boolean]
console.log(Object.prototype.toString.call(undefined));//[object Undefined]
console.log(Object.prototype.toString.call(null));//[object Null]
console.log(Object.prototype.toString.call({name: "hhh"}));//[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(new Date));//[object Date]这种判断方法，返回值为[object 变量类型]
是不是非常好用呢？
但是许多人光知道怎么用，但却不明白他的原理。
首先要知道，Object原型上有一个toString方法，其作用是返回对象的具体类型。
而call则是可以改变当前的this指向，从Object转移到括号中的对象上来，相当于是狸猫换太子，借用了Object原型上的方法来进行类型判断。
自己做不到的事就要让别人帮忙，这不就是团队合作嘛！
老懂哥了
以上呢，就是三种常见的js判断变量类型的方法了，欢迎各位参考学习，也希望大家能指出我的错误，共同进步。
