以下是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

相关文章

Spring Boot整合Redis注解实现增删改查功能(Redis注解使用)

《SpringBoot整合Redis注解实现增删改查功能(Redis注解使用)》文章介绍了如何使用SpringBoot整合Redis注解实现增删改查功能,包括配置、实体类、Repository、Se... 目录配置Redis连接定义实体类创建Repository接口增删改查操作示例插入数据查询数据删除数据更

Java Lettuce 客户端入门到生产的实现步骤

《JavaLettuce客户端入门到生产的实现步骤》本文主要介绍了JavaLettuce客户端入门到生产的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要... 目录1 安装依赖MavenGradle2 最小化连接示例3 核心特性速览4 生产环境配置建议5 常见问题

Java使用Swing生成一个最大公约数计算器

《Java使用Swing生成一个最大公约数计算器》这篇文章主要为大家详细介绍了Java使用Swing生成一个最大公约数计算器的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下... 目录第一步:利用欧几里得算法计算最大公约数欧几里得算法的证明情形 1:b=0情形 2:b>0完成相关代码第二步:加

Java 的ArrayList集合底层实现与最佳实践

《Java的ArrayList集合底层实现与最佳实践》本文主要介绍了Java的ArrayList集合类的核心概念、底层实现、关键成员变量、初始化机制、容量演变、扩容机制、性能分析、核心方法源码解析、... 目录1. 核心概念与底层实现1.1 ArrayList 的本质1.1.1 底层数据结构JDK 1.7

Java Map排序如何按照值按照键排序

《JavaMap排序如何按照值按照键排序》该文章主要介绍Java中三种Map(HashMap、LinkedHashMap、TreeMap)的默认排序行为及实现按键排序和按值排序的方法,每种方法结合实... 目录一、先理清 3 种 Map 的默认排序行为二、按「键」排序的实现方式1. 方式 1:用 TreeM

Java中流式并行操作parallelStream的原理和使用方法

《Java中流式并行操作parallelStream的原理和使用方法》本文详细介绍了Java中的并行流(parallelStream)的原理、正确使用方法以及在实际业务中的应用案例,并指出在使用并行流... 目录Java中流式并行操作parallelStream0. 问题的产生1. 什么是parallelS

Java中Redisson 的原理深度解析

《Java中Redisson的原理深度解析》Redisson是一个高性能的Redis客户端,它通过将Redis数据结构映射为Java对象和分布式对象,实现了在Java应用中方便地使用Redis,本文... 目录前言一、核心设计理念二、核心架构与通信层1. 基于 Netty 的异步非阻塞通信2. 编解码器三、

SpringBoot基于注解实现数据库字段回填的完整方案

《SpringBoot基于注解实现数据库字段回填的完整方案》这篇文章主要为大家详细介绍了SpringBoot如何基于注解实现数据库字段回填的相关方法,文中的示例代码讲解详细,感兴趣的小伙伴可以了解... 目录数据库表pom.XMLRelationFieldRelationFieldMapping基础的一些代

一篇文章彻底搞懂macOS如何决定java环境

《一篇文章彻底搞懂macOS如何决定java环境》MacOS作为一个功能强大的操作系统,为开发者提供了丰富的开发工具和框架,下面:本文主要介绍macOS如何决定java环境的相关资料,文中通过代码... 目录方法一:使用 which命令方法二:使用 Java_home工具(Apple 官方推荐)那问题来了,

Java HashMap的底层实现原理深度解析

《JavaHashMap的底层实现原理深度解析》HashMap基于数组+链表+红黑树结构,通过哈希算法和扩容机制优化性能,负载因子与树化阈值平衡效率,是Java开发必备的高效数据结构,本文给大家介绍... 目录一、概述:HashMap的宏观结构二、核心数据结构解析1. 数组(桶数组)2. 链表节点(Node