HTML5培训之JavaScript容易犯的十个小错误

2018-02-07 14:15:50 652浏览

在现如今，随着国内互联网开发技术飞速的发展，如HTML5开发，首先想到的就是JavaScript，目前JS已经成为了网页编辑的核心。尤其是过去的几年，互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。但是JS的真实功能却比很多人想象的要更加多样、复杂。下面我们一起来看一下关于JavaScript中容易犯的一些小错误吧。

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

随着近些年js编程不断地复杂化，功能多样化，对于一个程序结构的内部指引、引用也逐渐变多起来下面让我们一起来看这一段代码：

Game.prototype.restart=function(){

this.clearLocalStorage();

this.timer=setTimeout(function(){

this.clearBoard();

},0);

};

运行上面的代码将会出现如下错误：

UncaughtTypeError:undefinedisnotafunction

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

下面提供两种解决方案。第一种比较简单直接的方法便是，把this存储到一个变量当中，这样他就可以在不同的环境背景中被继承下来：

Game.prototype.restart=function(){

this.clearLocalStorage();

varself=this;

this.timer=setTimeout(function(){

self.clearBoard();

},0);

};

第二种方法便是用bind()的方法，不过这个相比上一种要复杂一些，对于不熟悉bind()的同学可以在微软官方查看它的使用方法：msdn.microsoft.com/zh-cn/library/ff841995

Game.prototype.restart=function(){

this.clearLocalStorage();

this.timer=setTimeout(this.reset.bind(this),0);

};

Game.prototype.reset=function(){

this.clearBoard();

};

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

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

另一种易犯的错误，便是带着其他编程语言的思维，认为在JS中，也存在生命周期这么一说。请看下面的代码：

for(vari=0;i<10;i++){

/*...*/

}

console.log(i);

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

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

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

常见错误三：内存泄露

内存泄露在js变成中几乎是一个无法避免的问题。如果不是特别细心的话，在最后的检查过程中，肯定会出现各种内存泄露问题。下面我们就来举例说明一下：

vartheThing=null;

varreplaceThing=function(){

varpriorThing=theThing;

varunused=function(){

if(priorThing){

console.log("hi");

}

};

theThing={

longStr:newArray(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);

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元素是一步花费很大的操作。而批量增加对系统的花销更是不菲。一个比较好的批量增加的办法便是使用documentfragments：

vardiv=document.getElementsByTagName("my_div");

varfragment=document.createDocumentFragment();

for(vare=0;e<elems.length;e++){

fragment.appendChild(elems[e]);

}

div.appendChild(fragment.cloneNode(true));

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

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

请大家看以下代码：

varelements=document.getElementsByTagName('input');

varn=elements.length;

for(vari=0;i<n;i++){

elements[i].onclick=function(){

console.log("Thisiselement#"+i);

};

}

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

我们可以通过下面这段代码来实现真正正确的效果：

varelements=document.getElementsByTagName('input');

varn=elements.length;

varmakeHandler=function(num){

returnfunction(){

console.log("Thisiselement#"+num);

};

};

for(vari=0;i<n;i++){

elements[i].onclick=makeHandler(i+1);

}

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

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

很大一部分的js开发者都不能完全掌握原型的继承问题。下面具一个例子来说明：

BaseObject=function(name){

if(typeofname!=="undefined"){

this.name=name;

}else{

this.name='default'

}

};

这段代码看起来很简单。如果你有name值，则使用它。如果没有，则使用‘default’:

varfirstObj=newBaseObject();

varsecondObj=newBaseObject('unique');

console.log(firstObj.name);//->Resultsin'default'

console.log(secondObj.name);//->Resultsin'unique'

但是如果我们执行delete语句呢:

deletesecondObj.name;

我们会得到:

console.log(secondObj.name);//->结果是'undefined'

但是如果能够重新回到‘default’状态不是更好么?其实要想达到这样的效果很简单，如果我们能够使用原型继承的话:

BaseObject=function(name){

if(typeofname!=="undefined"){

this.name=name;

}

};

BaseObject.prototype.name='default';

在这个版本中,BaseObject继承了原型中的name属性,被设置为了'default'.。这时，如果构造函数被调用时没有参数，则会自动设置为default。相同地，如果name属性被从BaseObject移出，系统将会自动寻找原型链，并且获得'default'值：

varthirdObj=newBaseObject('unique');

console.log(thirdObj.name);//->Resultsin'unique'

deletethirdObj.name;

console.log(thirdObj.name);//->Resultsin'default'

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

我们来看下面一段代码:

varMyObject=function(){}

MyObject.prototype.whoAmI=function(){

console.log(this===window?"window":"MyObj");};

varobj=newMyObject();

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

varwhoAmI=obj.whoAmI;

接下来为了确保一切都如我们所预测的进行，我们可以将whoAmI打印出来:

console.log(whoAmI);

结果是：

function(){

console.log(this===window?"window":"MyObj");

}

没有错误!

但是现在我们来查看一下两种引用的方法：

obj.whoAmI();//outputs"MyObj"(asexpected)

whoAmI();//outputs"window"(uh-oh!)

哪里出错了呢?

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

正确的编码方式应该是：

varMyObject=function(){}

MyObject.prototype.whoAmI=function(){

console.log(this===window?"window":"MyObj");

};

varobj=newMyObject();

obj.w=obj.whoAmI;//stillintheobjnamespace

obj.whoAmI();//outputs"MyObj"(asexpected)

obj.w();//outputs"MyObj"(asexpected)

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

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

setInterval("logTime()",1000);

setTimeout("logMessage('"+msgValue+"')",1000);

另一种方法是直接将函数作为参数传递进去：

setInterval(logTime,1000);

setTimeout(function(){

logMessage(msgValue);

},1000);

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

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

下面我们总结几条“strictmode”的优势：

让Debug更加容易：在正常模式下很多错误都会被忽视掉，“strictmode”模式会让Debug极致更加严谨。

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

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

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

让eval()函数更加安全。

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

以上就是关于扣丁学堂HTML5培训之JavaScript容易犯的十个小错误的详细介绍，最后想要工作不累就要不断的提升自己的技能，请关注扣丁学堂官网、微信等平台，扣丁学堂IT职业在线学习教育平台为您提供权威的HTML5视频教程系统，通过千锋扣丁学堂金牌讲师在线录制的第一套自适应HTML5在线视频课程系统，让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：559883758

【关注微信公众号获取更多学习资料】

查看更多关于“HTML5开发技术资讯”的相关文章>>