Question

打算在浏览器上使用此选项。

function keyboardJS () {
    this.keys = {};
    this.tempASCIIkey;
    this.tempCHARkey;
}
keyboardJS.prototype = {
    keyIsUp : function (evt) {
      console.log(this);
      this.ASCIIkey = evt.keyCode;
      this.CHARkey = String.fromCharCode(this.ASCIIkey);
      this.keys[this.CHARkey] = false;
      console.log(this.CHARkey + " is now " + this.keys[this.CHARkey]);
    },
    keyIsDown : function (evt) {
      console.log(this);
      this.ASCIIkey = evt.keyCode;
      this.CHARkey = String.fromCharCode(this.ASCIIkey);
      this.keys[this.CHARkey] = true;
      console.log(this.CHARkey + " is now " + this.keys[this.CHARkey]);
    },
    init : function () {
      document.addEventListener("keydown", this.keyIsDown);
      document.addEventListener("keyup", this.keyIsUp);
    }
}

var game = {};

game.myKeyboard = new keyboardJS();
game.myKeyboard.init();

然而, (concole.log (this);) 返回“ # document ” 。我如何在原型函数中引用对象的属性?

Answer 1

试试这个...

init : function () {
  document.addEventListener("keydown", this.keyIsDown.bind(this));
  document.addEventListener("keyup", this.keyIsUp.bind(this));
}

this 在您通过函数引用时没有神奇的束缚, 在 addEventListener () 的语句中, this 就是它的意义所在。

请注意, bind () 没有得到我们最喜爱的旧IE的支持。

您可以按shim它, 传递在原型上调用您函数的函数, 或者使用一个具有绑定等同功能的库( in strey, $.proxy () in jQuery, etc)。

友情链接