JS数据检测原理

常用的js检测  typeof  instanceof constructor Object.prototype.toString.call([value])

  + typeof
     + 直接在计算机底层基于数据类型的值(二进制)进行检测
     + tyepof null  "object"   对象存储在计算机中,都是以000开始的二进制存储,null也是,所以检测出来的结果是对象
    + typeof 普通对象/数组对象/正则对象/日期对象  "object"

 

 + instanceof  检测当前实例是否属于这个类的
   + 底层机制:只要当前类出现在实例的原型链上,结果都是true
   + 由于我们可以肆意的修改原型的指向,所以检测出来的结果是不准的
  + 不能检测基本数据类型

// 实例.__proto__===类.prototype

let arr = [];
console.log(instance_of(arr, Array));
console.log(instance_of(arr, RegExp));
console.log(instance_of(arr, Object)); */

/* let arr = [];
console.log(arr instanceof Array); //=>true 
console.log(arr instanceof RegExp); //=>false
console.log(arr instanceof Object); //=>true */

/* function Fn() {
    this.x = 100;
}
Fn.prototype = Object.create(Array.prototype);
let f = new Fn;
console.log(f, f instanceof Array); */

// console.log(1 instanceof Number); // false


源码实现
/* function instance_of(example, classFunc) {
    let classFuncPrototype = classFunc.prototype,
        proto = Object.getPrototypeOf(example); // example.__proto__
    while (true) {
        if (proto === null) {
            // Object.prototype.__proto__ => null
            return false;
        }
        if (proto === classFuncPrototype) {
            // 查找过程中发现有,则证明实例是这个类的一个实例
            return true;
        }
        proto = Object.getPrototypeOf(proto);
    }
}


 
  + constructor
    + 用起来看似比instanceof还好用一些(基本类型支持的)
   + constructor可以随便改,所以也不准

let arr = [];
console.log(arr.constructor === Array); // true
console.log(arr.constructor === RegExp); // false
console.log(arr.constructor === Object); // false

Number.prototype.constructor = 'AA';
let n = 1;
console.log(n.constructor === Number); // false 


  + Object.prototype.toString.call([value]) 
     + 标准检测数据类型的办法:Object.prototype.toString不是转换为字符串,是返回当前实例所属类的信息
  + 标准检测的办法 "[object Number/String/Boolean/Null/Undefined/Symbol/Object/Array/RegExp/Date/Function]"

统一完整写法

(function () {
    var class2type = {};
    var toString = class2type.toString; //=>Object.prototype.toString

    // 设定数据类型的映射表
    ["Boolean", "Number", "String", "Function", "Array", "Date", "RegExp", "Object", "Error", "Symbol"].forEach(name => {
        class2type[`[object ${name}]`] = name.toLowerCase();
    });

    function toType(obj) {
        if (obj == null) {
            // 传递的值是null或者undefined,就返回对应的字符串
            return obj + "";
        }
        // 基本数据类型都采用typeof检测
        return typeof obj === "object" || typeof obj === "function" ?
            class2type[toString.call(obj)] || "object" :
            typeof obj;
    }

    window.toType = toType;
})();

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值