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中使用css需要注意的地方小结
Sep 01 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
js获取时间并实现字符串和时间戳之间的转换
Jan 05 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
Apr 15 Javascript
AngularJS仿苹果滑屏删除控件
Jan 18 Javascript
JavaScript的Vue.js库入门学习教程
May 23 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
微信小程序  自定义创建详细介绍
Oct 27 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
vue-cli V3.0版本的使用详解
Oct 24 Javascript
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
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的分页功能
2007/03/21 PHP
实用函数4
2007/11/08 PHP
PHP日期处理函数 整型日期格式
2011/01/12 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
PHP中Session引起的脚本阻塞问题解决办法
2014/04/08 PHP
ThinkPHP5.1+Ajax实现的无刷新分页功能示例
2020/02/10 PHP
[原创]来自ImageSee官方 JavaScript图片浏览器
2008/01/16 Javascript
javascript 判断是否是微信浏览器的方法
2016/10/09 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
详解如何制作并发布一个vue的组件的npm包
2018/11/10 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
vue+element-ui+axios实现图片上传
2019/08/20 Javascript
Python字符转换
2008/09/06 Python
python模块之time模块(实例讲解)
2017/09/13 Python
Python连接phoenix的方法示例
2017/09/29 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
简述 Python 的类和对象
2020/08/21 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
HTML5 3D书本翻页动画的实现示例
2019/08/28 HTML / CSS
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
物流司机岗位职责
2013/12/28 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
党员干部承诺书
2014/03/25 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
党员对照检查剖析材料
2014/10/13 职场文书
2014年实习期工作总结
2014/11/27 职场文书
先进班集体事迹材料
2014/12/25 职场文书
校长师德表现自我评价
2015/03/04 职场文书