java犯的小错误_[Java教程]十个JavaScript中易犯的小错误,你中了几枪?

[Java教程]十个JavaScript中易犯的小错误,你中了几枪?

0 2015-06-01 12:00:19

序言

在今天,JavaScript已经成为了网页编辑的核心。尤其是过去的几年,互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。

如果初次打交道,很多人会觉得js很简单。确实,对于很多有经验的工程师,或者甚至是初学者而言,实现基本的js功能几乎毫无障碍。但是JS的真实功能却比很多人想象的要更加多样、复杂。JavaScript的许多细节规定会让你的网页出现很多意想不到的bug,搞懂这些bug,对于成为一位有经验的JS开发者很重要。

bc91bb04e6e9c61e24c974e4440db8f2.gif

常见错误一:对于this关键词的不正确引用

我曾经听一位喜剧演员说过:“我从未在这里,因为我不清楚这里是哪里,是除了那里之外的地方吗?”

这句话或多或少地暗喻了在js开发中开发者对于this关键字的使用误区。This指代的是什么?它和日常英语口语中的this是一个意思吗?

随着近些年js编程不断地复杂化,功能多样化,对于一个程序结构的内部指引、引用也逐渐变多起来

下面让我们一起来看这一段代码:Game.prototype.restart = function () { this.clearLocalStorage(); this.timer = setTimeout(function(){ this.clearBoard(); }, 0); };

运行上面的代码将会出现如下错误:Uncaught TypeError: undefined is not a function

这是为什么?this的调用和它所在的环境密切相关。之所以会出现上面的错误,是因为当你在调用 setTimeout()函数的时候, 你实际调用的是window.setTimeout(). 因此,在 setTimeout() 定义的函数其实是在window背景下定义的,而window中并没有 clearBoard() 这个函数方法。

下面提供两种解决方案。第一种比较简单直接的方法便是,把this存储到一个变量当中,这样他就可以在不同的环境背景中被继承下来:Game.prototype.restart = function () { this.clearLocalStorage(); var self = this; this.timer = setTimeout(function(){ self.clearBoard();}, 0); };

第二种方法便是用bind()的方法,不过这个相比上一种要复杂一些,对于不熟悉bind()的同学可以在微软官方查看它的使用方法:https://msdn.microsoft.com/zh-cn/library/ff841995Game.prototype.restart = function () { this.clearLocalStorage(); this.timer = setTimeout(this.reset.bind(this), 0); }; Game.prototype.reset = function(){ this.clearBoard();};

上面的例子中,两个this均指代的是Game.prototype。

常见错误二:传统编程语言的生命周期误区

另一种易犯的错误,便是带着其他编程语言的思维,认为在JS中,也存在生命周期这么一说。请看下面的代码:for (var i = 0; i < 10; i++) { /* ... */ } console.log(i);

如果你认为在运行console.log() 时肯定会报出 undefined 错误,那么你就大错特错了。我会告诉你其实它会返回 10吗。

当然,在许多其他语言当中,遇到这样的代码,肯定会报错。因为i明显已经超越了它的生命周期。在for中定义的变量在循环结束后,它的生命也就结束了。但是在js中,i的生命还会继续。这种现象叫做 variable hoisting。

而如果我们想要实现和其他语言一样的在特定逻辑模块中具有生命周期的变量,可以用let关键字。

常见错误三:内存泄露

