变量 === 未定义与 typeof 变量 === “未定义”

Question

jQuery Core Style Guidelines 提出了两种不同的方法来检查变量是否已定义。

• 全局变量：typeof variable === "undefined"
• 局部变量：variable === undefined
• 属性：object.prop === undefined

为什么 jQuery 对全局变量使用一种方法，而对局部变量和属性使用另一种方法？

Answer 1

对于未声明的变量，typeof foo 将返回字符串文字 "undefined"，而身份检查 foo === undefined 将触发错误“foo is not defined”。

对于局部变量（您知道在某处声明），不会发生此类错误，因此需要进行身份检查。

Answer 2

我会坚持在任何地方使用typeof foo === "undefined"。这永远不会出错。

我想 jQuery 推荐这两种不同方法的原因是它们在 jQuery 代码所在的函数中定义了自己的 undefined 变量，因此在该函数中 undefined 是安全的，不会被外部篡改。我还可以想象，某个地方的某个人对这两种不同的方法进行了基准测试，发现foo === undefined 更快，因此决定这是要走的路。 [更新：如 cmets 中所述，与 undefined 的比较也略短，这可能是一个考虑因素。] 但是，在实际情况下的收益将完全微不足道：此检查永远不会, 永远是任何类型的瓶颈，你失去的东西很重要：评估主机对象的属性以进行比较可能会引发错误，而 typeof 检查永远不会。

例如在 IE 中使用以下方式解析 XML：

var x = new ActiveXObject("Microsoft.XMLDOM");

安全检查是否有loadXML方法：

typeof x.loadXML === "undefined"; // Returns false

另一方面：

x.loadXML === undefined; // Throws an error

更新

我忘记提及的typeof 检查的另一个优点是它也适用于未声明的变量，而foo === undefined 检查却没有，实际上会抛出ReferenceError。感谢@LinusKleen 提醒我。例如：

typeof someUndeclaredVariable; // "undefined"
someUndeclaredVariable === undefined; // throws a ReferenceError

底线：始终使用typeof 检查。

Answer 3

使用 typeof-variant 的另一个原因：undefined 可以重新定义。

undefined = "foo";
var variable = "foo";
if (variable === undefined)
  console.log("eh, what?!");

typeof variable 的结果不能。

更新：请注意，在 ES5 中并非如此，全局 undefined 是不可配置、不可写的属性：

15.1.1 Value Properties of the Global Object
[...]
15.1.1.3 undefined
undefined 的值是未定义的（见 8.1）。此属性具有属性
{ [[Writable]]: false, [[Enumerable]]: false, [[Configurable]]: false }.

但它仍然可以被局部变量遮蔽：

(function() {
  var undefined = "foo";
  var variable = "foo";
  if (variable === undefined)
    console.log("eh, what?!");  
})()

或参数：

(function(undefined) {
  var variable = "foo";
  if (variable === undefined)
    console.log("eh, what?!");  
})("foo")

Answer 4

因为undefined并不总是被声明，但是jQuery在它的主函数中声明了undefined。所以他们在内部使用安全的undefined 值，但在外部，他们使用typeof 样式来保证安全。

Answer 5

谁对variable === undefined的性能提升感兴趣，可以看这里，不过好像只是chrome优化。

• http://jsperf.com/type-of-undefined-vs-undefined/30
• http://jsperf.com/type-of-undefined-vs-undefined

Answer 6

对于局部变量，使用 localVar === undefined 检查会起作用，因为它们必须是在局部范围内的某个地方定义的，否则它们不会被视为局部变量。

对于不是本地且未在任何地方定义的变量，检查someVar === undefined 将抛出异常：Uncaught ReferenceError: j is not defined

这里有一些代码可以阐明我上面所说的内容。 请注意内联 cmets 以进一步了解。

function f (x) {
    if (x === undefined) console.log('x is undefined [x === undefined].');
    else console.log('x is not undefined [x === undefined.]');

    if (typeof(x) === 'undefined') console.log('x is undefined [typeof(x) === \'undefined\'].');
    else console.log('x is not undefined [typeof(x) === \'undefined\'].');

    // This will throw exception because what the hell is j? It is nowhere to be found.
    try
    {
        if (j === undefined) console.log('j is undefined [j === undefined].');
        else console.log('j is not undefined [j === undefined].');
    }
    catch(e){console.log('Error!!! Cannot use [j === undefined] because j is nowhere to be found in our source code.');}

    // However this will not throw exception
    if (typeof j === 'undefined') console.log('j is undefined (typeof(x) === \'undefined\'). We can use this check even though j is nowhere to be found in our source code and it will not throw.');
    else console.log('j is not undefined [typeof(x) === \'undefined\'].');
};

如果我们这样调用上面的代码：

f();

输出是这样的：

x is undefined [x === undefined].
x is undefined [typeof(x) === 'undefined'].
Error!!! Cannot use [j === undefined] because j is nowhere to be found in our source code.
j is undefined (typeof(x) === 'undefined'). We can use this check even though j is nowhere to be found in our source code and it will not throw.

如果我们像这样调用上面的代码（实际上是任何值）：

f(null); 
f(1);

输出将是：

x is not undefined [x === undefined].
x is not undefined [typeof(x) === 'undefined'].
Error!!! Cannot use [j === undefined] because j is nowhere to be found in our source code.
j is undefined (typeof(x) === 'undefined'). We can use this check even though j is nowhere to be found in our source code and it will not throw.

---

当您进行这样的检查时：typeof x === 'undefined'，您实际上是在问这个问题：请检查变量x 是否存在（已定义）在源代码的某处。（更多或更少）。如果您了解 C# 或 Java，则永远不会进行此类检查，因为如果不存在，则无法编译。

<== Fiddle Me ==>

Answer 7

总结：

在全局范围内，如果变量未声明或值为undefined，我们实际上希望返回true：

var globalVar1;

// This variable is declared, but not defined and thus has the value undefined
console.log(globalVar1 === undefined);

// This variable is not declared and thus will throw a referenceError
console.log(globalVar2 === undefined);

因为在全局范围内，我们不能 100% 确定是否声明了一个变量，这可能会给我们一个 referenceError。当我们在未知变量上使用typeof 运算符时，如果未声明变量，我们不会遇到此问题：

var globalVar1;

console.log(typeof globalVar1 === 'undefined');
console.log(typeof globalVar2 === 'undefined');

这是因为typeof 运算符在未声明变量或当前持有值undefined 时返回字符串undefined，这正是我们想要的。

---

• 使用局部变量我们没有这个问题，因为我们事先知道这个变量会存在。如果变量存在，我们可以简单地查看相应的函数。
• 对于对象属性，我们没有这个问题，因为当我们尝试查找不存在的对象属性时，我们也会得到值undefined

var obj = {};

console.log(obj.myProp === undefined);

Answer 8

typeof a === 'undefined' 在节点 v6.9.1 上比 a === 'undefined' 快大约 2 倍。