总结javaScript常见错误.docxVIP

常见错误一：对于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()的同学可以在微软官方查看它的使用方法：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?(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 每回也是先