【js类型判断】包装类以及isArray,instanceof,typeof用法及原理

谈到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。