어떻게 이벤트 함수의 모듈 패턴에서 함수를 호출 할 수 있습니까?

Question

그래서 간단한 html5 기반 게임을 만들어 javascript 모듈 패턴과 html5 캔버스를 실험하고 첫 번째 장애물을 맞았습니다. 캔버스 위에 mousemove 이벤트를 듣고 있습니다.

init: function() { 
    var gameCanvas = document.getElementById("gameCanvas"); 
    gameCanvas.addEventListener("mousemove", this.redrawAvatar); 
} 

내가하고있는 일은 내 아바타가 캔버스 위로 마우스 포인터를 움직 이도록하는 것입니다.

문제는 그 다음 내가 그렇게처럼 redrawAvatar 함수 내부에서 호출하고자 내 모듈의 여러 기능을 가지고있다

: redrawAvatar 내부의 객체가 더 이상 내 모듈이 아니라 동안

redrawAvatar: function (mouseEvent) { 
    var gameCanvas = document.getElementById("gameCanvas"), 
    avatarCoord = {x: mouseEvent.offsetX, y: mouseEvent.offsetY}, 
    enemyCoord = {x: 100, y: 100}; 

    this.clear(gameCanvas); 
    this.drawAvatar(avatarCoord); 
    this.drawEnemy(enemyCoord); 

    if (that.isCollision({coord: avatarCoord, size: 30}, {coord: enemyCoord, size: 30})) { 
     alert("Avatar died, collided with enemy"); 
    } 
} 

을

var MyGame = (function() { 

    var Game = { 

     draw: function (image, coord) {}, 

     drawAvatar: function (coord) {}, 

     clear: function (canvas) { canvas.width = canvas.width + 1 - 1;}, 

     drawEnemy: function (xPos, yPos) {}, 

     isCollision: function (a, b) {}, 

     redrawAvatar: function (mouseEvent) { 
      var gameCanvas = document.getElementById("gameCanvas"), 
       avatarCoord = {x: mouseEvent.offsetX, y: mouseEvent.offsetY}, 
       enemyCoord = {x: 100, y: 100}; 

      this.clear(gameCanvas); 
      this.drawAvatar(avatarCoord); 
      this.drawEnemy(enemyCoord); 
      if (that.isCollision({coord: avatarCoord, size: 30}, {coord: enemyCoord, size: 30})) { 
       alert("Avatar died, collided with enemy"); 
      } 
     }, 

     init: function() { 
      var gameCanvas = document.getElementById("gameCanvas"); 
      gameCanvas.addEventListener("mousemove", this.redrawAvatar); 
     } 
    }; 

    (function() { 
     var that = Game; 
     that.init(); 
    }()); 

}()); 

가 어떻게 기능에 어떻게해야합니까 : 대신 이벤트 (이 경우 캔버스) 여기

의 소스 내 모듈의 본질이다 내가 호출하고 싶은 모듈에?

Answer 1

bind을 사용하면 이벤트 컨텍스트가 아닌 현재 컨텍스트 (해당 경우 게임 모듈)를 사용할 수 있습니다.

gameCanvas.addEventListener("mousemove", this.redrawAvatar.bind(this)); 

다음은 바인딩 효과를 재현하는 데모입니다. 클릭 이벤트를 사용합니다.

var MyGame = (function() { 
 
     var Game = { 
 
      scoped: 5, 
 
      redrawAvatar: function (mouseEvent) { 
 
      alert(this.scoped); 
 
      }, 
 

 
      init: function() { 
 
       var gameCanvas = document.getElementById("d"); 
 
       gameCanvas.addEventListener("click", this.redrawAvatar.bind(this)); 
 
      } 
 
     }; 
 
     (function() { 
 
      var that = Game; 
 
      that.init(); 
 
     }()); 
 
    }());

<div id="d">Basic element for click handler (click for demo)</div>

실행 코드 또는 jsFiddle Demo