Javascript 方法：this & that答案

【问题标题】：Javascript methods: this & thatJavascript 方法：this & that
【发布时间】：2012-05-19 02:32:10
【问题描述】：

这里是第一个问题。

我正在尝试 Javascript 对象。这是我的代码：

function main(){
    document.onkeydown = hero.keyListener;
    hero.move();
    hero.counter(); 
}
var hero = {
    dx: undefined,
    dy: undefined,
    keyListener: function (e) {
        this.dy = 100;
    },  
    move: function () {
        this.dx = 80;
    },
    counter: function() {
        document.getElementById("dxcounter").innerHTML = "Dx: "+ this.dx + " Dy: "+ this.dy;
    }   
};

move 方法会更新this.dx，但keyListener 不会在按下某个键时更新this.dy。

如果我像这样更改 keyListener 就可以了：

keyListener: function (e) {
    that = hero;
    that.dy = 100;
},

为什么 move 方法适用于 this 而不是 keyListener？

【问题讨论】：

答案和this one一样。

标签： javascript object methods this

【解决方案1】：

在 JavaScript 中，this 默认不绑定到对象；它是由上下文设置的。在这种情况下，this 将是 document。解决此问题的一种方法是绑定函数，使this 始终为hero：

document.onkeydown = hero.keyListener.bind(hero);

^{注意：bind 仅在更新的浏览器中可用。}

【讨论】：

【解决方案2】：

JavaScript 中的 this 运算符并不总是遵循您所期望的范围规则。

这篇文章将有助于解释发生了什么：http://unschooled.org/2012/03/understanding-javascript-this/

【讨论】：