Javascript事件監聽器

我想在Javascript中製作一個簡單的Pong遊戲。我有一個乒乓球班，我想創建一個方法來移動基於如何鼠標移動播放器矩形：Javascript事件監聽器

class Player 
{ 
    constructor() 
    { 
    // do stuff 
    } 
} 

class Pong 
{ 
    constructor(canvas) 
    { 
    //do stuff 
    this.player1 = new Player(true); // Create an instance of another class 

    } 

    handleMouseMove(event) 
    { 
    var y = event.clientY; 

    // this.player1 is undefined!! 
    console.log("this.player1: "+this.player1); 
    this.player1.pos.y = y; 
    } 


function main() 
{ 
    // Initialize canvas and context 
    canvas = document.getElementById('mycanvas'); 

    const pong = new Pong(canvas); 
    canvas.addEventListener('mousemove', pong.handleMouseMove); 
}

每當我開始移動鼠標，它告訴我，PLAYER1是不確定的。我如何將類方法設置爲事件偵聽器並讓它知道類的成員？

來源

2017-02-15 Sterling

你的'Player'類在哪裏？ –

Player類不在Pong類中，但在同一個文件中。我會編輯我的問題來證明這一點。 – Sterling

這是因爲this裏面的事件監聽器引用引發事件（畫布）的元素。您可以綁定使用bind這樣的this關鍵字：

canvas.addEventListener('mousemove', pong.handleMouseMove.bind(pong)); 
//              ^^^^^^^^^^^

bind將返回其this關鍵字設置，無論你給它作爲參數的函數。

來源

2017-02-15 23:48:27

@downvoter爲什麼？ –

它不是'this'，它是'pong' – ChemicalRocketeer

@ChemicalRocketeer是的，我剛剛注意到！我認爲'主'在課堂裏'Pong'！ –

在我看來，這是javascript中最糟糕的部分之一。當你通過pong.handleMouseMove到addEventListener時，你正在傳遞函數本身。在這種情況下，事件觸發時，它會調用您的Pong實例上下文外的函數。你需要調用bind上handleMouseMove，就像這樣：

canvas.addEventListener('mousemove', pong.handleMouseMove.bind(pong));

bind存在的所有功能，並返回一個新的功能，你可以通過周圍，並確保this在函數內部被綁定到指定的參數（在這種情況下，pong）。

編輯：ibrahim mahrir的其他答案是錯誤的，您必須將pong實例傳遞給bind函數。無論你通過什麼this將被分配到你綁定的函數內部。

來源

2017-02-15 23:49:56 ChemicalRocketeer

你也可以'canvas.addEventListener（'mousemove'，函數（e）{pong.handleMouseMove（e）;}）' - 不是很好，但很常見 –

我明白了...我欣賞這個解釋。我接受了另一個答案，因爲它更接近頂端（在我看到它的時候已經修復了）。謝謝！！ – Sterling

Javascript事件監聽器

回答

相關問題