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 相关文章推荐
Prototype Function对象 学习
Jul 12 Javascript
JS前端框架关于重构的失败经验分享
Mar 17 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
jQuery中contents()方法用法实例
Jan 08 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
Angular表单验证实例详解
Oct 20 Javascript
vue.js删除动态绑定的radio的指定项
Jun 02 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
express+vue+mongodb+session 实现注册登录功能
Dec 06 Javascript
浅谈webpack 四个核心概念之Entry
Jun 12 Javascript
解决vuecli3中img src 的引入问题
Aug 04 Javascript
AJAX学习笔记
May 18 Javascript
认识延迟时间为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
php 计划任务 检测用户连接状态
2012/03/29 PHP
PHP Curl出现403错误的解决办法
2014/05/29 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
jquery 学习笔记 传智博客佟老师附详细注释
2020/09/12 Javascript
Jquery实现由下向上展开效果的例子
2014/12/08 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
2017/03/02 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
JS/CSS实现字符串单词首字母大写功能
2019/09/03 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
浅析JavaScript预编译和暗示全局变量
2020/09/03 Javascript
利用H5api实现时钟的绘制(javascript)
2020/09/13 Javascript
JavaScript 中的六种循环方法
2021/01/06 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
解决PyCharm中光标变粗的问题
2017/08/05 Python
基于Python中单例模式的几种实现方式及优化详解
2018/01/09 Python
Windows下python3.7安装教程
2018/07/31 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
银行求职推荐信范文
2013/11/30 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
小学班主任培训方案
2014/06/04 职场文书
颐和园导游词400字
2015/01/30 职场文书
茶楼服务员岗位职责
2015/02/09 职场文书
公司借条范本
2015/05/25 职场文书
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server