2. JS数据类型检测_封装一个数据类型检测的方法库

Posted 2023-04-01

参考技术A

JS中的数据类型分为三大类：

数据类型检测四种方式

语法： typeof [value]

基于 typeof检测结果

@优势
使用方便，所以在真实项目中，我们也会大量应用它来检测，尤其是在检测基本类型值(除null之外)和函数类型值的时候，它还是很方便的

@局限性
1、 typeof null => “object” ， 但是null 并不是对象,是空指针对象;
2、无法细分当前值是普通对象还是数组对象等， 如: 是正则 还是数组
因为只要是对象数据类型，返回的结果都是"object";

语法： [实例] instanceof [类]

@局限性：

1、不能处理基本数据类型值
2、只要在当前实例的原型链( proto )中出现过的类，检测结果都是true（用户可能会手动修改原型链的指向：example.proto 或者 在类的继承中 等情况）

@原理
在类的原型上一般都会带有CONSTRUCTOR属性，存储当前类本身，我们也是利用这一点，获取某实例的CONSTRUCTOR属性值，验证是否为所属的类，从而进行数据类型检测

@局限性
可以去随意修改对应的constructor值或者是手动给ary增加一个私有的constructor属性等;

"[object 所属类]" ，例如："[object Array]"...

**所有的数据类型上都有toString方法，只有Object原型上的toString是检测当前实例所属类的详细信息的,其它原型的方法仅仅是转换为字符串;

@原理

1.首先基于原型链查找机制，找到Object.prototype.toString
2.把找到的方法执行，方法中的this -> obj
3.方法内部把this（obj）的所属类信息输出
=>方法执行，方法中的this是谁，就是检测谁的所属类信息

@优势

所有数据类型隶属的类信息检测的一清二楚
String/Boolean/Null/Undefined/Symbol/Object/Array/RegExp/Date/Math/Function...

结合每个方法，属性的优缺点，我们来封装一个简单的检测数据类型库：

isType方法封装和类型检测

isType封装

任何的数据类型，都会包含一个叫做toString的方法存在他们的骨子里。这个方法就是将数据由其他的形态转换成string形态(除了null和undefined),所以我们可以利用该特性做类型检测。

console.log(toString.call(‘aa‘)); // [object String]
console.log(toString.call(1234)); // [object Number]
console.log(toString.call(true)); // [object Boolean]
console.log(toString.call(Math)); // [object Math]
console.log(toString.call(new Date())); // [object Date]
console.log(toString.call(function aa(){})); // [object Function]
console.log(toString.call([])); // [object Array]
console.log(toString.call({})); // [object Object]

// 是不是字符串的方法可以封装如下
var isString = function(obj){
    return toString.call(obj) == ‘[object String]‘;//注意String是大写
}

// 是不是函数
var isFunction = function(obj){
    return toString.call(obj) == ‘[object Function]‘;
}
 
// 是不是数组
var isArray = function(obj){
    return toString.call(obj) == ‘[object Array]‘;
}

...写到这里，我想你就明白，都是利用最上面的特性进行判断

可以发现除了类型不一样，其他都一样，我们就想着能不能想封装成一个函数，把他们公共的部分都抽离出来,所以封装如下：

var isType = function(type) {
    return function(obj) {
        return toString.call(obj) == ‘[object ‘ + type + ‘]‘; //注意，object后面有空格
    }
}

类型检测也可以用以下函数

function typeOf(ele) {
    var r;
    if(ele === null) r = null;
    else if(ele instanceof Array) r = ‘Array‘;
    else if(ele === window) r = ‘window‘;
    else if(ele instanceof Date) r = ‘Date‘;
    else r = typeof ele;
    return r;
}