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创建一个选择文件的对话框代码
Jun 16 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 Javascript
JS判断元素是否在数组内的实现代码
Mar 30 Javascript
Backbone View 之间通信的三种方式
Aug 09 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
Apr 23 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 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动态实现表格跨行跨列实现代码
2012/11/06 PHP
解决PhpMyAdmin中导入2M以上大文件限制的方法分享
2014/06/06 PHP
PHP实现事件机制的方法
2015/07/10 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
IE8 浏览器Cookie的处理
2009/01/31 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
JS如何判断移动端访问设备并解析对应CSS
2013/11/27 Javascript
解析Javascript中大括号“{}”的多义性
2013/12/02 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
解决js相同的正则多次调用test()返回的值却不同的问题
2018/10/10 Javascript
Vue+Express实现登录状态权限验证的示例代码
2019/05/05 Javascript
Vue实现push数组并删除的例子
2019/11/01 Javascript
ES6中Set和Map用法实例详解
2020/03/02 Javascript
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python3读取zip文件信息的方法
2015/05/22 Python
简单了解python 生成器 列表推导式 生成器表达式
2019/08/22 Python
django迁移文件migrations的实现
2020/03/31 Python
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
工程造价与管理专业应届生求职信
2013/11/23 职场文书
文秘专业个人求职信
2013/12/22 职场文书
迎新晚会邀请函
2014/02/01 职场文书
葛优非诚勿扰搞笑征婚台词
2014/03/17 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
2014年中学生检讨书大全
2014/10/09 职场文书
后进基层党组织整改方案
2014/10/25 职场文书
2015年会计个人工作总结
2015/04/02 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
Go语言基础知识点介绍
2021/07/04 Golang