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实现页面定时跳转总结篇
Sep 21 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
解决webpack打包速度慢的解决办法汇总
Jul 06 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
在Vant的基础上封装下拉日期控件的代码示例
Dec 05 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 Javascript
js通过循环多张图片实现动画效果
Dec 19 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简单封装了一些常用JS操作
2007/02/25 PHP
php 小乘法表实现代码
2009/07/16 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
浅析Laravel5中队列的配置及使用
2016/08/04 PHP
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
Nodejs实战心得之eventproxy模块控制并发
2015/10/27 NodeJs
基于javascript实现动态时钟效果
2020/08/18 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
python3序列化与反序列化用法实例
2015/05/26 Python
Python 对象中的数据类型
2017/05/13 Python
Python实现学生成绩管理系统
2020/04/05 Python
解决python中的幂函数、指数函数问题
2019/11/25 Python
Python命令行click参数用法解析
2019/12/19 Python
python实现图片横向和纵向拼接
2020/03/05 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
在keras 中获取张量 tensor 的维度大小实例
2020/06/10 Python
python logging模块的使用详解
2020/10/23 Python
门前三包责任书
2014/04/15 职场文书
党员自我对照检查材料
2014/08/19 职场文书
2014最新房贷收入证明范本
2014/09/12 职场文书
拆迁委托协议书
2014/09/15 职场文书
年会邀请函范文
2015/01/30 职场文书
小学中队委竞选稿
2015/11/20 职场文书
SqlServer 垂直分表(减少程序改动)
2021/04/16 SQL Server
Java 数据结构七大排序使用分析
2022/04/02 Java/Android
openstack云计算keystone组件工作介绍
2022/04/20 Servers