十个JS中会出现的常见错误.docxVIP

常见错误一：对于this关键词的不正确引用 　　我曾经听一位喜剧演员说过： “我从未在这里，因为我不清楚这里是哪里，是除了那里之外的地方吗？” 　　这句话或多或少地暗喻了在js开发中开发者对于this关键字的使用误区。This指代的是什么？它和日常英语口语中的this是一个意思吗？ 　　随着近些年js编程不断地复杂化，功能多样化，对于一个程序结构的内部指引、引用也逐渐变多起来 　　下面让我们一起来看这一段代码： Gtotype.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存储到一个变量当中，这样他就可以在不同的环境背景中被继承下来： Gtotype.restart = function () { this.clearLocalStorage(); var self = this; this.timer = setTimeout(function(){ self.clearBoard();}, 0); }; 　　第二种方法便是用bind()的方法，不过这个相比上一种要复杂一些，对于不熟悉bind()的同学可以在微软官方查看它的使用方法： HYPERLINK /zh-cn/library/ff841995 /zh-cn/library/ff841995 Gtotype.restart = function () { this.clearLocalStorage(); this.timer = setTimeout(this.reset.bind(this), 0); }; Gtotype.reset = function(){ this.clearBoard();}; 　　上面的例子中，两个this均指代的是Gtotype。 　　常见错误二：传统编程语言的生命周期误区 　　另一种易犯的错误，便是带着其他编程语言的思维，认为在JS中，也存在生命周期这么一说。请看下面的代码： for (var i = 0; i 10; i++) { /* ... */ } console.log(i); 　　如果你认为在运行console.log()?时肯定会报出?undefined?错误，那么你就大错特错了。我会告诉你其实它会返回 10吗。 　　当然，在许多其他语言当中，遇到这样的代码，肯定会报错。因为i明显已经超越了它的生命周期。在for中定义的变量在循环结束后，它的生命也就结束了。但是在js中，i的生命还会继续。这种现象叫做? HYPERLINK /en-US/docs/Web/JavaScript/Reference/Statements/var \l var_hoisting 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 () {