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 相关文章推荐
javascritp实现input输入框相关限制用法
Jun 29 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
angularJS提交表单(form)
Feb 09 Javascript
JavaScript识别网页关键字并进行描红的方法
Nov 09 Javascript
图解js图片轮播效果
Dec 20 Javascript
JS结合bootstrap实现基本的增删改查功能
Jul 22 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
vue自动化表单实例分析
May 06 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
vue实现滑动到底部加载更多效果
Oct 27 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 网上商城促销设计实例代码
2012/02/17 PHP
php简单smarty入门程序实例
2015/06/11 PHP
懒就要懒到底——鼠标自动点击(含时间判断)
2007/02/20 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
javascript轻量级库createjs使用Easel实现拖拽效果
2016/02/19 Javascript
JavaScript实现DOM对象选择器
2016/09/24 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
利用vueJs实现图片轮播实例代码
2017/06/03 Javascript
Vue仿手机qq的实例代码(demo)
2017/09/08 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
基于JavaScript实现猜数字游戏代码实例
2020/07/30 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
[03:56]显微镜下的DOTA2第十一期——鬼畜的死亡先知播音员
2014/06/23 DOTA
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
python重试装饰器的简单实现方法
2019/01/31 Python
linux安装python修改默认python版本方法
2019/03/31 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
浅析Python 抽象工厂模式的优缺点
2020/07/13 Python
学习Python爬虫的几点建议
2020/08/05 Python
如何一键升级Python所有包
2020/11/05 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
英国最大的婴儿监视器网上商店:Baby Monitors Direct
2018/04/24 全球购物
JPA的特点
2014/10/25 面试题
文员个人的求职信范文
2013/09/26 职场文书
财务部岗位职责
2013/11/19 职场文书
物业保安岗位职责
2014/07/02 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android