JS判断全局变量是否存在的10种方法详解

JavaScript变量判断背景与问题引入

JavaScript语言在设计上存在不够严谨之处，开发者稍有不慎便容易引发错误。例如，我们需要判断一个名为myObj的全局对象是否已经存在，若不存在则对其进行声明。用自然语言描述该算法逻辑如下：

if (myObj不存在){
声明myObj;
　　}

这段代码看似简单，实则涉及复杂的语法细节。正如Juriy Zaytsev所指出的，判断JavaScript对象是否存在的方法多达50余种。只有深入理解JavaScript语言的底层实现机制，才能准确区分这些写法的差异。

第一种写法：var声明与变量提升机制

第一种写法：直觉式判断

if (!myObj) {
myObj = { };
　　}

然而，执行这段代码时，浏览器会直接抛出ReferenceError错误，导致运行中断。问题出在哪里？

原因在于，当if语句尝试判断myObj是否为空时，该变量尚未被定义，因此引发错误。修正后的代码如下，即可正常运行：

if (!myObj) {
var myObj = { };
　　}

为何加上var关键字后就不再报错？这是否意味着在if判断时myObj已经存在？

要解答此问题，需了解JavaScript解释器的工作机制。JavaScript采用“先解析，后运行”的模式，变量声明在解析阶段即已完成。因此，上述代码实际等效于：

var myObj;
if (!myObj) {
var myObj = { };
　　}

由此可见，在if语句执行判断时，myObj确实已存在，故不会报错。这体现了var命令的“代码提升”（hoisting）特性。JavaScript解释器仅提升由var声明的变量，对未使用var直接赋值的变量无效，这也是不加var会报错的根本原因。

第二种写法：利用顶层对象与this关键字

第二种写法：利用顶层对象

if (!window.myObj) {
myObj = { };
　　}

在JavaScript中，window是顶层对象，所有全局变量均为其属性。因此，判断myObj是否为空，等价于判断window对象是否拥有myObj属性，从而避免了因myObj未定义而产生的ReferenceError。但从代码规范性角度考虑，建议第二行也加上var：

if (!window.myObj) {
var myObj = { };
    　　} 
或者采用以下写法：
if (!window.myObj) {
window.myObj = { };
    　　}

上述写法的缺点是，在某些运行环境（如V8、Rhino）中，window未必是顶层对象。因此，建议改写为：

if (!this.myObj) {
this.myObj = { };
　　}

在全局变量层面，this关键字始终指向顶层变量，从而实现了跨运行环境的兼容性。

然而，上述写法可读性较差，且this指向可变，易出错。进一步改写如下：

var global = this;
if (!global.myObj) {
global.myObj = { };
　　}

通过自定义变量global表示顶层对象，代码意图更加清晰。

第五至八种写法：typeof、比较运算符与null处理

第五种写法：使用typeof运算符

if (typeof myObj == "undefined") {
var myObj = { };
　　}

这是目前判断JavaScript对象是否存在的最广泛使用方法。

第六种写法：简化比较

if (myObj == undefined) {
var myObj = { };
　　}

此处需注意两点：首先，第二行的var关键字不可省略，否则会出现ReferenceError错误；其次，undefined不能加单引号或双引号，因为此处比较的是undefined数据类型，而非字符串"undefined"。

第七种写法：精确比较

if (myObj === undefined) {
var myObj = { };
　　}

根据JavaScript语言设计，undefined == null，因此比较myObj是否等于null也能得到正确结果：

if (myObj == null) {
var myObj = { };
　　}

尽管运行结果正确，但从语义角度看，这种判断方法是错误的，应避免使用。因为null指已赋值为null的空对象（即对象实际有值），而undefined指不存在或未赋值的对象。因此，此处只能使用“比较运算符”（==），若使用“精确比较运算符”（===）则会出错。

第九与第十种写法：in运算符与hasOwnProperty方法

第九种写法：使用in运算符

if (!('myObj' in window)) {
window.myObj = { };
　　}

最后，使用hasOwnProperty方法判断myObj是否为顶层对象的一个属性：

if (!this.hasOwnProperty('myObj')) {
this.myObj = { };
　　}

最佳实践总结与建议

总结与建议：

1. 若仅需判断对象是否存在，推荐使用第五种写法（typeof）。

2. 若需同时判断对象是否存在及其值是否为null，推荐使用第一种写法。

3. 除非特殊情况，所有变量声明均应使用var命令。