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 相关文章推荐
10个实用的脚本代码工具
May 04 Javascript
Jquery Select操作方法集合脚本之家特别版
May 17 Javascript
JS鼠标事件大全 推荐收藏
Nov 01 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
Node.js插件的正确编写方式
Aug 03 Javascript
vue弹窗组件使用方法
Apr 28 Javascript
小程序组件之仿微信通讯录的实现代码
Sep 12 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
解决vue bus.$emit触发第一次$on监听不到问题
Jul 28 Javascript
JavaScript 实现继承的几种方式
Feb 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数据库抽象层 PDO
2011/05/07 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
ThinkPHP中Common/common.php文件常用函数功能分析
2016/05/20 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
通过JS自动隐藏手机浏览器的地址栏实现原理与代码
2013/01/02 Javascript
原生javascript模仿win8等待提示圆圈进度条
2014/04/24 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
2015/11/05 Javascript
Vue2.0表单校验组件vee-validate的使用详解
2017/05/02 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
基于vue1和vue2获取dom元素的方法
2018/03/17 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
JavaScript数组排序的六种常见算法总结
2020/08/18 Javascript
理解JavaScript中的Proxy 与 Reflection API
2020/09/21 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
Python简单的制作图片验证码实例
2017/05/31 Python
python 剪切移动文件的实现代码
2018/08/02 Python
python实现飞机大战游戏
2020/10/26 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
如何表示python中的相对路径
2020/07/08 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
协议书的格式
2014/04/23 职场文书
高中语文课后反思
2014/04/27 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS