JS类型判断之typeof、instanceof与toString示例详解

前言

在 JavaScript 的世界里，准确判断一个变量的类型并不像看上去那么简单。为什么 typeof null 是 object？为什么 instanceof 不能判断基本类型？本文将带你通过底层逻辑彻底搞定这些面试重难点。

一、 typeof：快速但有“缺陷”的选择

typeof 是最常用的判断方式，它直接返回一个表示类型的字符串。

1. 判断表现

• 基本类型：除了 null 之外，都能显示正确结果（string, number, boolean, undefined, symbol, bigint）。

• 引用类型：

  • 函数：返回 "function"。
  • 其他（数组、正则、日期、普通对象） ：统一返回 "object"。

2. 这里的坑：为什么 typeof null === 'object'？

底层原理： JavaScript 的底层变量是使用二进制存储的。为了提高性能，引擎通过二进制的前三位（Type Tag）来判断类型：

• 000：对象（Object）
• 1：整数
• 010：浮点数
• 100：字符串
• 110：布尔值

而 null 的所有二进制位都是 0，因此它的前三位也是 000。早期的 JS 实现中没有对 null 进行特判，导致它被误判为了对象。这是一个历史遗留的 Bug，但为了兼容性一直没有修复。

二、 instanceof：基于原型链的“探亲”

instanceof 可以判断对象是属于哪种类型，它的内部机制是通过判断对象的原型链中是不是能找到该类型的 prototype.

1. 查找机制

只要右边变量的 prototype 在左边变量的原型链上就会返回ture，因此instanceof 在查找的过程中会遍历左边变量的原型链，直到找到右边变量的 prototype，如果原型链遍历完都没有找到，就会返回 false，告诉我们左边变量并不是右边变量的实例

2. 手写实现（面试常考）

手写 instanceof 的核心在于循环向上遍历原型链。

  function myInstanceof(obj, func) {
    if (typeof obj !== 'object' && typeof obj !== 'function') {
      return false;
    }
    let proto = obj.__proto__;
    const prototype = func.prototype;
    while (proto !== prototype) {
      if (proto === null) {
        return false;
      }
      proto = proto.__proto__;
    }
    return true;
  }
  const date = new Date();
  console.log(myInstanceof(date, Object));    // true
  console.log(myInstanceof([1, 2], Array)); // true

三、 终极方案：Object.prototype.toString

如果你需要一个万能、精准的判断方式，那么非它莫属。

1. 原理

调用该方法会返回一个格式为 [object Type] 的字符串，其中 Type 就是该值的内部属性 [[Class]]。

2. 测试表现

const toString = Object.prototype.toString;
console.log(toString.call(Math));      // [object Math]
console.log(toString.call('a'));       // [object String]
console.log(toString.call(null));      // [object Null]
console.log(toString.call(undefined)); // [object Undefined]
console.log(toString.call([]));        // [object Array]
console.log(toString.call(new Date())); // [object Date]

四、 面试模拟题（实战演练）

Q1：如何判断一个变量是否是数组？

参考回答：

1. Array.isArray(arr)（首选，ES6标准方法）。
2. Object.prototype.toString.call(arr) === '[object Array]'（最通用）。
3. arr instanceof Array（注意：如果是在跨 iframe 环境下，原型链不同可能会失效）。

Q2：typeof []和typeof {}的结果分别是什么？

参考回答： 都是 "object"。因为 typeof 除了函数以外，对于所有的引用类型都会返回 "object"。

Q3：执行2 instanceof Number的结果是什么？为什么？

参考回答： 结果是 false。 因为 instanceof 只能用于检测对象实例。数字 2 是原始值（Primitive），它没有原型链。如果想让它返回 true，需要写成 new Number(2) instanceof Number。

总结

• typeof：适合判断基本类型（除 null）和函数。
• instanceof：适合判断对象之间的继承关系。
• toString：适合需要百分百准确判断类型的场景。

到此这篇关于JS类型判断之typeof、instanceof与toString的文章就介绍到这了,更多相关JS类型判断typeof、instanceof与toString内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论