手写类型判断：面试中的技术底气与实战解法

当面试官抛出“手写一个类型判断”的题目时，我的第一反应是狂喜——这不仅是考察基础能力的经典题，更是展现技术深度与工程思维的绝佳机会。类型判断看似简单，实则暗藏陷阱：如何处理原始类型与引用类型的差异？如何覆盖边界条件？如何兼顾代码的可读性与性能？本文将从实际开发场景出发，结合代码示例，系统拆解这道题的解题思路与优化策略。

一、类型判断的核心逻辑：从基础到进阶

类型判断的本质是区分输入值的类别（如string、number、object等），但直接使用typeof或instanceof往往不够严谨。例如：

• typeof null返回"object"，这是JavaScript的历史遗留问题；
• typeof []返回"object"，无法区分数组与普通对象；
• instanceof依赖原型链，在跨窗口（如iframe）场景下可能失效。

基础解法：typeof + 对象类型细分

function getType(value) {
  const type = typeof value;
  if (type !== 'object') return type; // 处理原始类型
  // 处理null和数组
  if (value === null) return 'null';
  if (Array.isArray(value)) return 'array';
  // 处理日期、正则等特殊对象
  if (value instanceof Date) return 'date';
  if (value instanceof RegExp) return 'regexp';
  // 默认返回object
  return 'object';
}

进阶优化：使用Object.prototype.toString
ECMAScript规范中，Object.prototype.toString.call(value)会返回类似"[object Array]"的字符串，通过解析该字符串可精准判断类型：

function getType(value) {
  const toString = Object.prototype.toString;
  const map = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]': 'string',
    '[object Array]': 'array',
    '[object Date]': 'date',
    '[object RegExp]': 'regexp',
    '[object Null]': 'null',
    '[object Undefined]': 'undefined',
    '[object Function]': 'function',
    '[object Object]': 'object'
  };
  const typeStr = toString.call(value);
  return map[typeStr] || 'object'; // 未知类型默认返回object
}

此方法覆盖了所有内置类型，且不受跨窗口影响，是工业级实现的常见选择。

二、边界条件处理：从“能用”到“健壮”

类型判断的健壮性体现在对极端场景的处理能力。例如：

1. Symbol类型：typeof Symbol('a')返回"symbol"，需单独处理；
2. BigInt类型：typeof 100n返回"bigint"，需兼容ES2020+；
3. 自定义类实例：需区分内置对象与用户自定义类；
4. 跨窗口对象：如iframe中的数组，instanceof Array会失效。

优化后的实现：

function getType(value) {
  if (value === null) return 'null';
  if (value === undefined) return 'undefined';
  const type = typeof value;
  if (type !== 'object' && type !== 'function') return type; // 原始类型
  const toString = Object.prototype.toString;
  const typeStr = toString.call(value);
  // 处理Symbol和BigInt
  if (typeStr === '[object Symbol]') return 'symbol';
  if (typeStr === '[object BigInt]') return 'bigint';
  // 映射内置类型
  const map = {
    '[object Boolean]': 'boolean',
    '[object Number]': 'number',
    '[object String]': 'string',
    '[object Array]': 'array',
    '[object Date]': 'date',
    '[object RegExp]': 'regexp',
    '[object Function]': 'function',
    '[object Map]': 'map',
    '[object Set]': 'set',
    '[object WeakMap]': 'weakmap',
    '[object WeakSet]': 'weakset',
    '[object Promise]': 'promise',
    '[object Error]': 'error'
  };
  return map[typeStr] || 'object'; // 未知类型默认返回object
}

三、性能优化：从“正确”到“高效”

在高频调用的场景下（如框架的虚拟DOM差异算法），类型判断的性能至关重要。优化策略包括：

1. 缓存Object.prototype.toString：避免每次调用都通过原型链查找；
2. 减少分支判断：优先处理高频类型（如object、array）；
3. 使用位运算或查表法：对离散类型（如布尔值、数字）可进一步优化。

