JavaScript的9个陷阱及评点(3)
作者:Realazy 来源:Realazy 时间:2007-08-28 15:10:00
7. for...in...会遍历所有的东西
有一段这样的代码:
var arr = [5,10,15]
var total = 1;
for ( var x in arr) {
total = total * arr[x];
}
运行得好好的,不是吗?但是有一天它不干了,给我返回的值变成了NaN, 晕。我只不过引入了一个库而已啊。原来是这个库改写了Array的prototype,这样,我们的arr平白无过多出了一个属性(方法),而for...in...会把它给遍历出来。所以这样做才是比较安全的:
for ( var x = 0; x < arr.length; x++) {
total = total * arr[x];
}
其实,这也是污染基本类的prototype会带来危害的一个例证。
8. 事件处理器的陷阱
这其实只会存在使用作为对象属性的事件处理器才会存在的问题。比如window.onclick = MyOnClickMethod这样的代码,这会复写掉之前的window.onclick事件,还可能导致IE的内容泄露(sucks again)。在IE还没有支持DOM 2的事件注册之前,作者建议使用库来解决问题,比如使用YUI:
YAHOO.util.Event.addListener(window, "click", MyOnClickMethod);
这应该也属于常识问题,但新手可能容易犯错。
9. Focus Pocus
新建一个input文本元素,然后把焦点挪到它上面,按理说,这样的代码应该很自然:
var newInput = document.createElement("input");
document.body.appendChild(newInput);
newInput.focus();
newInput.select();
但是IE会报错(sucks again and again)。理由可能是当你执行fouce()的时候,元素尚未可用。因此,我们可以延迟执行:
var newInput = document.createElement("input");
newInput.id = "TheNewInput";
document.body.appendChild(newInput);
setTimeout(function(){ //这里我使用闭包改写过,若有兴趣可以对比原文
document.getElementById('TheNewInput').focus();
document.getElementById('TheNewInput').select();}, 10);
在实践中,JavaScript的陷阱还有很多很多,大多是由于解析器的实现不到位而引起。这些东西一般都不会在教科书中出现,只能靠开发者之间的经验分享。谢天谢地,我们生活在网络时代,很多碰到的问题,一般都可以在Google中找到答案。
标签:JavaScript,陷阱
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Django中处理出错页面的方法
2023-08-28 14:41:41
keras 解决加载lstm+crf模型出错的问题
2022-06-11 01:27:27
Python BS4库的安装与使用详解
2021-06-30 02:00:22
![](https://img.aspxhome.com/file/2023/6/99556_0s.png)
python的dataframe转换为多维矩阵的方法
2021-08-19 08:59:09
![](https://img.aspxhome.com/file/2023/9/131399_0s.jpg)
将ASP纪录集输出成n列表格的方法
2008-03-19 13:27:00
教你用python从日期中获取年、月、日和星期等30种信息
2023-05-06 22:32:38
![](https://img.aspxhome.com/file/2023/1/102861_0s.png)
Python Requests 基本使用及Requests与 urllib 区别
2023-04-07 17:58:11
MySQL并发更新数据时的处理方法
2024-01-21 13:57:00
![](https://img.aspxhome.com/file/2023/9/71049_0s.jpg)
在Python 的线程中运行协程的方法
2021-03-10 18:06:38
![](https://img.aspxhome.com/file/2023/9/85289_0s.png)
Python判断文本中消息重复次数的方法
2022-11-12 10:00:54
python爬虫之scrapy框架详解
2023-08-23 13:16:52
![](https://img.aspxhome.com/file/2023/9/94109_0s.png)
python opencv肤色检测的实现示例
2023-06-13 20:31:58
![](https://img.aspxhome.com/file/2023/5/123515_0s.gif)
go语言编程之select信道处理示例详解
2024-04-26 17:16:14
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2021-04-06 09:29:53
一篇文章搞懂python混乱的切换操作与优雅的推导式
2023-09-15 00:25:10
![](https://img.aspxhome.com/file/2023/9/99549_0s.png)
python 合并列表的八种方法
2022-06-10 10:07:29
Python实现连点器的示例代码
2023-04-17 00:11:29
![](https://img.aspxhome.com/file/2023/8/124138_0s.png)
pycharm中venv文件夹自定义处理方式图解
2022-06-28 22:46:53
![](https://img.aspxhome.com/file/2023/8/132438_0s.png)
判断Session的过期时间 采用JavaScript实时显示剩余多少秒
2011-04-04 10:48:00
Python中垃圾回收和del语句详解
2023-12-20 01:02:55