热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

【转】如何判断Javascript对象是否存在

Javascript语言的设计不够严谨,很多地方一不小心就会出错。

Javascript语言的设计不够严谨,很多地方一不小心就会出错。



举例来说,请考虑以下情况。

现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明。用自然语言描述的算法如下:



if (myObj不存在){

声明myObj;

}

你可能会觉得,写出这段代码很容易。但是实际上,它涉及的语法问题,远比我们想象的复杂。指出,判断一个Javascript对象是否存在,有超过50种写法。只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别。

第一种写法

根据直觉,你可能觉得可以这样写:

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会报错的原因。

第二种写法

除了var命令,还可以有另一种改写,也能得到正确的结果:

if (!window.myObj) {

myObj = { };

}

window是Javascript的顶层对象,所有的全局变量都是它的属性。所以,判断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运算符,判断myObj是否有定义。

if (typeof myObj == "undefined") {

var myObj = { };

}

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

第六种写法

由于在已定义、但未赋值的情况下,myObj的值直接等于undefined,所以上面的写法可以简化:

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运算符,判断myObj是否为顶层对象的一个属性:

if (!('myObj' in window)) {

window.myObj = { };

}

第十种写法

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

if (!this.hasOwnProperty('myObj')) {

this.myObj = { };

}

总结

1. 如果只判断对象是否存在,推荐使用第五种写法。

2. 如果除了对象是否存在,还要判断对象是否有null值,推荐使用第一种写法。

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

4. 为了跨平台,建议避免使用window表示顶层对象。

5. 在Javascript语言中,null和undefined容易产生混淆。在可能同时涉及两者的情况下,建议使用"精确比较"运算符(===)。

(完)


   



推荐阅读
  • H5技术实现经典游戏《贪吃蛇》
    本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术,我们将探讨如何构建这款游戏的两种主要玩法:积分闯关和无尽模式。 ... [详细]
  • 本文探讨了如何通过优化 DOM 操作来提升 JavaScript 的性能,包括使用 `createElement` 函数、动画元素、理解重绘事件及处理鼠标滚动事件等关键主题。 ... [详细]
  • 深入理解:AJAX学习指南
    本文详细探讨了AJAX的基本概念、工作原理及其在现代Web开发中的应用,旨在为初学者提供全面的学习资料。 ... [详细]
  • 深入解析WebP图片格式及其应用
    随着互联网技术的发展,无论是PC端还是移动端,图片数据流量占据了很大比重。尤其在高分辨率屏幕普及的背景下,如何在保证图片质量的同时减少文件大小,成为了亟待解决的问题。本文将详细介绍Google推出的WebP图片格式,探讨其在实际项目中的应用及优化策略。 ... [详细]
  • 八段代码完全控制Promise
    1.Promise的马上实行性varpnewPromise(function(resolve,reject){console.log(createapromise);resolve ... [详细]
  • 在将 Android Studio 从 3.0 升级到 3.1 版本后,遇到项目无法正常编译的问题,具体错误信息为:org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:processDemoProductDebugResources'。 ... [详细]
  • 实践指南:使用Express、Create React App与MongoDB搭建React开发环境
    本文详细介绍了如何利用Express、Create React App和MongoDB构建一个高效的React应用开发环境,旨在为开发者提供一套完整的解决方案,包括环境搭建、数据模拟及前后端交互。 ... [详细]
  • 本文详细介绍了如何在Oracle VM VirtualBox中实现主机与虚拟机之间的数据交换,包括安装Guest Additions增强功能,以及如何利用这些功能进行文件传输、屏幕调整等操作。 ... [详细]
  • 本周三大青年学术分享会即将开启
    由雷锋网旗下的AI研习社主办,旨在促进AI领域的知识共享和技术交流。通过邀请来自学术界和工业界的专家进行在线分享,活动致力于搭建一个连接理论与实践的平台。 ... [详细]
  • MySQL InnoDB 存储引擎索引机制详解
    本文深入探讨了MySQL InnoDB存储引擎中的索引技术,包括索引的基本概念、数据结构与算法、B+树的特性及其在数据库中的应用,以及索引优化策略。 ... [详细]
  • 本文详细介绍了在 Ubuntu 16.04 系统上安装和配置 PostgreSQL 数据库的方法,包括如何设置监听地址、启用密码加密、更改默认用户密码以及调整客户端访问控制。 ... [详细]
  • 理解浏览器历史记录(2)hashchange、pushState
    阅读目录1.hashchange2.pushState本文也是一篇基础文章。继上文之后,本打算去研究pushState,偶然在一些信息中发现了锚点变 ... [详细]
  • 流处理中的计数挑战与解决方案
    本文探讨了在流处理中进行计数的各种技术和挑战,并基于作者在2016年圣何塞举行的Hadoop World大会上的演讲进行了深入分析。文章不仅介绍了传统批处理和Lambda架构的局限性,还详细探讨了流处理架构的优势及其在现代大数据应用中的重要作用。 ... [详细]
  • 本文档介绍了如何使用ESP32开发板在STA模式下实现与TCP服务器的通信,包括环境搭建、代码解析及实验步骤。 ... [详细]
  • 从键盘输入年、月、日,要求输出当前日期为当年的第多少天。今天凯凯君又去参加了笔试,碰到了这样一个题目,从键盘输入年、月、日,要求输出当前日期为当年的第多少天。面对这个题目你首先想到 ... [详细]
author-avatar
边怀珠大海
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有