性能优化版：

const toString = Object.prototype.toString;
const typeMap = {
  '[object Boolean]': 'boolean',
  '[object Number]': 'number',
  '[object String]': 'string',
  '[object Array]': 'array',
  '[object Date]': 'date',
  '[object RegExp]': 'regexp',
  '[object Symbol]': 'symbol',
  '[object BigInt]': 'bigint',
  '[object Function]': 'function',
  '[object Null]': 'null',
  '[object Undefined]': 'undefined'
};
function getType(value) {
  if (value === null) return 'null';
  if (value === undefined) return 'undefined';
  const type = typeof value;
  if (type !== 'object' && type !== 'function') return type;
  const typeStr = toString.call(value);
  return typeMap[typeStr] || 'object';
}

四、代码规范与可维护性：从“实现”到“工程”

在实际项目中，类型判断工具需满足以下规范：

1. 单一职责：将类型判断逻辑与业务逻辑解耦；
2. 可扩展性：支持新增类型（如Blob、File等）；
3. 文档化：明确返回值的约定（如'array'而非'Array'）；
4. 测试覆盖：通过单元测试验证边界条件。

工程化实现示例：

// type-utils.js
const TYPE_MAP = {
  '[object Boolean]': 'boolean',
  '[object Number]': 'number',
  '[object String]': 'string',
  '[object Array]': 'array',
  '[object Date]': 'date',
  '[object RegExp]': 'regexp',
  '[object Symbol]': 'symbol',
  '[object BigInt]': 'bigint',
  '[object Function]': 'function',
  '[object Null]': 'null',
  '[object Undefined]': 'undefined',
  '[object Map]': 'map',
  '[object Set]': 'set'
};
export function getType(value) {
  if (value === null) return 'null';
  if (value === undefined) return 'undefined';
  const type = typeof value;
  if (type !== 'object' && type !== 'function') return type;
  const typeStr = Object.prototype.toString.call(value);
  return TYPE_MAP[typeStr] || 'object';
}
// 测试用例
describe('getType', () => {
  test('原始类型', () => {
    expect(getType(true)).toBe('boolean');
    expect(getType(123)).toBe('number');
    expect(getType('abc')).toBe('string');
    expect(getType(Symbol('a'))).toBe('symbol');
    expect(getType(100n)).toBe('bigint');
  });
  test('引用类型', () => {
    expect(getType([])).toBe('array');
    expect(getType({})).toBe('object');
    expect(getType(new Date())).toBe('date');
    expect(getType(/a/)).toBe('regexp');
    expect(getType(() => {})).toBe('function');
  });
  test('边界条件', () => {
    expect(getType(null)).toBe('null');
    expect(getType(undefined)).toBe('undefined');
  });
});

五、面试中的加分项：从“解题”到“沟通”

在面试场景下，回答此类问题需注意：

1. 主动沟通需求：确认是否需要覆盖所有类型（如是否区分Map和Set）；
2. 解释设计选择：说明为何选择Object.prototype.toString而非instanceof；
3. 预判后续问题：如面试官追问“如何判断自定义类”，可延伸讨论constructor属性或Symbol.hasInstance；
4. 展示工程思维：提及性能优化、测试覆盖等实际开发中的考量。

示例回答：

“我会优先使用Object.prototype.toString.call，因为它能精准区分所有内置类型，且不受跨窗口影响。对于原始类型，直接通过typeof判断更高效。此外，我会处理null和undefined的特殊情况，避免返回'object'。如果需要支持自定义类，可以通过检查value.constructor.name实现，但需注意压缩代码后类名可能变化的问题。”

结语

手写类型判断不仅是考察基础知识的利器，更是展现技术深度与工程思维的舞台。通过系统化的解法设计、边界条件处理、性能优化与代码规范，开发者能在面试中脱颖而出。更重要的是，这类问题背后反映的“严谨性”与“工程化”思维，正是实际开发中解决复杂问题的关键能力。