原型链篇:一文看懂js类型判断typeof与instanceof

407 阅读2分钟

typeof实现原理

其实,js在底层存储变量的时候,会在变量机器码的低位1-3位存储其类型信息👉

  • 000:对象
  • 010:浮点数
  • 100:字符串
  • 110:布尔
  • 1:整数 but, 对于 undefined 和 null 来说,这两个值的信息存储是有点特殊的。

null:所有机器码均为0

undefined:用 −2^30 整数来表示

所以, typeof在判断null的时候就出现问题了,由于null的机器码均为0,因此直接被当做了对象来看待。

image.png

null通过类型判断却又不是object,这也是javaScript的历史遗留bug。

因此在用 typeof 来判断变量类型的时候,我们需要注意,最好是用 typeof 来判断基本数据类型(包括symbol),避免对 null 的判断。

typeof可以准确判断出的类型有(number,string,boolean,undefined,function,symbol)

延伸类型判断方案Object.prototype.toString.call

Object.prototype.toString.call(1) // "[object Number]" 
Object.prototype.toString.call('hi') // "[object String]" 
Object.prototype.toString.call({a:'hi'}) // "[object Object]" 
Object.prototype.toString.call([1,'a']) // "[object Array]" 
Object.prototype.toString.call(true) // "[object Boolean]" 
Object.prototype.toString.call(() => {}) // "[object Function]" 
Object.prototype.toString.call(null) // "[object Null]" 
Object.prototype.toString.call(undefined) // "[object Undefined]" 
Object.prototype.toString.call(Symbol(1)) // "[object Symbol]"

instanceof实现原理

通过对比leftValue.__proto__ == rightValue.prototype,当leftValue.__proto__不等于rightValue.prototype时,会通过__proto__隐式原型向父级深入获取原型对其进行判断,直到__proto__为null作为一个终点。在这个过程中只要有一个满足条件即为true。

由于引用类型才能获取到__proto__的值,所以该方法只适用于对引用类型数据进行类型判断。

手写实现方法

function myInstanceof(leftValue,rightValue) {
  // 判断左右数值是否为null或不属于引用类型数据
  if(!leftValue || !['object', 'function'].includes(typeof leftValue)) return false
  if(!rightValue || !['object', 'function'].includes(typeof rightValue)) return false
  // 如果左侧隐式原型等于右侧显示原型则视为存在该原型
  if(leftValue.__proto__ === rightValue.prototype) return true
  // 递归向内查找直到__proto__为null
  return myInstanceof(leftValue.__proto__, rightValue)
}
function func(){}
console.log(myInstanceof(1,Object)) // false
console.log(myInstanceof(func,Object)) // true
console.log(myInstanceof(func,Function)) // true

原型链图解如下

image.png