JavaScript instanceof 运算符详解与原型链机制

作者：函数茶馆时间：2026-10-30 08:38:11浏览：389

本文深入解析 JavaScript 中 instanceof 运算符的工作原理，即检测构造函数的 prototype 是否存在于对象的原型链上。文章通过代码示例展示了其常规用法、父类型判断以及内部实现逻辑。同时，重点讨论了在浏览器多窗口环境下，由于全局对象隔离导致的 instanceof 失效问题，并提供了 Array.isArray 和 Object.prototype.toString 作为替代方案，帮助开发者避免常见的类型判断陷阱。

instanceof 语法与参数

语法


object instanceof constructor

参数说明如下： object：需要被检测的目标对象。 constructor：用于匹配的构造函数。

描述： instanceof 运算符的核心作用是检测 constructor.prototype 属性是否存在于参数 object 的原型链中。


// 定义构造函数
function C(){} 
function D(){} 

var o = new C();

// true，因为 Object.getPrototypeOf(o) === C.prototype
o instanceof C; 

// false，因为 D.prototype不在o的原型链上
o instanceof D; 

o instanceof Object; // true,因为Object.prototype.isPrototypeOf(o)返回true
C.prototype instanceof Object // true,同上

C.prototype = {};
var o2 = new C();

o2 instanceof C; // true

o instanceof C; // false,C.prototype指向了一个空对象,这个空对象不在o的原型链上.

D.prototype = new C(); // 继承
var o3 = new D();
o3 instanceof D; // true
o3 instanceof C; // true

原型链变化的影响

需要特别注意，表达式 obj instanceof Foo 返回 true 并不意味着该结果永远保持不变。如果后续修改了 Foo.prototype 属性的值，且新值不再位于 obj 的原型链上，原表达式的结果将变为 false。此外，如果修改了对象 obj 自身的原型链，结果也会发生变化。尽管现代 ES 规范中通常只允许读取对象原型而不允许直接修改，但通过非标准的 __proto__ 属性仍可改变原型链。例如，执行 obj.__proto__ = {} 后，obj instanceof Foo 将返回 false。

多窗口环境下的类型判断陷阱

instanceof 与多全局对象（多个 frame 或多个 window 之间的交互）

在浏览器环境中，脚本可能需要跨窗口进行交互。多个窗口意味着存在多个全局执行环境，每个环境拥有独立的全局对象和内置类型构造函数，这可能导致类型判断出现异常。例如，表达式 [] instanceof window.frames[0].Array 会返回 false，因为 Array.prototype 与 window.frames[0].Array.prototype 并不相等。因此，在跨窗口场景下，建议使用 Array.isArray(myObj) 或 Object.prototype.toString.call(myObj) === "[object Array]" 来准确判断 myObj 是否为数组。

instanceof 基础用法与原型链原理

示例 instanceof 最常见的用法是判断变量 a 是否属于类型 b：


console.log(true instanceof Boolean); // false 
console.log(new Number(1) instanceof Number); // true

instanceof 还可用于判断父类型：


function Father() {}
function Child() {}
Child.prototype = new Father();
var a = new Child();
console.log(a instanceof Child); // true
console.log(a instanceof Father); // true

Child 构造函数继承自 Father，实例 a 由 Child 构造，这毋庸置疑。但为何 a 也是 Father 的实例呢？其实，instanceof 运算符的内部逻辑可以简化为以下代码描述：


function check(a, b) {
 while(a.__proto__) {
  if(a.__proto__ === b.prototype)
   return true;
  a = a.__proto__;
 }
 return false;
}

function Foo() {}
console.log(Object instanceof Object === check(Object, Object)); // true 
console.log(Function instanceof Function === check(Function, Function)); // true 
console.log(Number instanceof Number === check(Number, Number)); // true 
console.log(String instanceof String === check(String, String)); // true 
console.log(Function instanceof Object === check(Function, Object)); // true 
console.log(Foo instanceof Function === check(Foo, Function)); // true 
console.log(Foo instanceof Foo === check(Foo, Foo)); // true

简而言之，如果 a 是 b 的实例，那么 a 必然可以使用 b.prototype 中定义的方法和属性。用代码表示，即 a 的原型链中存在一个与 b.prototype 值相同的对象。因此，只需顺着 a 的原型链逐层查找即可。

内置构造函数与 Function 原型链

另外值得注意的是，String、Number、Boolean 以及 Function 等均为函数，而所有函数均由 Function 构造函数统一生成。因此，它们与任何普通函数一样，可以使用 Function 上的原型属性：


Function.prototype.a = 10;
console.log(String.a); // 10

最后，简要回顾文章开头的两个问题。


 // 为了方便表述，首先区分左侧表达式和右侧表达式
 FunctionL = Function, FunctionR = Function; 
 // 下面根据规范逐步推演
 O = FunctionR.prototype = Function.prototype 
 L = FunctionL.__proto__ = Function.prototype 
 // 第一次判断
 O == L 
 // 返回 true

// 为了方便表述，首先区分左侧表达式和右侧表达式
 StringL = String, StringR = String; 
 // 下面根据规范逐步推演
 O = StringR.prototype = String.prototype 
 L = StringL.__proto__ = Function.prototype 
 // 第一次判断
 O != L
 // 循环再次查找 L 是否还有 __proto__ 
 L = String.prototype.__proto__ = Object.prototype 
 // 第二次判断
 O != L 
 // 再次循环查找 L 是否还有 __proto__ 
 L = String.prototype.__proto__ = null 
 // 第三次判断
 L == null 
 // 返回 false

作者最新文章

JS大数值转字符串出现科学计数法怎么办

2026-11-05 17:09:21

JS split切割后出现空字符串怎么过滤

2026-11-05 16:00:30

在 React 或 Vue 项目中封装使用 JS 节流防抖

2026-11-05 15:27:29

JavaScript中怎么将带小数的字符串转为整数？

2026-11-05 14:32:38

怎么用JavaScript策略模式重构电商促销计算逻辑？

2026-11-05 14:01:09