JavaScript instanceof 怎么用

在前端开发里，你肯定遇过要判断一个东西是不是“某一类”的情况——比如拿到一个数据，想知道它是不是数组，或者是不是自己写的某个自定义对象。这时候，instanceof 就能派上用场，但很多新手刚接触它时，总会搞混它和普通判断的区别。

先搞懂`instanceof`的核心逻辑

instanceof 不是用来检查“值是不是等于某个东西”，而是用来检查“一个对象是不是某个构造函数的‘后代实例’”。打个比方，你可以把构造函数理解成“图纸”，用它做出来的对象就是“成品”——instanceof 就是检查这个成品，是不是按照某张特定图纸做出来的。

举个最生活化的例子：假设“构造函数”是“苹果工厂”，它做出来的成品是“红富士苹果”。那你拿一个红富士苹果，问红富士苹果 instanceof 苹果工厂，结果就会是true；如果拿一个橘子，问同样的问题，结果就是false——它不是用苹果工厂做的。

怎么用`instanceof`做常用判断

日常开发里，instanceof 最常用的场景是判断数据类型，尤其是普通typeof搞不定的引用类型。

比如typeof判断数组时，会返回object，你没法直接知道它是不是数组，这时候instanceof就好用：

`javascript

// 定义一个数组

const fruitList = ['苹果', '香蕉', '橘子'];

// 判断是不是数组

console.log(fruitList instanceof Array); // 输出true

`

再比如判断自定义对象，假设你写了一个“猫”的构造函数，用来生成猫的实例：

`javascript

// 自定义构造函数

function Cat(name) {

this.name = name;

}

// 生成一只猫的实例

const myCat = new Cat('咪咪');

// 判断是不是Cat类的实例

console.log(myCat instanceof Cat); // 输出true

`

如果拿这个猫的实例去判断instanceof Dog，结果肯定是false——它是用猫的图纸做的，不是狗的。

用的时候要注意2个坑

instanceof虽然方便，但有两个很容易踩的陷阱，得特别留意。

第一个坑：跨窗口或跨框架的对象。比如你在浏览器里开了两个标签页（相当于两个独立窗口），其中一个标签页里的数组，传到另一个标签页里，这时候用instanceof Array判断会返回false——因为两个窗口的Array构造函数不是同一个，instanceof不认不同上下文里的“同一张图纸”。

第二个坑：原始类型用不了instanceof。instanceof只能判断对象类型，要是你拿数字、字符串这种原始值去用，会直接返回false：

`javascript

const num = 123;

console.log(num instanceof Number); // 输出false

`

因为原始值不是“用构造函数做出来的实例”，它本身就是基础类型，不是对象。如果真要判断原始类型，用typeof更合适。

和`typeof`的区别别搞混

很多新手会把instanceof和typeof搞混，其实它们分工明确：typeof是查“值的基本类型”，比如typeof 123返回number，typeof 'abc'返回string，但它分不清数组、普通对象这些引用类型；instanceof是查“是不是某个构造函数的实例”，专门用来区分引用类型里的不同“类别”。

比如你想判断一个数据是不是数组，typeof给不了准确结果，就得用instanceof Array；但要是判断一个数是不是数字，用typeof就够了，没必要用instanceof Number。

搞懂这些，你就能避开instanceof的坑，在需要判断对象所属类别的时候，用它写出更准确的代码。