JS中instanceof、constructor与Object.prototype.toString判断数组的区别

一、三种判断方式的基本用法与工作原理

在日常开发中，数组虽然属于对象（typeof [] === 'object'），但由于其具有特殊的长度管理、索引访问与原型方法，往往需要与普通键值对象严格区分。下面分别呈现这三种方式的具体语法与其底层的运作机制。

1. arr instanceof Array：基于原型链的逐级追溯

instanceof 运算符的本质是检测右侧构造函数的 prototype 属性是否存在于左侧实例的原型链上。代码写法直观：

const list = [1, 2, 3];
console.log(list instanceof Array); // 输出：true

在执行时，JavaScript 引擎会获取 list.__proto__，若其等于 Array.prototype 则返回 true；若不相等，则继续沿着原型链向上获取 list.__proto__.__proto__ 直到顶层 Object.prototype。只要在链条上匹配成功就判定为真。

2. arr.constructor === Array：基于构造器引用的直接比对

每一个由构造函数创建的对象，其实例或所属的原型上都默认包含一个 constructor 属性，指向创建该实例的构造函数本身：

const list = [1, 2, 3];
console.log(list.constructor === Array); // 输出：true

这里的 list.constructor 实际上是通过原型链访问到了 Array.prototype.constructor。它是一种全等比较（===），仅当对象的构造器函数指针与当前作用域下的 Array 完全一致时才成立。

3. Object.prototype.toString.call(arr)：借调顶层内置类型标记

由于数组自身重写了 toString 方法（数组调用 toString() 会将元素用逗号拼接成字符串），若要获取底层类型，必须借用 Object.prototype 原始的 toString 方法：

const list = [1, 2, 3];
console.log(Object.prototype.toString.call(list) === '[object Array]'); // 输出：true

根据 ECMAScript 规范，当向 Object.prototype.toString 传入上下文对象并调用时，引擎会检测该对象的内部规格属性（早期规范称为 [[Class]]，现代规范结合内置类型与 Symbol.toStringTag）。对于原生的数组对象，它始终返回固定的格式字符串 "[object Array]"。

二、核心区别一：跨 Realm（多 iframe / 窗口）环境下的失效机制

在前端单页面或复杂宿主环境中，页面可能嵌入 <iframe>、使用弹窗 window.open() 或在 Node.js 中使用 vm 沙箱。每一个 iframe 拥有自己完全独立的全局执行上下文环境，在规范中被称为一个“Realm”。

跨 Realm 环境是 instanceof 和 constructor 最致命的盲区。

1. 跨窗口时内存原型的物理隔离

假设主窗口通过 DOM 获取了子 iframe 中创建的数组，两者的内存模型是完全割裂的：

• 主窗口拥有独立的 window.Array 及其原型 window.Array.prototype；
• 子窗口同样拥有独立的 iframe.contentWindow.Array 及其原型 iframe.contentWindow.Array.prototype；
• 两个环境中的 Array 位于不同的内存地址，因此 window.Array !== iframe.contentWindow.Array。

// 模拟跨 iframe 数组传递场景
const iframe = document.createElement('iframe');
document.body.appendChild(iframe);
const iframeArr = iframe.contentWindow.Array(1, 2, 3);

// 1. instanceof 判定失败
console.log(iframeArr instanceof Array); // false (主窗口 Array.prototype 不在其原型链上)

// 2. constructor 比较失败
console.log(iframeArr.constructor === Array); // false (构造函数属于子窗口的 Array)

// 3. Object.prototype.toString 仍然有效
console.log(Object.prototype.toString.call(iframeArr) === '[object Array]'); // true

因为子窗口数组的 __proto__ 指向的是子窗口的 Array.prototype，当在主窗口执行 iframeArr instanceof Array 时，引擎在主窗口的原型链查找中永远匹配不到 window.Array.prototype，只能返回 false。同理，iframeArr.constructor 引用的是子窗口的构造函数，与主窗口的 Array 并非同一个引用。

