typeof & instanceof 原理

2021-02-18 1,693 阅读2分钟

typeof 原理

typeof是操作符而不是函数，用来检测变量的类型
数据在底层都表示为二进制，js中前三位（低位）代表数据类型
- 000：对象
- 110：布尔
- 100：字符串
- 010：浮点数
- 1：整数 typeof null 为object是因为null的二进制全是0，所以也被判断为Object类型

JavaScript 数据类型

string
number
null
undefined
boolean
symbol // ES6引入的数据类型，表示独一无二的值
BigInt // ES2020引入的新数据类型，它提供了一种方法来表示大于 2的53次方 - 1 的整数。这原本是Javascript中可以用Number表示的最大数字。BigInt可以表示任意大的整数
object

了解两种新的数据类型：symbol & BigInt
除了对象类型，其他数据类型为基本类型
检测数据类型的其它方法Object.prototype.toString(...)： typeof 不能判断对象为具体哪种对象子类，比如正则、数组、返回值都为object对象，一般通过Object.prototype.toString(...)来查看其内部包含的属性[[class]]（对象子类）

Object.prototype.toString.call(new Date); // "[object Date]"
Object.prototype.toString.call([]); // "[object Array]"
Object.prototype.toString.call(/reg/ig); // "[object RegExp]"

instanceof 原理

instanceof语法：object instanceof constructor等同于constructor.prototype.isPrototypeOf(object)
instanceof的机制是检测构造函数的prototype属性是否出现在某个实例对象的原型链上，是则返回true，否则false

// instanceof代码实现
function instanceof(L, R) { //L是表达式左边，R是表达式右边
    const O = R.prototype;
    L = L.__proto__;
    while(true) {
        if (L === null)
            return false;
        if (L === O) // 这里重点：当 L 严格等于 O 时，返回 true 
            return true;
        L = L.__proto__;
    }
}

总结

typeof通过判断二进制数据（低位）前三位得出数据类型
instanceof通过判断构造函数的prototype是否出现在实例对象的原型链上得出数据类型
判断数据类型的几种方式：

  typeof
  instanceof
  constructor.prototype.isPrototypeOf
  Object.prototype.toString(...)

BigInt是ES2020引入的新数据类型，代表任意大的整数，突破之前js中Number的最大整数限制
手写instanceof实现