JavaScript中常见陷阱小结


Posted in Javascript onApril 27, 2010

你所创建的所有函数都是区分大小写的
单引号('字符串')和双引号("字符串")在JavaScript中没有特殊的区别,都可以用来创建字符串.但作为一般原则,大多数WEB开发者都选择使用单引号 而不是双引号,因为XHTML规范要求所有XHTML属性值都必须使用双引号括起来.

JavaScript不支持重载,在JavaScript中,脚本在执行时不会顾及函数定义时的参数,而是直接使用在作用域链中最后定义的那个函数。这意味着,相同名称的函数永远只存在一个实例

闭包是与作用域相关的一个概念,它指的是内部函数即使在外部函数执行完成并终止后,依然可以访问其外部函数的属性。当引用一个变量或方法时,JavaScript会沿着由对象执行路径构成使用域链对使用域进行解析,查找变量最近定义的值,一旦找到即使用该值。function initAnchors(event){

for (var i=1; i <=3; i++){ 


var anchor = document.GetElementById('anchor' + i); 


anchor.attachEvent('onclick', function() {  


alert('my id is anchor' + i); 


}); 

} 
}

假设页面中有三个A元素,ID分别为anchor1到anchor3,程序为三个A元素注册onclick事件,单击第个A元素显示"my id is anchorX",但实际运行情况却不是这样,单击每个A元素都显示"my id is anchor4"。为什么会这样呢,因为i的值实际上是在单击事件发生时才从使用域链中取得的,当单击事件发生时,initAnchors()已执行完毕,此时i的值等于4。解决方法可以按如下
function registerAnchorListner(anchor,i){ 
anchor.attachEvent('onclick', function() {  


alert('my id is anchor' + i); 

}
 
} 
function initAnchors(event){ 

for (var i=1; i <=3; i++){ 


var anchor = document.GetElementById('anchor' + i); 


registerAnchorListner(anchor,i); 

} 
} 
var anchor = document.GetElementById('anchor' + i); 
anchor.attachEvent('onclick', function() { 
alert('my id is anchor' + i); 

});

迭代对象,在编写脚本时经常使用到迭代,如下:

var list = [1,2,3,4]; 
for(var i = 0;i < list.length; i++){ 
alert(list); 
}

另一种可供选择的迭代方法是使用for循环遍历位于(in)list中的每个属性:
for(var i in list){ 
alert(list); 
}

此时,得到的是与使用前一迭代方法相同的结果,因为list是一个Array对象。

但是,当使用for(var i in item)方法操纵类似数组而又不是数组的对象时一定要格外小心,如下

var all=document.getElementsByTagName('*'); 
for(var i in all){ 
//对照all元素进行某些操作 
}

在这次的迭代过程中,i的值会分别等于length、item和namedItem,而这很可能会导致代码中出现意外错误。在某些情况下,可以使用对象的hasOwnProperty()方法来避免这个问题。如果对象的属性或方法是非继承的,那么hasOwnProperty()方法返回true。即这里的检查不涉及从其它对象继承的属性和方法,只会检查在特定对象自身中直接创建的属性,比如分配给数组的元素。因此,在如果在for循环中使用这种检查,那么循环将会跳过length这样属性,因为length不是数组all的真系属性,而是从派生数组all的NameNodeMap对象中继承的属性
var all=document.getElementsByTagName('*'); 
for(var i in all){ 
if(!all.hasOwnProperty(i)) continue; 

//对照all元素进行某些操作 
}
Javascript 相关文章推荐
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
一个简单的jquery的多选下拉框(自写)
May 05 Javascript
关闭页面window.location事件未执行的原因及解决方法
Sep 01 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
如何消除inline-block属性带来的标签间间隙
Mar 31 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 Javascript
Vue.js实现分页查询功能
Nov 15 Javascript
jQuery EasyUI 选项卡面板tabs的使用实例讲解
Dec 25 jQuery
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
Aug 30 Javascript
详解vue-cli3多页应用改造
Jun 04 Javascript
javascript 动态修改样式和层叠样式表代码
Apr 27 #Javascript
js 绑定带参数的事件以及手动触发事件
Apr 27 #Javascript
javascript 模式设计之工厂模式学习心得
Apr 27 #Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 #Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 #Javascript
jQuery 表格工具集
Apr 25 #Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 #Javascript
You might like
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
jQuery 位置插件
2008/12/25 Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
2012/12/10 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
checkbox全选所涉及到的知识点介绍
2013/12/31 Javascript
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
一个非常全面的javascript URL解析函数和分段URL解析方法
2014/04/12 Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
2014/09/03 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
js实现tab切换效果实例
2015/09/16 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
JS点击图片弹出文件选择框并覆盖原图功能的实现代码
2017/08/25 Javascript
详解Nuxt.js部署及踩过的坑
2018/08/07 Javascript
jQuery pjax 应用简单示例
2018/09/20 jQuery
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
vue路由切换之淡入淡出的简单实现
2019/10/31 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
python对字典进行排序实例
2014/09/25 Python
python中私有函数调用方法解密
2016/04/29 Python
Python编码爬坑指南(必看)
2016/06/10 Python
Python实现调度算法代码详解
2017/12/01 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
Python创建或生成列表的操作方法
2019/06/19 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
群众路线教育实践活动对照检查材料思想汇报(副处级领导)
2014/10/04 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
校车安全管理责任书
2015/05/11 职场文书
幼儿园毕业致辞
2015/07/29 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL
win10音频服务未响应怎么解决?win10音频服务未响应未修复的解决方法
2022/08/14 数码科技