面试题:用typeof还是instanceof

数据类型

js中有7种数据类型,其中有6种基本数据类型:



  1. underfined
  2. Null
  3. Boolean
  4. Number
  5. String
  6. Symbol

其中Symbol是ES6新增的,还有一种复杂类型(引用类型)Object。 我们常用typeof和instanceof操作符来判断数据类型



typeof

typeof 是一个一元操作符不是函数,所以不需要传递参数,使用方法非常简单:typeof A,使用typeof会直接返回类型结果



// Numbers 
typeof 37 === 'number';
// Strings 
typeof "" === 'string';
// Booleans 
typeof true === 'boolean';
// Symbols 
typeof Symbol('foo') === 'symbol';
// Undefined 
typeof undefined === 'undefined'; 
typeof blabla === 'undefined'; // 一个未定义的变量,或者一个定义了却未赋初值的变量
// Objects 
typeof {a:1} === 'object';
type [1,2,3] = 'object'
-------------------------------'下面是不是有点奇怪?'--------------------------
// 函数
typeof function(){} === 'function';
// Null
typeof null === 'object'
 

我们可以轻松的用typeof判断数据类型,但是虚线下面的判断结构好像有点怪。这就涉及到了typeof实现原理的问题



typeof实现原理

让我们先来聊聊typeof的实现原理吧

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



  • 000:对象
  • 010:浮点数
  • 100:字符串
  • 110:布尔
  • 1:整数

但是undefinednull 这两个值却比较特殊



  1. null:所有机器码均为0
  2. undefined:用 −2^30 整数来表示

这里我们先不管underfined,现在你们知道为什么typeof判断null是对象了吗,因为null的机器码全是0,所以被当成了object。这个bug存在了将近20多年,也许永远也不会修复,因为这牵涉到太多的web系统,修复它会产生更多的bug,令许多系统无法正常工作。

typeof判断函数返回结果就是函数,这其实还好理解,函数也是对象,因为函数比较重要,有自己特殊的属性,所以我们用typeof判断函数时会区分与对象,单独显示。

但是万一我们要判断这个实例属于哪个对象,那显然这时typeof已经失去作用了,因为除了函数,它都会判断为对象,这时我们就需要用到instanceof



instanceof

instance中文翻译为实例,因此instanceof的含义就不言而喻,判断该对象是谁的实例,同时我们也就知道instanceof是对象运算符。



instanceof实现原理

instanceof的判断就是根据原型链进行搜寻,在对象obj1的原型链上如果存在另一个对象obj2的原型属性,那么表达式(obj1 instanceof obj2)返回值为true;否则返回false。下面代码说明了instanceof的使用方法



function Parent(){};
function Child(){};
function Other(){};

Child.prototype = new Parent();
let child = new Child();

child instanceof Child; // true
child instanceof Parent; // true
child instanceof Object; // true
child instanceof Other; // false
 

手写instanceof

手写instanceof代码的实现原理也是面试的考察点,instanceof核心实现如下,我们自己封装了一个具有instanceof功能的函数。



function instance_of(left, right) {
  let leftVal = left.__proto__;
  let rightVal = right.prototype;
  while (true) {
    if (leftVal === null) return false;
    if (leftVal === rightVal) return true;
    leftVal = leftVal.__proto__;
  }
}
let a = { name: '冯总' }
console.log(instance_of(a, Object));//true
 

总结

typeof与instanceof都是判断数据类型的方法,区别如下:



  1. typeof会返回一个变量的基本类型,instanceof返回的是一个布尔值
  2. instanceof 可以准确地判断复杂引用数据类型,但是不能正确判断基础数据类型
  3. 而typeof 也存在弊端,它虽然可以判断基础数据类型(null 除外),但是引用数据类型中,除了function 类型以外,其他的也无法判断


 0
 0
 分享
评论图片
评论