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中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
详解JavaScript基本类型和引用类型
Dec 09 Javascript
基于Javascript实现弹出页面效果
Jan 01 Javascript
JavaScript学习笔记整理_setTimeout的应用
Sep 19 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
bootstrap Table的一些小操作
Nov 01 Javascript
详解webpack + react + react-router 如何实现懒加载
Nov 20 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
详解简单易懂的 ES6 Iterators 指南和示例
Sep 24 Javascript
Vue组件化开发之通用型弹出框的实现
Feb 28 Javascript
ECharts transform数据转换和dataZoom在项目中使用
Dec 24 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匹配字符中链接地址的方法
2014/12/22 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
PHP面向对象程序设计之接口的继承定义与用法详解
2018/12/20 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
浏览器兼容console对象的简要解决方案分享
2013/10/24 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
vue + vuex todolist的实现示例代码
2018/03/09 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
利用js将ajax获取到的后台数据动态加载至网页中的方法
2018/08/08 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
微信小程序服务器日期格式化问题
2020/01/07 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
【python】matplotlib动态显示详解
2019/04/11 Python
python中dict使用方法详解
2019/07/17 Python
分享一个pycharm专业版安装的永久使用方法
2019/09/24 Python
关于python中plt.hist参数的使用详解
2019/11/28 Python
Pygame的程序开始示例代码
2020/05/07 Python
对Python 字典元素进行删除的方法
2020/07/31 Python
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
Wojas罗马尼亚网站:波兰皮鞋品牌
2018/11/01 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
婚礼新郎父母答谢词
2014/01/16 职场文书
优秀教师先进事迹
2014/01/22 职场文书
初中班主任评语
2014/04/24 职场文书
毕业班工作总结
2015/08/10 职场文书
文明礼仪主题班会
2015/08/13 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js