美文网首页
【js类型判断】包装类以及isArray,instanceof,

【js类型判断】包装类以及isArray,instanceof,

作者: 匿于烟火中 | 来源:发表于2020-02-21 16:01 被阅读0次

    谈到JS的类型判断,首先我们先了解JS当中的数据类型内容。

    JS数据基本类型和引用类型


    基本类型:undefined、null、string、number、boolean、symbol(ES6)
    普通基本类型:undefined、null、symbol(ES6)
    特殊基本包装类型:String、Number、Boolean
    引用类型:Object、Array、RegExp、Date、Function
    区别:引用类型值可添加属性和方法,而基本类型值则不可以。
    基本类型
    基本类型的变量是存放在栈内存(Stack)里的
    基本数据类型的值是按值访问的ya
    基本类型的值是不可变的
    基本类型的比较是它们的值的比较
    引用类型
    引用类型的值是保存在堆内存(Heap)中的对象(Object)
    引用类型的值是按引用访问的
    引用类型的值是可变的
    引用类型的直接比较是引用地址的比较
    JS数据类型
    NaN是数字类型


    判断引用类型:Object.prototype.toString.call(value)

    • 原理

    Object.prototype.toString关键代码中,最终返回的对象是'[object ' + classof(this) + ']'字符串。
    可以理解为:说该方法会返回当前this对象的对应的类型class字符串

    'use strict';
    // 19.1.3.6 Object.prototype.toString()
      require('./_redefine')(Object.prototype, 'toString', function toString() {
        return '[object ' + classof(this) + ']';
      }, true);
    

    classof(this)伪代码逻辑:

    this === undefined;return 'Undefined'
    this === null;return 'Null'
    O = ToObject(this value)
    把当前对象转换成Object
    因为js中Object key值只允许string或者Symbol类型
    IsArray(O)判断是否是数组对象
    IsArray判断逻辑:
    Type(O)判断是否是Object,不是直接return false;
    O是否为Array exotic object:
    如果O的[[DefineOwnProperty]]和Array的方法一样:
    大概逻辑是:
    内置定义的length属性,length属性不可以人为修改
    O内置定义的所有key值是可以类型转换成数字的字符串,
    并且最终数字范围必须在0~2^32-1次方以内,
    length的取值要大于0所有的key对应的array index
    ....
    就认为这个是个Array对象,return 'Array';
    ...
    
    Array DefineOwnProperty
    注:不同版本的js规范中实现逻辑可能略有不同
    ECMA#sec-object.prototype.tostring
    • 应用:
    Array.isArray = function(value) { 
        return Object.prototype.toString.call(value) === '[object Array]';
    }
    

    Object toString参考


    value instanceof Type == true/false

    • instanceof实现原理:看实例的___proto____指向的原型链上,有没有跟右侧类型的prototype指向同一个对象的
    function new_instance_of(leftVaule, rightVaule) { 
        let rightProto = rightVaule.prototype; // 取右表达式的 prototype 值
        leftVaule = leftVaule.__proto__; // 取左表达式的__proto__值
        while (true) {
            if (leftVaule === null) {
                return false;   
            }
            if (leftVaule === rightProto) {
                return true;    
            } 
            leftVaule = leftVaule.__proto__ 
        }
    }
    

    instanceof原理

    • 局限:假设只有一个单一的全局环境。如果网页当中包含多个框架,存在两个以上不同的全局执行环境,因为存在两个以上不同版本的Array构造函数。如果从一个 框架向另一个框架传入一个数组,传入的数组与在第二个框架中原生创建的数组构造函数不同。《Javascript高级教程》

    typeof value

    • 取值:'undefined'/'boolean'/'string'/'number'/'object'/'function'/'symbol'
    • typeof不能判断object具体是哪种类型,比如:Array之类的
    • typeof null 为'object',其实是错误的,因为null不是object类型。

    判断原理:根据变量的机器码低位1-3位存储其类型信息。

    • 000:对象

    • 010:浮点数

    • 100:字符串

    • 110:布尔

    • 1:整数
      因为null所有机器码都是0,所以typeof会把null判断为对象
      typeof 原理

    • 适合的使用场景:判断除了object之外的基本类型,避免判断null。

    相关文章

      网友评论

          本文标题:【js类型判断】包装类以及isArray,instanceof,

          本文链接:https://www.haomeiwen.com/subject/ckuufhtx.html