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 兼容鼠标滚轮事件
Apr 07 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
AngularJS中取消对HTML片段转义的方法例子
Jan 04 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
原生js仿jquery实现对Ajax的封装
Oct 04 Javascript
jquery-mobile基础属性与用法详解
Nov 23 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
vue2.0全局组件之pdf详解
Jun 26 Javascript
es6系列教程_ Map详解以及常用api介绍
Sep 25 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 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写的小东西
2006/12/06 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
Yii实现复选框批量操作实例代码
2017/03/15 PHP
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JavaScript基础知识学习笔记
2014/12/02 Javascript
对比分析AngularJS中的$http.post与jQuery.post的区别
2015/02/27 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
2016/07/27 Javascript
jquery 中toggle的2种用法详解(推荐)
2016/09/02 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
2017/03/29 jQuery
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
Vue中的作用域CSS和CSS模块的区别
2018/10/09 Javascript
js实现微信聊天界面
2020/08/09 Javascript
python提取内容关键词的方法
2015/03/16 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
pandas DataFrame实现几列数据合并成为新的一列方法
2018/06/08 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python字符串的拼接方法总结
2019/11/18 Python
用CSS3写的模仿iPhone中的返回按钮
2015/04/04 HTML / CSS
使用css3做0.5px的细线的示例代码
2018/01/18 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
AVI-8手表美国官方商店:AVI-8 USA
2019/04/10 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
几道Java和数据库的面试题
2013/05/30 面试题
银行员工职业规划范文
2014/01/21 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
高一军训的心得体会
2014/09/01 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
城管个人总结
2015/02/28 职场文书
2015年采购部工作总结
2015/04/23 职场文书