JS中typeof、instanceof与Array.isArray检测数组的区别

作者：青柠

时间：2026-11-02

深入解析JavaScript中typeof、instanceof与Array.isArray检测数组的本质区别，详细剖析底层原理、跨iframe作用域隔离缺陷、伪数组处理及最佳实践。

文章目录

核心结论先行：在 JavaScript 中检测一个值是否为数组，唯一标准且始终可靠的方法是 Array.isArray()。typeof [] 永远只能返回 "object"，无法将数组从普通对象中区分开；arr instanceof Array 依赖原型链回溯，在单一执行环境中有效，但面对跨 <iframe>、多 window 或隔离沙箱等包含多个全局上下文（Realm）的场景时，会由于原型对象不共享而直接误判为 false。

JS中typeof、instanceof与Array.isArray检测数组的区别

JavaScript 数组类型检测方案概览及核心表现对比

一、为什么 typeof 无法检测数组？

初学者在接触 JavaScript 类型检测时，往往最先学习 typeof 操作符。然而，如果你尝试对一个数组执行 typeof []，得到的结果永远是字符串 "object"，这并不能为你提供任何关于“这是不是数组”的有效判断。

const list = [1, 2, 3];
const obj = { name: "Alice" };
const date = new Date();

console.log(typeof list); // 输出: "object"
console.log(typeof obj);  // 输出: "object"
console.log(typeof date); // 输出: "object"
console.log(typeof null); // 输出: "object"（著名的历史遗留缺陷）

之所以出现这个现象，源于 JavaScript 引擎底层的设计机制。在早期实现（例如 Brendan Eich 设计的初代 JS 引擎以及沿用至今的底层规范）中，变量的值以结构体形式存储在内存中，前几位二进制位用于表示“类型标签”（Type Tag）。其中，所有引用类型的对象，其类型标签均为 000。

当 typeof 运算符工作时，它仅仅读取该类型标签。只要标签是 000，除具备内部 [[Call]] 方法的函数会被单独标识为 "function" 之外，其余所有引用类型——包括普通对象 {}、数组 []、日期 Date、正则 RegExp 乃至 null——统统返回 "object"。

图 1：typeof 底层类型标签判定机制与对象类型混淆原理

注意事项：typeof 的设计定位是区分 JavaScript 中的基本数据类型（如 string、number、boolean、symbol、undefined、bigint）以及可调用函数（function）。它从设计之初就无法承担细分复杂引用类型的任务，切勿用它来做任何数组校验。

二、instanceof Array 的原型链检测原理与“跨 Realm”陷阱

既然 typeof 无法满足需求，很多开发者会转向基于原型链的 instanceof 操作符。例如编写 arr instanceof Array。这在大多数常规单页面逻辑中通常能返回预期的 true。

1. instanceof 的底层运作逻辑

value instanceof Constructor 的运作本质是：检查右操作数构造函数的 prototype 属性，是否存在于左操作数对象的原型链（即通过 __proto__ 逐层向上查找的链条）上。

const arr = ["a", "b"];

// 本质检查的是：Object.getPrototypeOf(arr) === Array.prototype
console.log(arr instanceof Array); // 输出: true
console.log({} instanceof Array);  // 输出: false

对于单一页面、单一全局环境而言，只要原型链没有被故意破坏，instanceof Array 确实能够区分数组和普通对象。

2. 致命缺陷：多 Realm（跨 iframe / 窗口）隔离失效

然而，现代 Web 应用中常常涉及 <iframe>、弹出的新窗口（window.open）、或者服务端环境下的多虚拟机沙箱（如 Node.js 的 vm 模块）。在这些场景中，每个页面或沙箱都拥有独立完整的全局执行环境（规范中称为 Realm）。

这意味着主页面拥有自己的全局对象 window 和构造函数 Array，而内嵌的 <iframe> 拥有它专属的 contentWindow.Array。这两个构造函数的内存地址不同，其原型对象 Array.prototype 也完全不相等！

// 场景示例：从 iframe 中接收一个数组
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);

const iframeArray = iframe.contentWindow.Array(1, 2, 3);

// 在主页面中判定
console.log(iframeArray instanceof Array); 
// 结果居然是 false！
// 因为 iframeArray 的原型是 iframe.contentWindow.Array.prototype
// 它与当前页面的 Array.prototype 并不相等！

图 2：instanceof 原型链检索机制与跨 Realm (iframe) 隔离失效原理

不仅如此，如果对象的原型链被手动修改（例如使用了 Object.setPrototypeOf()），instanceof 的检测结果也会被轻易颠覆。因此，instanceof 并不能作为严格通用的类型检验工具。

