打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

开通VIP
JavaScript中常见陷阱小结

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元素进行某些操作}
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
JavaScript中的所有循环类型
JavaScript权威指南 第11章 样章
JavaScript最佳实践:性能
前端开发学习指南
以优美方式编写JavaScript代码
[书籍精读]《你不知道的JavaScript(下卷)》精读笔记分享
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服