JavaScript中易犯的10个小错误.docx

JavaScript中易犯的10个小错误

JavaScript中易犯的10个小错误 在今天，JavaScript已经成为了。网页编辑的核心。尤其是过去的几年，互联网见证了在SPA开发、图形处理、交互等方面大量JS库的出现。下面YJBYS小编为你介绍10个JavaScript中易犯的小错误。 如果初次打交道，很多人会觉得js很简单。确实，对于很多有经验的工程师，或者甚至是初学者而言，实现基本的js功能几乎毫无障碍。但是JS的真实功能却比很多人想象的要更加多样、复杂。JavaScript的许多细节规定会让你的网页出现很多意想不到的bug，搞懂这些bug，对于成为一位有经验的JS开发者很重要。 常见错误一：对于this关键词的不正确引用 我曾经听一位喜剧演员说过： “我从未在这里，因为我不清楚这里是哪里，是除了那里之外的地方吗?” 这句话或多或少地暗喻了在js开发中开发者对于this关键字的使用误区。This指代的是什么?它和日常英语口语中的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()的同学可以在微软官方查看它的使用方法：https://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(){c