JavaScript容易犯错的九个陷阱
以下是JavaScript容易犯错的九个陷阱。虽然不是什么很高深的技术问题,但注意一下,会使您的编程轻松些,即所谓make life easier. 以及对某些陷阱会混杂一些评点。
1. 最后一个逗号
如这段代码,注意最后一个逗号,按语言学角度来说应该是不错的(python的类似数据类型辞典dictionary就允许如此)。IE会报语法错误,但语焉不详,你只能用人眼从几千行代码中扫描。
以下是引用片段:
var theObj = {
city : "Boston",
state : "MA",
}
2. this的引用会改变
如这段代码:
以下是引用片段:
<input type="button" value="Gotcha!" id="MyButton" >
1var MyObject = function () {
2 this.alertMessage = "Javascript rules";
3 this.ClickHandler = function() {
4 alert(this.alertMessage );
5 }
6 }();
7 document.getElementById(”theText”).onclick = MyObject.ClickHandler
8
并不如你所愿,答案并不是”JavaScript rules”。在执行MyObject.ClickHandler时,代码中红色这行,this的引用实际上指向的是document.getElementById("theText")的引用。可以这么解决:
以下是引用片段:
<input type="button" value="Gotcha!" id="theText" >
1var MyObject = function () {
2 var self = this;
3 this.alertMessage = “Javascript rules”;
4 this.OnClick = function() {
5 alert(self.value);
6 }
7 }();
8 document.getElementById(”theText”).onclick = MyObject.OnClick
9
实质上,这就是JavaScript作用域的问题。如果你看过,你会发现解决方案不止一种。
3. 标识盗贼
在JavaScript中不要使用跟HTML的id一样的变量名。如下代码:
以下是引用片段:
<input type="button" id="TheButton">
<script>
TheButton = get("TheButton");
</script>
IE会报对象未定义的错误。
4. 字符串只替换第一个匹配
如下代码:
以下是引用片段:
<script>
var fileName = "This is a title".replace(" ","_");
</script>
而实际上,结果是”This_is a title“. 在JavaScript中,String.replace的第一个参数应该是正则表达式。所以,正确的做法是这样:
以下是引用片段:
var fileName = "This is a title".replace(/ /g,"_");
5. mouseout意味着mousein
事实上,这是由于事件冒泡导致的。IE中有mouseenter和mouseleave,但不是标准的。在此建议大家使用库比如YUI来解决问题。
6. parseInt是基于进制体系的
这个是常识,可是很多人给忽略了parseInt还有第二个参数,用以指明进制。比如,parseInt("09"),如果你认为答案是9,那就错了。因为,在此,字符串以0开头,parseInt以八进制来处理它,在八进制中,09是非法,返回false,布尔值false转化成数值就是0. 因此,正确的做法是parseInt("09", 10).
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的陷阱还有很多很多,大多是由于解析器的实现不到位而引起。
转自网上
转载于:https://www.cnblogs.com/rayking/archive/2008/09/16/1291532.html
JavaScript容易犯错的九个陷阱相关推荐
- 《统计会犯错——如何避免数据分析中的统计陷阱》—第2章置信区间的优势
本节书摘来自异步社区<统计会犯错--如何避免数据分析中的统计陷阱>一书中的第2章置信区间的优势,作者[美]Alex Reinhart(亚历克斯·莱因哈特),更多章节内容可以访问云栖社区&q ...
- 《统计会犯错——如何避免数据分析中的统计陷阱》—第2章膨胀的真理
本节书摘来自异步社区<统计会犯错--如何避免数据分析中的统计陷阱>一书中的第2章膨胀的真理,作者[美]Alex Reinhart(亚历克斯·莱因哈特),更多章节内容可以访问云栖社区&quo ...
- javaScript初学者易错点
大家好,这是我在博客园写的第一篇博文.作为一名前端开发初学者,由于经验不足,水平有限,在做项目的过程中总会遇到这样或那样的问题,每每这时候,我都比较喜欢到博客园这里来寻求解决方案,结果也总是能找到满意 ...
- 正面刚CNN,Transformer居然连犯错都像人类
点击上方"视学算法",选择加"星标"或"置顶" 重磅干货,第一时间送达 梦晨 水木番 发自 凹非寺 量子位 报道 | 公众号 QbitAI ...
- 犯错是成为技术专家的必要条件
说到犯错,可能有人会为之紧张,可是犯错是成为一个技术专家的必要条件. 犯错说明我们有什么东西没有掌握或是没有注意到,因此,是一个提高自己的机会.有些工程师害怕犯错,为什么呢?因为怕犯了错使得自己的绩效 ...
- java中最容易犯错的特殊字符
问题背景 能准确说出下面的java 执行完毕后会打印出什么? System.out.println(String.class.getName()+ ".class");System ...
- m_Orchestrate learning system---二十、如何写代码不容易犯错
m_Orchestrate learning system---二十.如何写代码不容易犯错 一.总结 一句话总结:能排序多排序 这次查错的启示: 1.代码数据更规整:要是取出的数据排序的话可以减少很多 ...
- 新驾考科目三有四个地方易犯错 多名教练提供对策
驾考科目三 四个地方易犯错 多名驾校教练为学员分析原因提供对策 "现在电子评判,比起原来人工评判,更客观,更公平."有驾校教练把自己这两天当安全员参加考试的经验拿出来与学员们分享. ...
- 电子路考容易犯错的五大细节
正在学车的你,知道在电子路考中哪些是考生常犯的错误吗?下面,小编为大家带来学车考生参加科目三考试特别容易犯错的地方,尤其是不按规定使用转向灯和在超车时不能根据道路交通情况合理选择行车道或速度这两项犯错 ...
最新文章
- 车联网,挖掘数据价值
- App is not indexable by Google Search; consider adding at least one Activity with an ACTION-VIEW int
- Spring中使用缓存时你应该知道的知识
- python 通过title判断_利用Python模拟GitHub登录
- leetcode 213. 打家劫舍 II(dp)
- Android中土司(Toast)的使用
- leetcode 三数之和 python_16.leetcode题目讲解(Python):最接近的三数之和
- Color the ball(HDU-1556)
- 接口和抽象类的区别。
- 拓端tecdat|R语言蒙特卡洛计算和快速傅立叶变换计算矩生成函数
- python正则表达式基础
- HashMap底层原理源码分析
- 用友T1-商贸宝库存商品明细账
- 粒子特效 代码(龙卷风)
- AT89C51单片机共阳极数码管动态显示(汇编语言)
- mysql sending data 耗时_mysql查询语句出现sending data耗时解决
- 广告竞价-广义第二出价
- 桌面文件不见了怎么恢复
- javascript常用工具类的封装
- 项目 Linux 部署 之 配置 PL/SQL Developer 远程连...
热门文章
- 建造者模式(Builder Pattern)简单随笔
- java请求header_java中处理header请求以及跟cookie相关的一些细节
- leetcode算法题--把数字翻译成字符串
- pacman安装php的位置,PacMan 01——地图的搭建
- c 多文件全局变量_C/CPP : static 关键字 及 变量函数的不同
- Visual C++ Windows 用来定位 DLL 的搜索路径
- Socket连接与HTTP连接
- 阿里云高级总监谈超大规模超高性能分布式快存储系统
- tp3.2 连接两个数据库
- DotNet指定文件显示的尺寸