内存泄露在js变成中几乎是一个无法避免的问题。如果不是特别细心的话,在最后的检查过程中,肯定会出现各种内存泄露问题。下面我们就来举例说明一下:var theThing = null; var replaceThing = function () { var priorThing = theThing; var unused = function () { if (priorThing) { console.log("hi"); } }; theThing = { longStr: new Array(1000000).join('*'), // someMethod: function () { console.log(someMessage); } }; }; setInterval(replaceThing, 1000);

如果运行上面的代码,你会发现你已经造成了大量的内存泄露,每秒泄露1M的内存,显然光靠GC(垃圾回收器)是无法帮助你的了。由上面的代码来看,似乎是longstr在每次replaceThing调用的时候都没有得到回收。这是为什么呢?

每一个theThing结构都含有一个longstr结构列表。每一秒当我们调用 replaceThing, 它就会把当前的指向传递给 priorThing. 但是到这里我们也会看到并没有什么问题,因为 priorThing 每回也是先解开上次函数的指向才会接受新的赋值。并且所有的这一切都是发生在 replaceThing 函数体当中,按常理来说当函数体结束之后,函数中的本地变量也将会被GC回收,也就不会出现内存泄露的问题了,但是为什么会出现上面的错误呢?

这是因为longstr的定义是在一个闭包中进行的,而它又被其他的闭包所引用,js规定,在闭包中引入闭包外部的变量时,当闭包结束时此对象无法被垃圾回收(GC)。关于在JS中的内存泄露问题可以查看http://javascript.info/tutorial/memory-leaks#memory-management-in-javascript

常见错误四:比较运算符

JavaScript中一个比较便捷的地方,便是它可以给每一个在比较运算的结果变量强行转化成布尔类型。但是从另一方面来考虑,有时候它也会为我们带来很多不便,下面的这些例子便是一些一直困扰很多程序员的代码实例:console.log(false == '0'); console.log(null == undefined); console.log(" \t\r\n" == 0); console.log('' == 0); // And these do too! if ({}) // ... if ([]) // ...

最后两行的代码虽然条件判断为空(经常会被人误认为转化为false),但是其实不管是{ }还是[ ]都是一个实体类,而任何的类其实都会转化为true。就像这些例子所展示的那样,其实有些类型强制转化非常模糊。因此很多时候我们更愿意用 === 和 !== 来替代== 和 !=, 以此来避免发生强制类型转化。. ===和!== 的用法和之前的== 和 != 一样,只不过他们不会发生类型强制转换。另外需要注意的一点是,当任何值与 NaN 比较的时候,甚至包括他自己,结果都是false。因此我们不能用简单的比较字符来决定一个值是否为 NaN 。我们可以用内置的 isNaN() 函数来辨别:console.log(NaN == NaN); // false console.log(NaN === NaN); // false console.log(isNaN(NaN)); // true

常见错误五:低效的DOM操作

js中的DOM基本操作非常简单,但是如何能有效地进行这些操作一直是一个难题。这其中最典型的问题便是批量增加DOM元素。增加一个DOM元素是一步花费很大的操作。而批量增加对系统的花销更是不菲。一个比较好的批量增加的办法便是使用 document fragments :var div = document.getElementsByTagName("my_div"); var fragment = document.createDocumentFragment(); for (var e = 0; e < elems.length; e++) { fragment.appendChild(elems[e]); } div.appendChild(fragment.cloneNode(true));

直接添加DOM元素是一个非常昂贵的操作。但是如果是先把要添加的元素全部创建出来,再把它们全部添加上去就会高效很多。

常见错误6:在for循环中的不正确函数调用

请大家看以下代码:var elements = document.getElementsByTagName('input');var n = elements.length; for (var i = 0; i < n; i++) { elements[i].onclick = function() { console.log("This is element #" + i); }; }

运行以上代码,如果页面上有10个按钮的话,点击每一个按钮都会弹出 “This is element #10”! 。这和我们原先预期的并不一样。这是因为当点击事件被触发的时候,for循环早已执行完毕,i的值也已经从0变成了。

我们可以通过下面这段代码来实现真正正确的效果:var elements = document.getElementsByTagName('input'); var n = elements.length; var makeHandler = function(num) { // outer function return function() { console.log("This is element #" + num); }; }; for (var i = 0; i < n; i++) { elements[i].onclick = makeHandler(i+1); }

在这个版本的代码中, makeHandler 在每回循环的时候都会被立即执行,把i+1传递给变量num。外面的函数返回里面的函数,而点击事件函数便被设置为里面的函数。这样每个触发函数就都能够是用正确的i值了。

常见错误7:原型继承问题

很大一部分的js开发者都不能完全掌握原型的继承问题。下面具一个例子来说明:BaseObject = function(name) { if(typeof name !== "undefined") { this.name = name; } else { this.name = 'default' } };

这段代码看起来很简单。如果你有name值,则使用它。如果没有,则使用 ‘default’:var firstObj = new BaseObject(); var secondObj = new BaseObject('unique'); console.log(firstObj.name); // -> 结果是'default' console.log(secondObj.name); // -> 结果是 'unique'

但是如果我们执行delete语句呢:delete secondObj.name;

我们会得到:console.log(secondObj.name); // -> 结果是 'undefined'

但是如果能够重新回到 ‘default’状态不是更好么? 其实要想达到这样的效果很简单,如果我们能够使用原型继承的话:BaseObject = function (name) { if(typeof name !== "undefined") { this.name = name; } }; BaseObject.prototype.name = 'default';

在这个版本中, BaseObject 继承了原型中的name 属性, 被设置为了 'default'.。这时,如果构造函数被调用时没有参数,则会自动设置为 default。相同地,如果name 属性被从BaseObject移出,系统将会自动寻找原型链,并且获得 'default'值:var thirdObj = new BaseObject('unique'); console.log(thirdObj.name); delete thirdObj.name; console.log(thirdObj.name); // -> 结果是 'default'

常见错误8:为实例方法创建错误的指引

我们来看下面一段代码:var MyObject = function() {} MyObject.prototype.whoAmI = function() { console.log(this === window ? "window" : "MyObj"); }; var obj = new MyObject();

现在为了方便起见,我们新建一个变量来指引 whoAmI 方法, 因此我们可以直接用 whoAmI() 而不是更长的obj.whoAmI():var whoAmI = obj.whoAmI;

接下来为了确保一切都如我们所预测的进行,我们可以将 whoAmI 打印出来:console.log(whoAmI);

结果是:function () { console.log(this === window ? "window" : "MyObj"); }

没有错误!

但是现在我们来查看一下两种引用的方法:obj.whoAmI(); // 输出 "MyObj" (as expected) whoAmI(); // 输出 "window" (uh-oh!)

哪里出错了呢?

原理其实和上面的第二个常见错误一样,当我们执行 var whoAmI = obj.whoAmI;的时候,新的变量 whoAmI 是在全局环境下定义的。因此它的this 是指window, 而不是obj!

正确的编码方式应该是:var MyObject = function() {} MyObject.prototype.whoAmI = function() { console.log(this === window ? "window" : "MyObj"); }; var obj = new MyObject(); obj.w = obj.whoAmI; // still in the obj namespace obj.whoAmI(); // 输出 "MyObj" (as expected) obj.w(); // 输出 "MyObj" (as expected)

常见错误9:用字符串作为setTimeout 或者 setInterval的第一个参数

首先我们要声明,用字符串作为这两个函数的第一个参数并没有什么语法上的错误。但是其实这是一个非常低效的做法。因为从系统的角度来说,当你用字符串的时候,它会被传进构造函数,并且重新调用另一个函数。这样会拖慢程序的进度。setInterval("logTime()", 1000); setTimeout("logMessage('" + msgValue + "')", 1000);

另一种方法是直接将函数作为参数传递进去:setInterval(logTime, 1000); setTimeout(function() { logMessage(msgValue); }, 1000);

常见错误10:忽略 “strict mode”的作用

“strict mode” 是一种更加严格的代码检查机制,并且会让你的代码更加安全。当然,不选择这个模式并不意味着是一个错误,但是使用这个模式可以确保你的代码更加准确无误。

下面我们总结几条“strict mode”的优势:

1. 让Debug更加容易:在正常模式下很多错误都会被忽视掉,“strict mode”模式会让Debug极致更加严谨。

2. 防止默认的全局变量:在正常模式下,给一个为经过声明的变量命名将会将这个变量自动设置为全局变量。在strict模式下,我们取消了这个默认机制。

3. 取消this的默认转换:在正常模式下,给this关键字指引到null或者undefined会让它自动转换为全局。在strict模式下,我们取消了这个默认机制。

4. 防止重复的变量声明和参数声明:在strict模式下进行重复的变量声明会被抱错,如(e.g., var object = {foo: "bar", foo: "baz"};) 同时,在函数声明中重复使用同一个参数名称也会报错,如 (e.g., function foo(val1, val2, val1){}),

5. 让eval()函数更加安全。

6. 当遇到无效的delete指令的事后报错:delete指令不能对类中未有的属性执行,在正常情况下这种情况只是默默地忽视掉,而在strict模式是会报错的。

结语

正如和其他的技术语言一样,你对JavaScript了解的的越深,知道它是如何运作,为什么这样运作,你才会熟练地掌握并且运用这门语言。相反地,如果你缺少对JS模式的认知的话,你就会碰上很多的问题。了解JS的一些细节上的语法或者功能将会有助于你提高编程的效率,减少变成中遇到的问题。

本文网址:http://www.shaoqun.com/a/119118.html

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:admin@shaoqun.com。

JavaScript

0

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/395713.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Kali渗透测试——利用metasploit攻击靶机WinXP SP1

搭建渗透测试环境 Kali攻击机 WinXP SP1 靶机 启动metasploit 跟windows RPC相关的漏洞 内部提供的漏洞攻击 靶机winxp sp1网络配置 查看虚拟机的NAT网段 配置WinXP SP1靶机的IP地址 执行漏洞利用 后漏洞利用&#xff1a;meterpreter> 靶机的信息 进程情况 查看到explorer.e…

创建响应式布局的优秀网格工具集锦《系列五》

在这篇文章中&#xff0c;我们为您呈现了一组优秀的网格工具清单。如果网页设计和开人员采用了正确的工具集&#xff0c;并基于一个灵活的网格架构&#xff0c;以及能够把响应图像应用到到设计之中&#xff0c;那么创建一个具备响应式的网站并不一定是一项艰巨的任务。enjoy! 您…

java 无侵入监控_MyPerf4J 一个高性能、无侵入的Java性能监控和统计工具

MyPerf4J一个针对高并发、低延迟应用设计的高性能且无侵入的实时Java性能监控和统计工具。 受 perf4j 和 TProfiler启发而来。MyPerf4J具有以下几个特性&#xff1a;无侵入: 采用JavaAgent方式&#xff0c;对应用程序完全无侵入&#xff0c;无需修改应用代码高性能: 性能消耗非…

javascript 减少回流

减少回流&#xff08;REFLOWS&#xff09; 当浏览器重新渲染文档中的元素时需要 重新计算它们的位置和几何形状&#xff0c;我们称之为回流。回流会阻塞用户在浏览器中的操作&#xff0c;因此理解提升回流时间是非常有帮助的。 回流时间图表 你应该批量地触发回流或重绘&#x…

转: 关于 ssl的建立链接的过程

转自&#xff1a; http://www.ruanyifeng.com/blog/2014/02/ssl_tls.html SSL/TLS协议运行机制的概述 作者&#xff1a; 阮一峰 日期&#xff1a; 2014年2月 5日 互联网的通信安全&#xff0c;建立在SSL/TLS协议之上。 本文简要介绍SSL/TLS协议的运行机制。文章的重点是设计思…

PHP 文件加密Zend Guard Loader 学习和使用(如何安装ioncube扩展对PHP代码加密)

一、大体流程图 二、PHP 项目文件加密 下表列出了Zend产品中的PHP版本及其内部API版本和Zend产品版本。 如何加密请往后看 三、如何使用 第一步&#xff1a;确认当前环境 Amai Phalcon 前&#xff0c;请确认您具备以下两个条件&#xff0c;如果您的环境不满足此条件&#xff0c…

php寻找文本,PHP文本数据库的搜索方法_php

//php文本数据库的搜索方法searchstr("/".preg_quote($searchstr)."/");//$searchstr是查找的关键字$recordsfile($file);//获取所有的记录数http://www.gaodaima.com/45906.htmlPHP文本数据库的搜索方法_php//$file是查找的数据文件$search_reocrdspreg_g…

bzoj 2178 圆的面积并 —— 辛普森积分

题目&#xff1a;https://www.lydsy.com/JudgeOnline/problem.php?id2178 先看到这篇博客&#xff1a;https://www.cnblogs.com/heisenberg-/p/6740654.html 好像本应算弓形面积、三角形面积之类的&#xff0c;但不会...于是用辛普森积分硬做... 参考了这篇博客&#xff1a;ht…

Charles抓包工具的使用

2019独角兽企业重金招聘Python工程师标准>>> 感谢唐巧分享的文章&#xff0c;受益匪浅 文章目录 1. 目录及更新说明2. Charles 限时优惠3. 简介4. 安装 Charles5. 将 Charles 设置成系统代理6. Charles 主界面介绍7. 过滤网络请求8. 截取 iPhone 上的网络封包 8.1. …

iOS开发——处理1000张图片的内存优化

一、项目需求 在实际项目中&#xff0c;用户在上传图片时&#xff0c;有时会一次性上传大量的图片。在上传图片前&#xff0c;我们要进行一系列操作&#xff0c;比如&#xff1a;旋转图片为正确方向&#xff0c;压缩图片等&#xff0c;这些操作需要将图片加载到内存中&#xff…

jquery ui php,php – 打开带有动态内容的jQuery UI对话框

我有一个关于jQuery UI对话框的问题,并显示数据库中的动态内容.所以我得到了一个web应用程序,我还需要创建一个管理模块来管理所有用户和其他信息.我创建了一个页面,显示列表中的所有用户,在每一行中我也创建了一个编辑按钮.我想这样做,当你按下用户的编辑按钮时,会打开一个对话…

MapReduce Input Split 输入分/切片

MapReduce Input Split&#xff08;输入分/切片&#xff09;详解 public static long getMaxSplitSize(JobContext context) { return context.getConfiguration().getLong(SPLIT_MAXSIZE, Long.MAX_VALUE); } 如果没有设置这maxsize默认是Long.MAX_VALUE public static long …

WPF自定义空心文字

WPF自定义空心文字 原文:WPF自定义空心文字首先创建一个自定义控件&#xff0c;继承自FrameworkElement&#xff0c;“Generic.xaml”中可以不添加样式。 要自定义空心文字&#xff0c;要用到绘制格式化文本FormattedText类。FormattedText对象提供的文本格式设置功能比WPF提供…

【转】UITableView详解(UITableViewCell

原文网址&#xff1a;http://www.kancloud.cn/digest/ios-1/107420 上一节中,我们定义的cell比较单一,只是单调的输入文本和插入图片,但是在实际开发中,有的cell上面有按钮,有的cell上面有滑动控件,有的cell上面有开关选项等等,具体参加下面2个图的对比: 我们可以通过…

时间模块和时间工具

一、time模块 三种格式 时间戳时间&#xff1a;浮点数 单位为秒 时间戳起始时间&#xff1a; 1970.1.1 0:0:0 英国伦敦时间 1970.1.1 8:0:0 我国(东8区) 结构化时间&#xff1a;元组(struct_time) 格式化时间&#xff1a;str数据类型的 1、常用方法 import timetime.sleep(secs…

php splqueue 5.5安装,解析PHP标准库SPL数据结构

SPL提供了双向链表、堆栈、队列、堆、降序堆、升序堆、优先级队列、定长数组、对象容器SplQueue 队列类进出异端&#xff0c;先进先出<?php $obj new SplQueue();//插入一个节点到top位置$obj->enqueue(1);$obj->enqueue(2);$obj->enqueue(3);/**SplQueue Object…

初识virtual memory

一、先谈几个重要的东西 virtual memory是一个抽象概念&#xff0c;书上的原文是"an abstraction of main memory known as virtual memory"&#xff08;参考资料p776&#xff09;。那么什么是抽象概念。下面说说我个人对这个东西的理解。 所谓抽象概念是指抽象出来的…

java闰年的年份,Java案例-判断给定年份是闰年

专注学子高考志愿填报&#xff0c;分享你所不知道信息。Java案例-判断给定年份是闰年案例描述编写程序&#xff0c;判断给定的某个年份是否是闰年。闰年的判断规则如下&#xff1a;(1)若某个年份能被4整除但不能被100整除&#xff0c;则是闰年。(2)若某个年份能被400整除&#…

通过path绘制点击区域

通过path绘制点击区域 效果 源码 https://github.com/YouXianMing/Animations // // TapDrawImageView.h // TapDrawImageView // // Created by YouXianMing on 16/5/9. // Copyright © 2016年 YouXianMing. All rights reserved. //#import <UIKit/UIKit.h> #…

Raft与MongoDB复制集协议比较

在一文搞懂raft算法一文中&#xff0c;从raft论文出发&#xff0c;详细介绍了raft的工作流程以及对特殊情况的处理。但算法、协议这种偏抽象的东西&#xff0c;仅仅看论文还是比较难以掌握的&#xff0c;需要看看在工业界的具体实现。本文关注MongoDB是如何在复制集中使用raft协…