以下是JavaScript容易犯错的九个陷阱。

2024-02-17 09:48

本文主要是介绍以下是JavaScript容易犯错的九个陷阱。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

转自网络,可能是微信当时保存下来了,原地址不记得了,如果有侵权请联系我,361260796@qq.com


虽然不是什么很高深的技术问题,但注意一下,会使您的编程轻松些,即所谓make life easier,qpsh.com现对某些陷阱会混杂一些评点。 


 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,"_");mouseout意味着mousein 
事实上,这是由于事件冒泡导致的。IE中有mouseenter和mouseleave,但不是标准的。作者在此建议大家使用库比如YU I(其他的库也可以)来解决问题。 


5,parseInt是基于进制体系的 

这个是常识,可是很多人给忽略了parseInt还有第二个参数,用以指明进制。比如,parseInt("09"),如果你认为答案是9,那就错了。
因为,在此,字符串以0开头,parseInt以八进制来处理它,
在八进制中,09是非法,返回false,布尔值false转化成数值就是0. 因此,正确的做法是parseInt("09", 10).  


6, 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会带来危害的一个例证。 


7,事件处理器的陷阱 



这其实只会存在使用作为对象属性的事件处理器才会存在的问题。比如window.onclick = MyOnClickMethod这样的代码,
这会复写掉之前的window.onclick事件,还可能导致IE的内容泄露(sucks again)。在IE还没有支持DOM 2的事件注册之前,
作者建议使用库来解决问题,比如使用YUI: 


YAHOO.util.Event.addListener(window, "click", MyOnClickMethod);这应该也属于常识问题,但新手可能容易犯错。 


8,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容易犯错的九个陷阱。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/717403

相关文章

Java实现字符串大小写转换的常用方法

《Java实现字符串大小写转换的常用方法》在Java中,字符串大小写转换是文本处理的核心操作之一,Java提供了多种灵活的方式来实现大小写转换,适用于不同场景和需求,本文将全面解析大小写转换的各种方法... 目录前言核心转换方法1.String类的基础方法2. 考虑区域设置的转换3. 字符级别的转换高级转换

SpringBoot简单整合ElasticSearch实践

《SpringBoot简单整合ElasticSearch实践》Elasticsearch支持结构化和非结构化数据检索,通过索引创建和倒排索引文档,提高搜索效率,它基于Lucene封装,分为索引库、类型... 目录一:ElasticSearch支持对结构化和非结构化的数据进行检索二:ES的核心概念Index:

C++ move 的作用详解及陷阱最佳实践

《C++move的作用详解及陷阱最佳实践》文章详细介绍了C++中的`std::move`函数的作用,包括为什么需要它、它的本质、典型使用场景、以及一些常见陷阱和最佳实践,感兴趣的朋友跟随小编一起看... 目录C++ move 的作用详解一、一句话总结二、为什么需要 move?C++98/03 的痛点⚡C++

Java方法重载与重写之同名方法的双面魔法(最新整理)

《Java方法重载与重写之同名方法的双面魔法(最新整理)》文章介绍了Java中的方法重载Overloading和方法重写Overriding的区别联系,方法重载是指在同一个类中,允许存在多个方法名相同... 目录Java方法重载与重写:同名方法的双面魔法方法重载(Overloading):同门师兄弟的不同绝

Spring配置扩展之JavaConfig的使用小结

《Spring配置扩展之JavaConfig的使用小结》JavaConfig是Spring框架中基于纯Java代码的配置方式,用于替代传统的XML配置,通过注解(如@Bean)定义Spring容器的组... 目录JavaConfig 的概念什么是JavaConfig?为什么使用 JavaConfig?Jav

Java数组动态扩容的实现示例

《Java数组动态扩容的实现示例》本文主要介绍了Java数组动态扩容的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 目录1 问题2 方法3 结语1 问题实现动态的给数组添加元素效果,实现对数组扩容,原始数组使用静态分配

Java中ArrayList与顺序表示例详解

《Java中ArrayList与顺序表示例详解》顺序表是在计算机内存中以数组的形式保存的线性表,是指用一组地址连续的存储单元依次存储数据元素的线性结构,:本文主要介绍Java中ArrayList与... 目录前言一、Java集合框架核心接口与分类ArrayList二、顺序表数据结构中的顺序表三、常用代码手动

JAVA项目swing转javafx语法规则以及示例代码

《JAVA项目swing转javafx语法规则以及示例代码》:本文主要介绍JAVA项目swing转javafx语法规则以及示例代码的相关资料,文中详细讲解了主类继承、窗口创建、布局管理、控件替换、... 目录最常用的“一行换一行”速查表(直接全局替换)实际转换示例(JFramejs → JavaFX)迁移建

Spring Boot Interceptor的原理、配置、顺序控制及与Filter的关键区别对比分析

《SpringBootInterceptor的原理、配置、顺序控制及与Filter的关键区别对比分析》本文主要介绍了SpringBoot中的拦截器(Interceptor)及其与过滤器(Filt... 目录前言一、核心功能二、拦截器的实现2.1 定义自定义拦截器2.2 注册拦截器三、多拦截器的执行顺序四、过

JAVA线程的周期及调度机制详解

《JAVA线程的周期及调度机制详解》Java线程的生命周期包括NEW、RUNNABLE、BLOCKED、WAITING、TIMED_WAITING和TERMINATED,线程调度依赖操作系统,采用抢占... 目录Java线程的生命周期线程状态转换示例代码JAVA线程调度机制优先级设置示例注意事项JAVA线程