手把手带你写一个JavaScript类型判断小工具

      业务写了不少，依然不是前端大神，我相信这是不少‘入坑’前端开发同窗的迷茫之处，我的以为前端职业发展是有路径可寻的，前期写业务是一个积累过程，后期提炼总结，好比编程思想，父子类的原型继承，仍是对象之间的关联委托，设计模式的熟悉和运用，这都是一个前端工程师成长为高级工程师的必经之路，而这条道路是须要咱们耐住性子，请相信，生活迟早会回报咱们的努力。

      话很少说，进入咱们今天的主题，JavaScript中判断一个数据的类型有多种方式：typeof、instanceof、constructor、Object.prototype.toString.call，通常判断简单的数据类型咱们会使用typeof，可是对于数组，正则类型的数据，typeof是无能为力的，instanceof通常用于判断对象的继承关系，今天咱们主要说的是Object.prototype.toString.call这个方法。

      1.判断类型      

咱们能够写一个isType的方法来判断数据的类型，传入两个参数，第一个是须要判断的数据，第二个是数据类型。

前置知识：各个类型经过Object.prototype.toString.call方法后获得的结果

console.log(Object.prototype.toString.call('hello')) //[object String]
console.log(Object.prototype.toString.call(34)) //[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(function f() {})) // [object Function]

下面咱们就开始撸代码了：
function isType(content,type){
    //这里咱们经过正则匹配去掉'[object ]',只留下类型
    let t = Object.prototype.toString.call(content).replace(/\[object\s|\]/g,'');
    //将获得的t与传入的type进行比较，返回结果，结果为Boolean类型
    return t === type;
}
//执行函数并将结果返回给res，打印res
let res = isType('hello','String')
console.log(res);//true复制代码

是否是很是简单，对本身又充满信心了，不过如此嘛！！确实很简单，来，继续，一点点深刻~~

经过上面的一个函数咱们就能够很容易的判断一个JavaScript数据的类型，可是咱们在使用的时候是这个样子的：

let res1 = isType('hello','String');
let res2 = isType(123,'Number');
let res3 = isType(true,'Boolean');
复制代码

咱们每次在使用的时候都是手动传入类型，颇有可能手一抖，就传错类型了，原本'String'，咱们传入了'Strings'，是否是很坑爹呀~~

通常的库或者插件不会这样去让咱们使用，通常会这么使用utils.isString('hello')，咱们只须要传入咱们的数据就能够了，插件会提供相应的判断方法，好比

utils.isString('hello');
utils.isNumber(123);
utils.isBoolean(true);复制代码

这里咱们须要批量化生产函数，就须要用到下面的一个函数返回一个函数，也就是所谓的闭包，也被叫作高阶函数，不要那些高大上，咱们程序员都是接地气的~~，初学者对于闭包理解起来比较困难，不着急，随着你的深刻，都会明白的~~~

      2.一个函数返回一个函数

接下来咱们对上面的isType函数进行改造，

let isNumber = isType('Number');
let isString = isType('String');
let isBoolean = isType('Boolean');
isNumber(12);
isString('hello');
isBoolean(true)复制代码

经过执行isType()，咱们能够获得想要的函数，说明在isType内部，我么返回了一个函数，返回的这个函数对于外层函数 (也就是isType) 的参数进行了引用，JavaScript的垃圾回收机制是不会回收被引用的数据的，因此type被保留在了返回函数的内部，这就是闭包机制。

function isType(type) {
    return function(content) {
        let t = Object.prototype.toString.call(content).replace(/\[object\s|\]/g,'');
        return t === type;
    }
}复制代码

经过执行isType，咱们获得了对内部函数的引用。

isNumber(12);
isString('hello');
isBoolean(true);复制代码

上面其实就是对isType内部函数的执行。

也不过如此嘛，说好的手把手带咱们写一个判断类型插件呢！？

      3.属于咱们本身的判断JavaScript类型插件

有些同窗已经有启发了，咱们能够这样操做

let type = ['String','Number','Function','Undefined','Boolean','Array'];
let utils = {};
type.forEach(item => {
    utils['is' + item] = isType(item);
})
复制代码

下面是console.log(utils)的结果

是否是很惊喜~~

咱们能够利用ES6的模块化机制来封装这个方法，而后erport 出去供小伙伴使用，是否是很简单，也能够上传到npm，供广大开发者使用，是否是颇有成就感。（估计这个难度的插件去你npm下载使用的人几乎没有，这里咱们掌握怎么经过闭包去处理问题这个思想就行）下面是完整版utils.js

function isType(type) {
   return function(content) {
      let t = Object.prototype.toString.call(content).replace(/\[object\s|\]/g,'');
      return t === type;
   }
}

function createUtils(){
    let utils = {};
    let type = ['String','Number','Function','Undefined','Boolean','Array'];
    type.forEach(item => {
       utils['is' + item] = isType(item);
    })
    return utils;
}
let utils = createUtils();
export default{utils}复制代码

但愿对你有所帮助，这条路还很长，慢慢来~~~

后续敬请期待算法与数据结构系列~~~~

若是你以为对你又帮你，请点个赞，这是对原创者最大的写做分享动力~~~~