三、Array.isArray() 的原理与终极优势

为了彻底解决跨 Realm 数组检测的难题，ECMAScript 5 (ES5) 规范正式引入了 Array.isArray() 静态方法。

1. 规范级判定：内部槽与 Array Exotic Object

根据 ECMAScript 规范定义，Array.isArray(argument) 会执行底层的抽象操作 IsArray(argument)。该操作直接检查目标对象是否具备规范定义的数组异质对象（Array exotic object）特征（或旧规范中的内部 [[Class]] 属性为 "Array"）。

这种底层特性的检查是语言运行时级别的，能够完全无视对象来源于哪一个全局执行上下文。无论数组是在当前 window、父页面、子 iframe 还是跨域上下文（在同源通信传递数据时）创建，Array.isArray() 都能准确返回 true。

// 跨 Realm 数组检测
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const iframeList = iframe.contentWindow.Array(1, 2, 3);

console.log(Array.isArray(iframeList)); // 准确输出: true！
console.log(Array.isArray([]));         // 输出: true
console.log(Array.isArray({}));         // 输出: false

2. 对“类数组（Array-like）”的严格防御

日常开发中，我们常常遇到各种“看起来像数组”的结构：函数的 arguments 变量、DOM 节点列表 NodeList（例如 document.querySelectorAll('div')），或者自定义的带 length 属性的对象：

const fakeArray = { 0: 'first', 1: 'second', length: 2 };

console.log(Array.isArray(fakeArray)); // 输出: false

对于伪数组，Array.isArray() 坚决返回 false。这正是防御性编程所需要的行为：伪数组并没有继承 Array.prototype 上的核心方法（如 .push()、.filter()、.map()），若将其误判为数组，后续调用方法时就会直接抛出 TypeError: ... is not a function 运行时崩溃。

图 3：JavaScript 数组与类数组检测及处理决策流程

四、历史方案补充：Object.prototype.toString.call()

在 ES5 普及之前，前端先驱们为了解决跨 iframe 检测数组的痛点，普遍采用如下经典方案：

function isArrayLegacy(value) {
  return Object.prototype.toString.call(value) === '[object Array]';
}

该方法借用了 Object.prototype.toString 会读取对象内部 [[Class]] 标签的特性，输出 "[object Array]"。这也是 Array.isArray() 的规范化前身。在当前所有现代浏览器和 Node.js 环境中，我们已经无需编写繁琐的 toString.call，直接使用 Array.isArray() 即可，后者在执行性能、语义清晰度和规范支持上均更为优越。

五、全维度综合对比与选型指南

为了让不同场景下的技术选型更加清晰，我们将 typeof、instanceof 以及 Array.isArray 的关键差异整理如下：

对比维度	typeof []	arr instanceof Array	Array.isArray(arr)
返回值	固定返回 `"object"`	布尔值 `true / false`	布尔值 `true / false`
核心检测机制	变量内存结构类型标记位	原型链比对原型对象引用	底层原生内置 IsArray 校验
能否区分数组与普通对象	否（普通对象也是 `"object"`）	能（单环境下有效）	能（严格区分）
跨 Realm (iframe) 可靠性	无有效意义	失效（不同上下文原型不相等）	完全可靠（规范原生穿透）
识别类数组 (arguments/NodeList)	统一归为 `"object"`	识别为 `false`	识别为 `false`
原型链篡改防御性	不受影响（依然是 object）	脆弱（修改 `__proto__` 会失真）	强健（依据底层对象真实类型）
推荐使用场景	仅用于检测基础数据类型	用于检测自定义类实例原型关系	数组检测唯一推荐标准

图 4：typeof、instanceof 与 Array.isArray 关键指标全维度对比矩阵

六、开发中的最佳实践

结合上述分析，在实际业务与公共库开发中，请遵循以下准则：

判定数组，始终且仅使用 Array.isArray(value)：无论你的代码运行在浏览器端还是 Node.js 环境，Array.isArray 都是语义最清晰、执行最高效、容错性最好的标准 API。
切勿使用 typeof 判断复杂数据结构：除了判断 undefined、string、number、boolean、symbol、bigint 及 function 外，任何试图用 typeof 区分对象子类型的做法都是错误的。
需要兼容类数组时显式转换：如果你的函数既要接收真实数组，又希望兼容 arguments 或 NodeList 等类数组结构，应配合 Array.from() 或展开语法 [...value] 先完成转换，而不是放宽校验逻辑。