事件监听器中this指代问题

我们都知道，事件监听器中的this指代当前元素，换句话说，谁'点'的，就指谁；单一情况好理解，但是，当遇到原型链中的this时，我们有时候就会反应不过来。

今天写百度前端技术学院的题时，就遇到了这样一个问题，于是把它记下来，免得以后忘记。

首先定义了一个Square函数，代码如下：

1. function Square(x, y, dom) {
2. this.x = x;
3. this.y = y;
4. this.dom = dom;
5. this.direction = 0;
6. this.dom.moveTo(this.x, this.y);
7. }

接着在它的原型链上定义了一个函数：

1. Square.prototype.go = function() {
2. switch (this.direction) {
3. case 0:
4. this.x = this.x - 1 < 0 ? 0 : this.x - 1; //边界控制
5. break;
6. case 90:
7. this.y = this.y + 1 > 9 ? 9 : this.y + 1;
8. break;
9. case 180:
10. this.x = this.x + 1 > 9 ? 9 : this.x + 1;
11. break;
12. case 270:
13. this.y = this.y - 1 < 0 ? 0 : this.y - 1;
14. break;
15. default:
16. console.log('未知 direction');
17. }
18. console.log('this', this);
19. this.dom.moveTo(this.x, this.y);
20. }

接着需要把这个函数添加到事件监听器中，一开始的错误代码如下：

 convGo.addEventListener('click',square.go, false);

报错：

可以看出，当前的this引用为button,并非我们预期的square。分析：此时square.go只是一个引用，引用的是go函数本身，回调函数丢失this绑定，事件处理程序把回调函数的this强制绑定到触发事件的DOM元素上。（此处参考《你不知道的JavaScript（上）》P87）。

修正代码如下：

1. convGo.addEventListener('click', function() {
2. square.go(); //如果不将square.go()写在匿名函数里，而是直接写square.go,那么go函数里面的额this为convGo
3. }, false);

结果如图：

分析：将要调用的函数放在一个匿名函数里执行，根据调用位置，go函数里的this会应用隐式绑定。(感觉解释的不好，希望大家多多补充)

代码网址：https://github.com/discoveryLee/BasicTasks/tree/master/task25