JavaScript中易犯的小错误---“常见错误一”

对于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。