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 相关文章推荐
利用Ext Js生成动态树实例代码
Sep 08 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
原生JS实现的雪花飘落动画效果
May 03 Javascript
微信小程序实现文字无限轮播效果
Dec 28 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
Element Rate 评分的使用方法
Jul 27 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
Vue 组件的挂载与父子组件的传值实例
Sep 02 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 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
Zerg建筑一览
2020/03/14 星际争霸
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
Zend Framework 2.0事件管理器(The EventManager)入门教程
2014/08/11 PHP
CodeIgniter集成smarty的方法详解
2016/05/26 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
FF IE浏览器修改标签透明度的方法
2014/01/27 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
手淘flexible.js框架使用和源代码讲解小结
2018/10/15 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
vue中注册自定义的全局js方法
2019/11/15 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[07:57]2018DOTA2国际邀请赛寻真——PSG.LGD凤凰浴火
2018/08/12 DOTA
python 默认参数问题的陷阱
2016/02/29 Python
python之virtualenv的简单使用方法(必看篇)
2017/11/25 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
Python制作动态字符图的实例
2019/01/27 Python
Scrapy框架爬取Boss直聘网Python职位信息的源码
2019/02/22 Python
pyqt5 删除layout中的所有widget方法
2019/06/25 Python
python笔记_将循环内容在一行输出的方法
2019/08/08 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
python seaborn heatmap可视化相关性矩阵实例
2020/06/03 Python
python源文件的字符编码知识点详解
2021/03/04 Python
值得收藏的HTML5资源(学习html5的朋友可以收藏下)
2010/07/20 HTML / CSS
市三好学生主要事迹
2014/01/28 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书
感恩父母主题班会
2015/08/12 职场文书
pytorch中的numel函数用法说明
2021/05/13 Python