JavaScript类型判断大揭秘：typeof, instanceof, constructor

欢迎来到JavaScript类型判断讲座！

大家好，欢迎来到今天的讲座！今天我们将一起探讨JavaScript中三种常见的类型判断方法：typeof、instanceof 和 constructor。这三者在日常开发中非常有用，但有时候也会让人感到困惑。别担心，我会用轻松诙谐的语言和一些有趣的代码示例，帮助你彻底搞清楚它们的区别和用法。

1. typeof：JavaScript的“万金油”类型判断

什么是typeof？

typeof 是 JavaScript 中最常用的类型判断操作符之一。它的作用是返回一个字符串，表示操作数的类型。typeof 可以用来判断基本数据类型（如 number、string、boolean 等），也可以用于判断某些引用类型（如 object、function）。

typeof 的常见用法

console.log(typeof 42);          // "number"
console.log(typeof "hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object"  (这是一个历史遗留问题)
console.log(typeof {});          // "object"
console.log(typeof []);          // "object"  (数组也是对象)
console.log(typeof function(){}); // "function"

typeof 的坑：null 和 array

• null 的类型是 object：这是 JavaScript 的一个历史遗留问题。在早期版本中，null 被设计为指向对象的空引用，因此 typeof null 返回 "object"。虽然这看起来有点奇怪，但你可以通过 === null 来明确判断是否为 null。

• 数组也是 object：typeof [] 返回 "object"，因为数组在 JavaScript 中是对象的一种。如果你想要明确判断一个值是否为数组，可以使用 Array.isArray()。

表格：typeof 的返回值

值	typeof 返回值
42	"number"
"hello"	"string"
true	"boolean"
undefined	"undefined"
null	"object"
{}	"object"
[]	"object"
function() {}	"function"

2. instanceof：类的“血统鉴定”

什么是 instanceof？

instanceof 是一个二元操作符，用于检查一个对象是否是某个构造函数的实例。它会沿着对象的原型链查找，直到找到与构造函数的原型匹配的对象，或者到达原型链的末端。

instanceof 的常见用法

class Animal {}
class Dog extends Animal {}

const dog = new Dog();
console.log(dog instanceof Dog);      // true
console.log(dog instanceof Animal);   // true
console.log(dog instanceof Object);   // true

在这个例子中，dog 是 Dog 的实例，同时也是 Animal 和 Object 的实例，因为它继承了 Animal，而 Animal 又继承了 Object。

instanceof 的局限性

• 跨窗口或框架时的问题：如果你在一个页面中有多个 iframe 或窗口，instanceof 可能无法正确判断来自不同窗口的对象。例如，如果你在主窗口中创建了一个 Array，而在子窗口中也有一个 Array，那么主窗口中的 Array 实例在子窗口中可能不会被认为是 Array 的实例。

• 不能判断基本类型：instanceof 不能用于判断基本类型（如 number、string、boolean）。对于这些类型，你应该使用 typeof。

表格：instanceof 的应用场景

构造函数	对象类型	instanceof 返回值
Array	[1, 2, 3]	true
Function	function() {}	true
Object	{}	true
Date	new Date()	true
Error	new Error()	true

3. constructor：对象的“出生证明”

什么是 constructor？

每个对象都有一个 constructor 属性，它指向创建该对象的构造函数。通过 constructor，你可以知道对象是由哪个构造函数创建的。constructor 本质上是一个指向对象原型的属性，因此它可以帮助我们了解对象的“出身”。

constructor 的常见用法

const arr = [1, 2, 3];
console.log(arr.constructor === Array); // true

const obj = {};
console.log(obj.constructor === Object); // true

function Person(name) {
  this.name = name;
}

const person = new Person("Alice");
console.log(person.constructor === Person); // true

constructor 的局限性

• constructor 可以被修改：constructor 属性并不是不可变的，它可以被重新赋值。这意味着你不能完全依赖 constructor 来判断对象的类型。

  const arr = [1, 2, 3];
  arr.constructor = String; // 修改了 constructor
  console.log(arr.constructor === Array); // false

• constructor 不能区分继承关系：constructor 只能告诉你对象是由哪个构造函数直接创建的，而不能告诉你它是否继承自其他构造函数。例如，Dog 的 constructor 是 Dog，而不是 Animal。

表格：constructor 的应用场景

对象类型	constructor 指向的构造函数
[1, 2, 3]	Array
{}	Object
new Date()	Date
new Error()	Error
new Person()	Person

4. 三种类型判断方法的对比

现在我们已经了解了 typeof、instanceof 和 constructor 的各自特点，接下来我们来对比一下它们的适用场景：

方法	适用场景	优点	缺点
typeof	判断基本类型和部分引用类型（如 function）	简单易用，适用于大多数情况	无法准确判断 null 和 array
instanceof	判断对象是否是某个类的实例	可以处理继承关系，适用于复杂对象	不能判断基本类型，跨窗口时可能失效
constructor	获取对象的构造函数	可以明确知道对象的构造函数	可以被修改，不能区分继承关系

5. 结合使用：最佳实践

在实际开发中，通常我们会结合使用这三种方法来确保类型判断的准确性。以下是一些常见的组合方式：

• 判断数组：由于 typeof [] 返回 "object"，我们可以使用 Array.isArray() 来明确判断一个值是否为数组。

  function isArray(value) {
  return Array.isArray(value);
  }

• 判断 null：为了避免 typeof null 返回 "object" 的问题，我们可以显式地检查 value === null。

  function isNull(value) {
  return value === null;
  }

• 判断对象类型：当我们需要判断一个对象是否是某个类的实例时，instanceof 是最合适的选择。如果还需要进一步确认对象的构造函数，可以使用 constructor。

  function isInstanceOf(value, constructor) {
  return value instanceof constructor;
  }
  
  function getConstructor(value) {
  return value.constructor;
  }

总结

好了，今天的讲座就到这里啦！我们详细探讨了 typeof、instanceof 和 constructor 这三种类型的判断方法，了解了它们的优缺点以及适用场景。希望你能根据不同的需求选择最合适的方法，写出更加健壮的代码。

如果你还有任何疑问，欢迎在评论区留言，我们下次再见！ ?

---

参考文献：MDN Web Docs, ECMAScript Specification