JS中typeof与instanceof的区别

typeofinstanceof 在 JavaScript 里虽然都是用来判断类型的,但它们的工作方式、适用场景和返回值有很大区别。

我帮你分成几个维度对比一下:


1. 基本语法

javascript 复制代码
typeof value        // 返回一个表示类型的字符串
value instanceof Constructor // 返回 true 或 false

2. 作用范围

特性 typeof instanceof
作用对象 基本类型(number, string, boolean, symbol, bigint, undefined)和引用类型(object, function) 只能判断引用类型(对象、数组、函数等),不能判断原始类型
返回值 一个字符串(如 "number""string""object" 布尔值(true / false)

3. 适用场景

typeof

  • 主要用于基本类型 的判断(除了 null)。
  • 语法简单,性能好,但对对象的区分能力差。
csharp 复制代码
typeof 123;             // "number"
typeof "hello";         // "string"
typeof undefined;       // "undefined"
typeof true;            // "boolean"
typeof Symbol();        // "symbol"
typeof 10n;             // "bigint"

// 对对象的判断很模糊
typeof {};              // "object"
typeof [];              // "object"
typeof null;            // "object"  <-- 历史遗留 bug
typeof function(){};    // "function" (特殊情况)

instanceof

  • 用于判断某个对象是否是某个构造函数的实例(依赖原型链)。
  • 更适合复杂对象类型 判断,比如 ArrayDateRegExp 等。
javascript 复制代码
[] instanceof Array;        // true
[] instanceof Object;       // true (Array 继承自 Object)
new Date() instanceof Date; // true
/abc/ instanceof RegExp;    // true

// 原始类型不行
123 instanceof Number;      // false
"abc" instanceof String;    // false

4. 工作原理差异

  • typeof

    直接读取内部的 [[Type]](对原始类型)或部分特殊规则(函数)。

  • instanceof

    检查 对象的原型链 是否能找到目标构造函数的 prototype 属性:

    java 复制代码
    obj instanceof Constructor
    // 等价于:
    // Constructor.prototype 是否出现在 obj 的原型链上

5. 注意事项

  1. typeof null"object" ------ 这是 JavaScript 设计早期的 bug。

  2. instanceof 在多 iframe / 多 window 环境下可能会失效,因为不同全局环境的构造函数不一样。

  3. 基本类型用 typeof,对象类型用 instanceof 更稳妥。

  4. 判断数组更推荐 Array.isArray(),因为跨环境也安全:

    ini 复制代码
    Array.isArray([]); // true

总结对比表

对比点 typeof instanceof
返回值类型 字符串 布尔值
可判断 基本类型 + 引用类型(精确度有限) 引用类型(对象、数组、函数等)
判断原理 内部类型标签([[Type]] 检查原型链
适用场景 判断原始类型 判断某对象是否属于某构造函数
特殊问题 null 返回 "object" 跨 iframe/window 可能失效

相关推荐
山楂树の1 小时前
图像标注大坑:img图片 + Canvas 叠加标注,同步放大后标注位置偏移、对不齐?详解修复方案及亚像素处理原理
前端·css·学习·canva可画
本山德彪1 小时前
我做了一个拼豆图纸生成器,把照片秒变图纸
前端
DTrader1 小时前
用TS无法实盘量化? - 实盘均线策略
前端·api
进击的夸父1 小时前
vfojs:Vue 超集架构,外壳React灵魂Vue
前端
编程老船长1 小时前
解决不同项目需要不同 Node.js 版本的问题
前端·vue.js
Wect1 小时前
LeetCode 5. 最长回文子串:DP + 中心扩展
前端·算法·typescript
漫游的渔夫1 小时前
前端开发者做 Agent:别写成一次请求,用 5 步受控循环防止 AI 乱跑
前端·人工智能·typescript
薛定猫AI3 小时前
【深度解析】Gemma Chat 本地 AI 编程 Agent:Electron + MLX + 开源模型的离线 Vibe Coding 实战
javascript·人工智能·electron
kyriewen3 小时前
Webpack vs Vite:一个是“老黄牛”,一个是“猎豹”,你选谁?
前端·webpack·vite
打小就很皮...3 小时前
html2canvas + jsPDF 生成 PDF 的踩坑与解决方案总结
前端·pdf