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 相关文章推荐
js 通用javascript函数库整理
Aug 14 Javascript
基于jquery完美拖拽,可返回拖动轨迹
Mar 29 Javascript
jquery 合并内容相同的单元格(示例代码)
Dec 13 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
Apr 24 Javascript
jQuery插件实现适用于移动端的地址选择器
Feb 18 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
Jul 14 Javascript
关于json字符串与实体之间的严格验证代码
Nov 10 Javascript
详解JS: reduce方法实现 webpack多文件入口
Feb 14 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
认识延迟时间为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
饭制《星际争霸》Mod:优化游戏机制 增加新单位
2017/07/02 星际争霸
总结对比php中的多种序列化
2016/08/28 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
Json对象和字符串互相转换json数据拼接和JSON使用方式详细介绍(小结)
2016/10/25 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
JS实现简易贪吃蛇游戏
2020/08/24 Javascript
Vue实现随机验证码功能
2020/12/29 Vue.js
[47:45]DOTA2-DPC中国联赛 正赛 Phoenix vs Dragon BO3 第一场 2月26日
2021/03/11 DOTA
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
python tkinter窗口最大化的实现
2019/07/15 Python
基于Python下载网络图片方法汇总代码实例
2020/06/24 Python
python实现取余操作的简单实例
2020/08/16 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
python中字符串的编码与解码详析
2020/12/03 Python
中国综合性网上购物商城:当当(网上卖书起家)
2016/11/16 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
什么是动态端口(Dynamic Ports)?动态端口的范围是多少?
2014/12/12 面试题
学习决心书范文
2014/03/11 职场文书
农村党支部书记司法四风问题对照检查材料
2014/09/26 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
检讨书格式
2015/05/07 职场文书
党校培训学习心得体会
2016/01/06 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers