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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
利用javascript解决图片缩放及其优化的代码
May 23 Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
Jan 28 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
require.js的用法详解
Oct 20 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
Jun 11 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
js使用文件流下载csv文件的实现方法
Jul 15 Javascript
Vue触发隐藏input file的方法实例详解
Aug 14 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
PHP图片裁剪函数(保持图像不变形)
2014/05/04 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
WordPress开发中的get_post_custom()函数使用解析
2016/01/04 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
再论Javascript下字符串连接的性能
2011/03/05 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
什么是MEAN?JavaScript编程中的MEAN是什么意思?
2014/12/18 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
JavaScript中关联原型链属性特性
2016/02/13 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
json数据格式常见操作示例
2019/06/13 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
vue 基于abstract 路由模式 实现页面内嵌的示例代码
2020/12/14 Vue.js
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
python Django模板的使用方法(图文)
2013/11/04 Python
跟老齐学Python之数据类型总结
2014/09/24 Python
详解Python中的__getitem__方法与slice对象的切片操作
2016/06/27 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
cProfile Python性能分析工具使用详解
2019/07/22 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
荷兰家电购物网站:Expert.nl
2020/01/18 全球购物
银行求职信个人范文
2013/12/16 职场文书
妇产医师自荐信
2014/01/29 职场文书
涉密人员保密承诺书
2014/05/28 职场文书