---

博客主页： [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: 前端

---

---

---

💯前言

• JavaScript 是一种灵活且动态的编程语言，其设计中包含了诸多独特之处。这些特性为开发者提供了极大的自由度，但也伴随着某些复杂性，尤其是在类型系统的处理上。typeof 操作符便是其中一个常见的例子，它的表现往往让新手乃至经验丰富的开发者感到困惑。在本文中，我们将系统性地探讨typeof操作符的行为，特别是在处理数组、对象和null时的表现，并揭示这些行为背后的深层原因，以及如何在实践中应对这些情况。为了全面理解这些问题，我们将深入分析这些类型的历史背景，并提供实践中可以应用的一些实用技巧。
  JavaScript

---

---

💯typeof 操作符的基本使用

在 JavaScript 中，typeof 是一个用于检测变量类型的操作符。它返回一个字符串，表示变量的数据类型。最常见的类型包括：

• "number"
• "string"
• "boolean"
• "object"
• "undefined"
• "function"

在日常开发过程中，typeof 操作符通常是一个非常方便的工具，用于快速判断变量的类型。然而，JavaScript 中的一些类型判断行为可能会让人感到困惑，特别是在涉及数组、普通对象以及 null 的时候。这种困惑源于 JavaScript 语言设计中的某些妥协和历史遗留问题，它们塑造了当前语言中某些行为的独特性和不一致性。

---

💯为什么 typeof 数组是 “object”？

首先让我们来讨论一个很常见的例子，即对数组的类型判断：

let arr = [1, 2, 3];
console.log(typeof arr); // 输出 "object"

在 JavaScript 中，数组实际上是对象的一种特殊类型。虽然数组和普通对象有显著的不同，例如数组具有 length 属性，提供了诸如 push、pop 等特殊的方法，并且其结构通常是有序的，但在底层，JavaScript 实现数组时仍将其视为对象。因此，typeof 操作符会返回 "object"，这可能与直觉不符。

为了更加精确地判断一个变量是否是数组，我们可以使用 Array.isArray() 方法：

console.log(Array.isArray(arr)); // 输出 true

Array.isArray() 是判断数组的最佳方式，因为它能够准确地辨别一个值是否为数组，而不依赖于 typeof 的笼统返回值。之所以设计这个方法，是因为开发者通常希望将数组与普通对象区别开来，而 typeof 由于其固有的局限性无法做到这一点。

---

💯为什么 typeof {} 返回 “object”？

普通对象是 JavaScript 中的基本构造块之一。它们通过字面量 {} 来创建，可以用来存储键值对：

let obj = {};
console.log(typeof obj); // 输出 "object"

对于字面量 {}，typeof 返回 "object" 是符合直觉的，因为 {} 代表的是 JavaScript 中典型的对象类型。对象是 JavaScript 中的一种复合数据类型，其主要功能是表示键值对的集合，且允许动态地添加或移除属性。理解对象在 JavaScript 中的表现形式以及如何被 typeof 识别，对掌握这一语言至关重要，尤其是对象几乎参与了所有复杂数据结构的构建。

---

💯为什么 typeof null 也是 “object”？

接下来，我们来讨论一个颇具迷惑性的问题：

console.log(typeof null); // 输出 "object"

null 表示的是“空值”或“空引用”，通常用于指示某个对象或值为空。在绝大多数编程语言中，我们可能期望 null 是一种单独的数据类型。然而，在 JavaScript 中，typeof null 返回 "object"，这显然不符合直觉，也让开发者在编写代码时容易出现困惑。

---

💯typeof null 返回 “object” 的历史原因

typeof null 返回 "object" 是 JavaScript 语言中的一个历史遗留问题。这种行为可以追溯到 JavaScript 最早的实现。在初期的实现中，JavaScript 采用了一种称为标签存储的方式来表示不同的数据类型。对象的标签值为 0，而 null 被视为对象的一个特殊标志，也因此被分配了与对象相同的标签值。这一实现细节导致了 typeof null 返回 "object" 的现象。

尽管这一实现方式在现代 JavaScript 中已经显得过时且不合逻辑，但由于语言的向后兼容性，无法对其进行根本性的更改，因为这种变动可能会导致大量现存代码失效。因此，这个问题一直被保留下来，成为开发者在使用 JavaScript 时必须了解的一个特性。
为了避免这种困惑，开发者在判断一个值是否为 null 时，通常使用严格的相等比较运算符：

let value = null;
console.log(value === null); // 输出 true

通过这种方式，可以确保 value 是 null，而不会被误判为其他类型的对象。这种做法不仅直观，而且可以减少由于误判类型带来的潜在错误，尤其是在需要处理复杂对象和空引用时显得尤为重要。

---

💯其它 typeof 的怪异行为

JavaScript 中的 typeof 操作符还存在一些其他特殊情况。例如，当 typeof 用于函数时，它会返回 "function"，这一点相对合理，因为函数在 JavaScript 中是一等公民，既可以作为变量被赋值，也可以作为参数传递给其他函数，甚至可以作为返回值。

function example() {}
console.log(typeof example); // 输出 "function"

虽然函数在底层也是对象的一种特殊类型，但 typeof 将它们单独识别为 "function"，使得它们与普通对象区分开来，从而为开发者提供了一种快速判断的方式。

另一方面，typeof undefined 返回 "undefined"，这相对简单直观。它表示一个变量尚未被赋值，这种行为在变量初始化和检查时非常有用，能够快速地判断某个变量是否处于未定义状态。

---

💯更好的类型判断方式

由于 typeof 存在一些不直观的行为，因此在复杂应用中，我们需要更加可靠的方式来进行类型判断。以下是一些常用的类型判断方式：

1. Array.isArray() 用于数组

   • Array.isArray(value) 是判断数组的最佳方式，因为它专门用于判断数组，无论数据结构多复杂都能准确识别。

2. instanceof 操作符

   • instanceof 可以用来判断某个值是否是某个构造函数的实例。这种方法适用于多种不同类型的数据结构，尤其是在涉及自定义类和继承时。

   console.log([] instanceof Array); // 输出 true
   console.log({} instanceof Object); // 输出 true
   

   

3. Object.prototype.toString.call()

   • Object.prototype.toString.call(value) 是一种非常强大的类型判断方法，能够精确返回值的类型信息：

   console.log(Object.prototype.toString.call([])); // 输出 "[object Array]"
   console.log(Object.prototype.toString.call({})); // 输出 "[object Object]"
   console.log(Object.prototype.toString.call(null)); // 输出 "[object Null]"
   

   

   这种方式能够提供更加详细的类型信息，尤其是在处理复杂和不确定的数据时非常有用。它被视为所有类型判断方法中最通用的方式，特别适合于需要对输入进行全面验证的应用场景。

---

💯最佳实践与建议

1. 避免直接用 typeof 判断数组和 null

   • 对于数组，应使用 Array.isArray() 进行判断。
   • 对于 null，直接使用 === null 进行判断。

2. 理解并适应历史遗留问题

   • 理解 JavaScript 中 typeof 的行为历史原因，有助于避免编码中的常见陷阱。了解 typeof null 返回 "object" 是一个历史遗留问题，可以帮助你更快地在调试过程中发现问题。

3. 结合使用多种类型判断方式

   • 在复杂应用中，单靠 typeof 通常不足以满足所有需求。结合使用 instanceof 和 Object.prototype.toString.call() 等方法，可以实现更加精确和可靠的类型判断。这些方法在大型应用程序中尤为重要，特别是在处理多样化的数据时。

4. 团队开发中的一致性

   • 在团队开发中，保持类型检查方法的一致性非常重要。例如，统一使用 Object.prototype.toString.call() 作为标准类型检查方式，可以确保所有团队成员编写的代码在风格和行为上保持一致，从而减少不必要的错误和维护成本。

---

💯小结

• 
  JavaScript 是一种极为灵活的语言，其设计之初为了实现简便易用做出了许多权衡，但也因此引入了一些复杂性，特别是在类型系统上。其中，typeof 操作符的行为便是一个经典的例子。通过深入理解typeof在不同场景下的表现以及其背后的历史原因，开发者可以有效避免一些常见的陷阱，并编写出更加健壮和可靠的代码。
  尽管 JavaScript 的某些设计决策显得不那么严谨，但其灵活性和广泛的生态系统使得它在现代 Web 应用开发中占据了重要地位。理解并掌握这些细微的特性不仅能够帮助开发者编写更具稳定性的代码，还能在调试和代码审查过程中显著提高效率。

---

---