JavaScript中typeof的深层解析：从基础用法到常见陷阱

typeof 运算符概述

JavaScript 中的 typeof 运算符机制复杂，功能多样，但也伴随着一些令人困惑的行为。

本文将梳理其多种应用场景，并指出其中存在的问题及相应的解决策略。

阅读前请确保已掌握原始值与对象值的区别。

检测变量存在性与值

检测变量是否存在及是否拥有值： typeof 在两种情形下会返回 "undefined"：

1. 变量尚未被声明。

2. 变量的值确实为 undefined。

示例如下：

> typeof undeclaredVariable === "undefined"
true
> var declaredVariable;
> typeof declaredVariable
'undefined'
> typeof undefined
'undefined'

还有其他方法检测值是否为 undefined：

> var value = undefined;
> value === undefined
true

然而，若对未声明的变量使用此方法，会抛出异常。只有 typeof 能在不报错的前提下检测未声明变量：

> undeclaredVariable === undefined
ReferenceError: undeclaredVariable is not defined

注意：未初始化的变量、未传参的形参、不存在的属性均无此问题，因为它们始终可访问且值为 undefined：

> var declaredVariable;
> declaredVariable === undefined
true
> (function (x) { return x === undefined }())
true
> ({}).foo === undefined
true

译者注：因此，若需检测可能未声明的全局变量是否存在，也可使用 if(window.maybeUndeclaredVariable){}。

问题：typeof 在此类任务中显得繁琐。

解决办法：此类操作不常见，故有人觉得无需更优解。但或许有人提议专用操作符：

> defined undeclaredVariable
false
> var declaredVariable;
> defined declaredVariable
false

或者，或许有人需要检测变量是否被声明的操作符：

> declared undeclaredVariable
false
> var declaredVariable;
> declared declaredVariable
true

译者注：在 perl 里，上面的 defined 操作符相当于 defined()，上面的 declared 操作符相当于 exists()。

处理 null 与 undefined 的判断

判断值非 undefined 且非 null： 问题：若需检测值已定义（非 undefined 且非 null），会遭遇 typeof 最著名的怪异表现（常被视为 Bug）：typeof null 返回 "object"：

> typeof null
'object'

译者注：这仅是早期 JavaScript 实现的 Bug，现标准如此规范。V8 曾尝试修正并实现 typeof null === "null"，但最终证明不可行。http://wiki.ecmascript.org/doku.php?id=harmony:typeof_null。

（译注：typeof 在操作 null 时会返回 "object"，这是 JavaScript 语言本身的 Bug。不幸的是，这个 Bug 永远不可能被修复了，因为太多已有的代码已经依赖了这样的表现。但是 null 到底是不是 对象呢？stackoverflow 有关于这个问题的讨论：http://stackoverflow.com/questions/801032/null-object-in-javascript/7968470#7968470@justjavac）

解决办法：避免使用 typeof 执行此任务，改用以下函数：

function isDefined(x) {
return x !== null && x !== undefined;
}

另一种可能性是引入“默认值运算符”，当 myValue 未定义时，以下表达式返回 defaultValue：

myValue ?? defaultValue

上述表达式等价于：

(myValue !== undefined && myValue !== null) ? myValue : defaultValue

或者：

myValue ??= defaultValue

实为以下语句的简化：

myValue = myValue ?? defaultValue

访问嵌套属性（如 bar）时，可能需要此运算符：

obj.foo.bar

若 obj 或 obj.foo 为 undefined，上述表达式将抛出异常。运算符 .?? 可在遍历属性时，返回首个遇到的 undefined 或 null 值：

obj.??foo.??bar

上述表达式等价于：

(obj === undefined || obj === null) ? obj
: (obj.foo === undefined || obj.foo === null) ? obj.foo
: obj.foo.bar

区分对象与原始值

区分对象值与原始值：

以下函数用于检测 x 是否为对象值：

function isObject(x) {
return (typeof x === "function"
|| (typeof x === "object" && x !== null));
}

问题：上述检测复杂，因 typeof 将函数和对象视为不同类型，且 typeof null 返回 "object"。

解决办法：以下方法也常用于检测对象值：

function isObject2(x) {
return x === Object(x);
}

警告：或许认为可使用 instanceof Object 检测，但 instanceof 通过原型判断实例关系，无原型的对象如何处理？

> var obj = Object.create(null);
> Object.getPrototypeOf(obj)
null

obj 确实是对象，但它不是任何值的实例：

> typeof obj
'object'
> obj instanceof Object
false

实际中此类对象少见，但确实存在且有用途。

译者注：Object.prototype 是唯一一个内置的、没有原型的对象。

>Object.getPrototypeOf(Object.prototype)
null
>typeof Object.prototype
'object'
>Object.prototype instanceof Object
false

原始值类型判断

原始值的类型是什么？ typeof 是查看原始值类型的最佳方式。

> typeof "abc"
'string'
> typeof undefined
'undefined'

问题：必须知晓 typeof null 的怪异表现。

> typeof null // 要小心!
'object'

解决办法：以下函数可修复此问题（仅针对此用例）。

function getPrimitiveTypeName(x) {
var typeName = typeof x;
switch(typeName) {
case "undefined":
case "boolean":
case "number":
case "string":
return typeName;
case "object":
if (x === null) {
return "null";
            }
default: // 前面的判断都没通过
throw new TypeError("参数不是一个原始值: "+x);
    }
}

更好的解决办法：实现 getTypeName() 函数，除返回原始值类型外，还可返回对象值的内部 [[Class]] 属性。此处讲解如何实现此函数（译者注：jQuery 中的 $.type 就是这样的实现）

函数检测与跨框架问题

判断值是否为函数： typeof 可用于检测值是否为函数。

> typeof function () {}
'function'
> typeof Object.prototype.toString
'function'

原则上，instanceof Function 也可检测。看似更优雅，但浏览器有怪癖：每个框架和窗口拥有独立的全局变量。若将某框架对象传至另一框架，instanceof 因构造函数不同而失效。这正是 ECMAScript5 引入 Array.isArray() 的原因。若有一种跨框架检查对象是否为指定构造函数实例的方法，将非常有益。上述 getTypeName() 是可用变通方案，但或许有更根本的解决方案。

总结与替代方案

综述 目前 JavaScript 中最迫切需要的、可替代部分 typeof 职责的功能特性包括：

•isDefined() (如 Object.isDefined()): 可作为函数或运算符

•isObject()

•getTypeName()

•能够跨框架的、检测对象是否是指定构造函数实例的机制

检查变量是否已声明的需求，可能无需专用运算符。