而 Object.prototype.toString 并不依赖具体的构造函数内存引用，只要目标对象符合规范中的原生数组规范定义，无论它在哪个 iframe 中生成，其内部标签始终是 "Array"，因此可以安全穿透 Realm 隔离。

三、核心区别二：面对原型篡改与属性覆盖的抗性

JavaScript 作为动态弱类型语言，对象的属性和原型链在运行时是允许被动态修改的。在多人协作的大型项目、第三方 SDK 注入或使用了某些polyfill/代理插件时，对象的属性往往存在被篡改的风险。

1. constructor 的极度脆弱性

constructor 只是一个可写、可配置的常规属性。一旦在实例自身定义同名属性，或者在原型重写时漏掉了该属性，判断逻辑就会直接崩溃：

// 实例自身属性覆盖
const list = [1, 2, 3];
list.constructor = Object;
console.log(list.constructor === Array); // false！被实例属性遮蔽

// 重新指定原型导致的丢失
function CustomList() {}
CustomList.prototype = []; // 继承数组
const customItem = new CustomList();
console.log(customItem.constructor === Array); // false！指向 Object 或丢失

2. instanceof 的受控风险

instanceof 的结果依赖原型链。如果通过 Object.setPrototypeOf 改变对象的原型，或者通过 ES6 的 Symbol.hasInstance 改写匹配规则，instanceof 的判定结果就会失真：

const list = [1, 2, 3];
// 人为修改原型链
Object.setPrototypeOf(list, Object.prototype);
console.log(list instanceof Array); // false！原型链断开

// 利用 Symbol.hasInstance 自定义逻辑
class FakeArray {
  static [Symbol.hasInstance](instance) {
    return true; // 强行让任何对象匹配
  }
}
console.log({} instanceof FakeArray); // true

3. Object.prototype.toString 的防御表现

Object.prototype.toString.call(target) 直接从根原型 Object.prototype 借调方法，它不读取 target.constructor，也不顺着原型链查找特定函数引用。即使数组的原型链被部分修改，只要底层依然是原生 Array 对象，它就能稳定输出 "[object Array]"。

四、核心区别三：面对空值与非对象的容错表现

在健壮性要求较高的工具函数或通用库中，传入参数可能为 null、undefined、数字或类数组对象。三种方式在应对异常入参时的表现差异显著。

由上表可见，constructor 最大的缺陷之一是在遇到 null 或 undefined 时，访问属性会直接抛出运行期错误（TypeError: Cannot read properties of null），这要求调用方在使用前必须额外增加非空保护（例如 arr && arr.constructor === Array）。而其余两种方式均具备自然的空值防御能力。

五、全维度对比总结与现代最佳实践

为了在实际开发中做出最合适的选择，我们将这三种经典方法与现代 ES5+ 规范中正式标准化的 Array.isArray() 进行全维度综合对比。

选用建议与现代最佳实践

1. 现代业务代码首选：Array.isArray()
   自 ECMAScript 5.1 引入后，Array.isArray(val) 已经成为行业标准。它由 JavaScript 引擎原生内置实现，不仅兼具 Object.prototype.toString 的跨 iframe 穿透能力与极高的防篡改抗性，而且语法极简、执行效率最高，能够精准识别原生数组并彻底杜绝类数组对象的干扰。
2. 构建全能类型判断工具库：Object.prototype.toString.call()
   如果需要封装一个统一判断多种数据类型（如判断 '[object Date]'、'[object RegExp]'、'[object Map]' 等）的通用工具函数，Object.prototype.toString.call() 是最经典的通用基石。
3. 日常代码尽量避免单独使用 constructor 与 instanceof 校验数组
   constructor 属性易受修改且遇到空值易报错；instanceof 无法应对多窗口交互场景。除极少数限定在单一执行栈内部的特殊面向对象场景外，不再推荐用作通用的数组类型检查手段。