JavaScript中常见陷阱小结
更新时间：2010年04月27日 17:03:38 作者：
JavaScript中常见陷阱，都是一些实际应用中，需要注意的地方，需要的朋友可以参考下。
你所创建的所有函数都是区分大小写的
单引号('字符串')和双引号("字符串")在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中没有特殊的区别,都可以用来创建字符串.但作为一般原则,大多数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元素进行某些操作
}
相关文章
本文主要介绍了js实现仿购物车+ -效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-03-03
这篇文章主要为大家详细介绍了微信小程序自定义顶部导航组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了js中let能否完全替代IIFE，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，,需要的朋友可以参考下2019-06-06
图片懒加载也是比较常见的一种性能优化的方法，本篇文章主要介绍了原生JS实现图片懒加载(lazyload)实例，这里整理了详细的代码,有需要的小伙伴可以参考下2017-06-06
js中的原型与原型链应该是老生常谈的话题了，在前端面试中基本都是必问的一个问题，但是很多人还是稀里糊涂的，只知道其表层含义。本文将带大家深入了解JavaScript中的原型与原型链，感兴趣的可以学习一下2022-11-11
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
这篇文章主要介绍了详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现的相关资料,需要的朋友可以参考下2017-03-03
这篇文章主要介绍了Bootstrap入门书籍之（四）菜单、按钮及导航的相关资料,需要的朋友可以参考下2016-02-02
这篇文章主要为大家详细介绍了js实现简单的轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
面向对象编程(Object Oriented Programming)将现实世界中的复杂关系抽象成一个个对象,通过对象之间的分工合作对现实世界进行模拟2022-10-10
这篇文章主要介绍了5个你不知道的JavaScript字符串处理库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
最新评论