JavaScript的9个陷阱及评点分析


Posted in Javascript onMay 16, 2008

1. 最后一个逗号

如这段代码,注意最后一个逗号,按语言学角度来说应该是不错的(python的类似数据类型辞典dictionary就允许如此)。IE会报语法错误,但语焉不详,你只能用人眼从几千行代码中扫描。

<script>
  var theObj = {
        city : "Boston",
        state : "MA",
  }
</script> 
2. this的引用会改变

如这段代码:

<input type="button" value="Gotcha!" id="MyButton" >
<script>
var MyObject = function () {
    this.alertMessage = "Javascript rules";
    this.ClickHandler = function() {
        alert(this.alertMessage );
  }
}();
document.getElementById(”theText”).onclick =  MyObject.ClickHandler
</script>
并不如你所愿,答案并不是”JavaScript rules”。在执行MyObject.ClickHandler时,代码中红色这行,this的引用实际上指向的是document.getElementById("theText")的引用。可以这么解决:

<input type="button" value="Gotcha!" id="theText" >
<script>
var MyObject = function () {
    var self = this;
    this.alertMessage = “Javascript rules”;
    this.OnClick = function() {
        alert(self.value);
    }
}();
document.getElementById(”theText”).onclick =  MyObject.OnClick
</script>
实质上,这就是JavaScript作用域的问题。如果你看过,你会发现解决方案不止一种。

3. 标识盗贼

在JavaScript中不要使用跟HTML的id一样的变量名。如下代码:

<input type="button" id="TheButton">
<script>
    TheButton = get("TheButton");
</script>
IE会报对象未定义的错误。我只能说:IE sucks.

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,"_");

Javascript 相关文章推荐
javascript屏蔽右键代码
May 15 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
jQuery实现3D文字特效的方法
Mar 10 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
Dec 24 Javascript
jquery ajax局部加载方法详解(实现代码)
May 12 Javascript
js修改onclick动作的四种方法(推荐)
Aug 18 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
用js屏蔽被http劫持的浮动广告实现方法
Aug 10 Javascript
angular指令笔记ng-options的使用方法
Sep 18 Javascript
JS实现瀑布流布局
Oct 21 Javascript
vue导出html、word和pdf的实现代码
Jul 31 Javascript
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
认识延迟时间为0的setTimeout
May 16 #Javascript
用函数式编程技术编写优美的 JavaScript_ibm
May 16 #Javascript
Javascript模块模式分析
May 16 #Javascript
Dom加载让图片加载完再执行的脚本代码
May 15 #Javascript
直接生成打开窗口代码,不必下载
May 14 #Javascript
地震发生中逃生十大法则
May 12 #Javascript
通过修改referer下载文件的方法
May 11 #Javascript
You might like
Cakephp 执行主要流程
2010/03/24 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
php外部执行命令函数用法小结
2016/10/11 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
通过javascript设置css属性的代码
2009/12/28 Javascript
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
Javascript 加载和执行-性能提高篇
2012/12/28 Javascript
jquery 操作iframe的几种方法总结
2013/12/13 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
jQuery中removeProp()方法用法实例
2015/01/05 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
python下os模块强大的重命名方法renames详解
2017/03/07 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
python数据处理 根据颜色对图片进行分类的方法
2018/12/08 Python
在numpy矩阵中令小于0的元素改为0的实例
2019/01/26 Python
python 模拟银行转账功能过程详解
2019/08/06 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
eBay加拿大站:eBay.ca
2019/06/20 全球购物
毕业评语大全
2014/05/04 职场文书
音乐教师求职信范文
2015/03/20 职场文书
公司地址变更通知
2015/04/25 职场文书
2015年煤矿安全工作总结
2015/05/23 职场文书