Javascript方法:this&;那个

Javascript方法:this&;那个,javascript,object,methods,this,Javascript,Object,Methods,This,第一个问题 我正在尝试Javascript对象。这是我的密码: function main(){ document.onkeydown = hero.keyListener; hero.move(); hero.counter(); } var hero = { dx: undefined, dy: undefined, keyListener: function (e) { this.dy = 100; },

第一个问题

我正在尝试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;
    }   
};
移动方法会更新
this.dx
,但按键时keyListener不会更新
this.dy

如果我像这样更改keyListener,它会起作用:

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

为什么移动方法适用于
this
而不适用于keyListener?

在JavaScript中,
this
默认情况下不绑定到对象;它是由上下文设置的。在这种情况下,
将是
文档
。解决此问题的一种方法是绑定函数,使
始终是
英雄

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

注意:仅在较新的浏览器中可用。

JavaScript中的
运算符并不总是遵循预期的范围规则

这篇文章将有助于解释正在发生的事情:

答案与。