JavaScript中的instanceof：你的代码真的认识'自家孩子'吗？

大家好，我是江城开朗的豌豆，一名拥有6年以上前端开发经验的工程师。我精通HTML、CSS、JavaScript等基础前端技术，并深入掌握Vue、React、Uniapp、Flutter等主流框架，能够高效解决各类前端开发问题。在我的技术栈中，除了常见的前端开发技术，我还擅长3D开发，熟练使用Three.js进行3D图形绘制，并在虚拟现实与数字孪生技术上积累了丰富的经验，特别是在虚幻引擎开发方面，有着深入的理解和实践。

我一直认为技术的不断探索和实践是进步的源泉，近年来，我深入研究大数据算法的应用与发展，尤其在数据可视化和交互体验方面，取得了显著的成果。我也注重与团队的合作，能够有效地推动项目的进展和优化开发流程。现在，我担任全栈工程师，拥有CSDN博客专家认证及阿里云专家博主称号，希望通过分享我的技术心得与经验，帮助更多人提升自己的技术水平，成为更优秀的开发者。

技术qq交流群：906392632

大家好，我是小杨，一个做了6年前端的老司机。今天咱们来聊一个JavaScript中特别实用的操作符------instanceof。这个操作符就像是你代码里的"亲子鉴定师"，能帮你确认一个对象是不是某个"家族"的成员。

一、instanceof是干什么的？

简单来说，instanceof就是用来检查一个对象是不是某个构造函数的实例。就像这样：

javascript 复制代码

function Car(brand) {
  this.brand = brand;
}

const 我的车 = new Car('宝马');

console.log(我的车 instanceof Car); // true
console.log(我的车 instanceof Object); // true
console.log(我的车 instanceof Array); // false

你看，instanceof很清楚地告诉我们：我的车是Car的实例，也是Object的实例（因为所有对象最终都继承自Object），但不是Array的实例。

二、instanceof的工作原理

instanceof检查的是对象的原型链。它会沿着对象的__proto__链向上查找，看看能不能找到构造函数的prototype。

举个例子：

javascript 复制代码

function Animal() {}
function Dog() {}

// 设置原型继承
Dog.prototype = Object.create(Animal.prototype);

const 我的宠物 = new Dog();

console.log(我的宠物 instanceof Dog); // true
console.log(我的宠物 instanceof Animal); // true

这里，我的宠物是Dog的实例，同时因为Dog继承自Animal，所以它也是Animal的实例。

三、实际开发中的妙用

我在项目中经常用instanceof来做类型检查，特别是在处理多种可能的数据类型时。

比如，处理API返回的数据：

javascript 复制代码

class ApiResponse {
  constructor(data) {
    this.data = data;
    this.timestamp = new Date();
  }
}

function handleResponse(response) {
  if (response instanceof ApiResponse) {
    console.log('收到有效响应:', response.data);
    // 处理数据...
  } else {
    console.error('无效的响应格式');
    // 错误处理...
  }
}

四、一些有趣的边界情况

基本类型检测：

javascript 复制代码

console.log('hello' instanceof String); // false
console.log(new String('hello') instanceof String); // true

因为基本类型不是对象，所以检测结果为false。

跨窗口/iframe问题 ：

如果在iframe中创建的实例拿到父窗口来检测，会返回false，因为它们的构造函数不是同一个。

五、instanceof vs typeof

很多新手容易混淆instanceof和typeof，它们的区别是：

typeof返回基本类型的字符串描述
instanceof检查对象与构造函数的关系

javascript 复制代码

const str = '我是字符串';
const objStr = new String('我是字符串对象');

console.log(typeof str); // "string"
console.log(typeof objStr); // "object"
console.log(str instanceof String); // false
console.log(objStr instanceof String); // true

六、手写一个简易instanceof

理解原理最好的方式就是自己实现一个。来看看我的实现：

javascript 复制代码

function 我的Instanceof(obj, constructor) {
  // 基本类型直接返回false
  if (obj === null || typeof obj !== 'object') return false;
  
  let proto = Object.getPrototypeOf(obj);
  while (proto) {
    if (proto === constructor.prototype) return true;
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

// 测试
function Person() {}
const 我 = new Person();
console.log(我的Instanceof(我, Person)); // true
console.log(我的Instanceof(我, Object)); // true
console.log(我的Instanceof(我, Array)); // false

七、注意事项

如果修改了构造函数的prototype，instanceof的结果可能会变化：

javascript 复制代码

function Foo() {}
const foo = new Foo();

console.log(foo instanceof Foo); // true

Foo.prototype = {}; // 修改prototype
console.log(foo instanceof Foo); // false

在ES6的class继承中，instanceof行为与构造函数一致：

javascript 复制代码

class Parent {}
class Child extends Parent {}

const child = new Child();
console.log(child instanceof Child); // true
console.log(child instanceof Parent); // true

八、总结

instanceof是JavaScript中非常实用的类型检查工具，它能：

检查对象的构造函数
沿着原型链向上查找
帮助我们编写更健壮的类型检查逻辑

记住它的工作原理，在实际开发中灵活运用，可以让你的代码更加可靠。如果遇到什么有趣的问题，欢迎在评论区和我交流！