事件监听器中this指代问题

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

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

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

function Square(x, y, dom) {
    this.x = x;
    this.y = y;
    this.dom = dom;
    this.direction = 0;
    this.dom.moveTo(this.x, this.y);
}

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

Square.prototype.go = function() {
    switch (this.direction) {
        case 0:
            this.x = this.x - 1 < 0 ? 0 : this.x - 1; //边界控制
            break;
        case 90:
            this.y = this.y + 1 > 9 ? 9 : this.y + 1;
            break;
        case 180:
            this.x = this.x + 1 > 9 ? 9 : this.x + 1;
            break;
        case 270:
            this.y = this.y - 1 < 0 ? 0 : this.y - 1;
            break;
        default:
            console.log("未知 direction");
    }
    console.log("this", this);
    this.dom.moveTo(this.x, this.y);
}

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

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

报错：

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

修正代码如下：

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

结果如图：

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

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