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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
JavaScript类和继承 constructor属性
Mar 04 Javascript
cookie的复制与使用记住用户名实现代码
Nov 04 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
Jan 26 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
layer实现弹出层自动调节位置
Sep 05 Javascript
原生js实现照片墙效果
Oct 13 Javascript
如何封装Vue Element的table表格组件
Feb 06 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
php中截取字符串支持utf-8
2007/01/18 PHP
php文件上传 你真的掌握了吗
2016/11/28 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
常用的javascript function代码
2008/05/23 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
2014/04/17 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
利用Angular.js编写公共提示模块的方法教程
2017/05/28 Javascript
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
原生JS封装animate运动框架的实例
2017/10/12 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
angular4强制刷新视图的方法
2018/10/09 Javascript
elementUI Tree 树形控件的官方使用文档
2019/04/25 Javascript
小程序Scroll-view上拉滚动刷新数据
2020/06/21 Javascript
跟老齐学Python之Import 模块
2014/10/13 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
Python实现Dijkstra算法
2018/10/17 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
Python类中的装饰器在当前类中的声明与调用详解
2020/04/15 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
新西兰航空中国官网:Air New Zealand China
2018/07/24 全球购物
J2EE面试题大全
2016/08/06 面试题
司机辞职报告范文
2014/01/20 职场文书
2015年元旦晚会活动总结(学生会)
2014/11/28 职场文书
纯html+css实现打字效果
2021/08/02 HTML / CSS