JavaScript基本錯誤;揭示模塊圖案樣式

Question

這是我的第一個問題在stackoverflow：

我有我的代碼在Javascript中的問題。我在這個新的語言和書面方式，我不知道哪裏是在這個模塊中的問題，但這個錯誤是

Uncaught TypeError: Cannot read property 'init' of undefined.

我想首先HTML5/JS遊戲，我有點緊張，因爲這個問題我已經有幾天了......謝謝，夥計們！

var game = (function() { 
 
    ////////////////////////////////////////////////// 
 
    /////////////////Atributos del juego///////////////// 
 
    //////////////////////////////////////////////////////// 
 
    var canvas = null, 
 
     ctx = null, 
 
     gameover = false, 
 
     pause = false, 
 
     score = 0; 
 

 
    ////////////////////////////////////////////////// 
 
    ////////////////////Métodos privados///////////////// 
 
    //////////////////////////////////////////////////////// 
 
    window.requestAnimationFrame = (function(callback) //Función autoejecutable que detecta la compatibilidad del navegador con la animación 
 
     { 
 
      return window.requestAnimationFrame || 
 
       window.webkitRequestAnimationFrame || 
 
       window.mozRequestAnimationFrame || 
 
       window.oRequestAnimationFrame || 
 
       window.msRequestAnimationFrame || 
 
       function(callback) { 
 
        window.setTimeout(callback, 1000/60); 
 
       }; 
 
     })(); 
 

 
    function loop() //Actualiza los estados y dibuja los elementos durante la partida 
 
    { 
 
     update(); 
 
     draw(); 
 
    } 
 

 
    function update() //Actualiza el estado del juego 
 
    { 
 
     window.requestAnimationFrame(update); 
 

 
    } 
 

 
    function draw() //Dibuja los elementos del juego en el canvas 
 
    { 
 
     ctx.drawImage(buffer, 0, 0); //Dibujamos el buffer en el contexto 
 
    } 
 

 
    ////////////////////////////////////////////////// 
 
    ////////////////////Métodos públicos///////////////// 
 
    //////////////////////////////////////////////////////// 
 
    function init() { 
 
     var i = 0; 
 
     alert(i); 
 
    } 
 

 
    return //Devuelve un objeto con todos los métodos públicos 
 
    { 
 
     init: init; 
 
    }; 
 
}()); 
 

 
game.init();

Answer 1

問題是與你的return語句，具體init分號後還有return關鍵字之後的換行符。

更改爲：

return { 
    init: init 
}; 

var game = (function() { 
 
    ////////////////////////////////////////////////// 
 
    /////////////////Atributos del juego///////////////// 
 
    //////////////////////////////////////////////////////// 
 
    var canvas = null, 
 
     ctx = null, 
 
     gameover = false, 
 
     pause = false, 
 
     score = 0; 
 
    
 
    
 

 
    ////////////////////////////////////////////////// 
 
    ////////////////////Métodos privados///////////////// 
 
    //////////////////////////////////////////////////////// 
 
    window.requestAnimationFrame = (function(callback) //Función autoejecutable que detecta la compatibilidad del navegador con la animación 
 
     { 
 
      return window.requestAnimationFrame || 
 
       window.webkitRequestAnimationFrame || 
 
       window.mozRequestAnimationFrame || 
 
       window.oRequestAnimationFrame || 
 
       window.msRequestAnimationFrame || 
 
       function(callback) { 
 
        window.setTimeout(callback, 1000/60); 
 
       }; 
 
     })(); 
 

 
    function loop() //Actualiza los estados y dibuja los elementos durante la partida 
 
    { 
 
     update(); 
 
     draw(); 
 
    } 
 

 
    function update() //Actualiza el estado del juego 
 
    { 
 
     window.requestAnimationFrame(update); 
 

 
    } 
 

 
    function draw() //Dibuja los elementos del juego en el canvas 
 
    { 
 
     ctx.drawImage(buffer, 0, 0); //Dibujamos el buffer en el contexto 
 
    } 
 

 
    ////////////////////////////////////////////////// 
 
    ////////////////////Métodos públicos///////////////// 
 
    //////////////////////////////////////////////////////// 
 
    function init() { 
 
     var i = 0; 
 
     alert(i); 
 
    } 
 

 
    //Devuelve un objeto con todos los métodos públicos 
 
    return { 
 
     init: init 
 
    }; 
 
}()); 
 

 
game.init();

關於換行，見：Why doesn't a Javascript return statement work when the return value is on a new line?

Answer 2

真正的問題是這樣的

return // comment 
    { 
     init: init 
    }; 

由於自動分號插入的JavaScript分析器會將此解釋爲

return; 

您可以在Justifying Crockford claims閱讀更多關於這一點，在「爲什麼每一個語句結尾;？

var app = document.getElementById('app'); 
 
var game = (function() { 
 
    function init() { 
 
     var i = 0; 
 
     app.innerHTML += '<p>game initialized</p>'; 
 
    } 
 
    // beware of http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/ 
 
    return { init: init } 
 
}()); 
 
game.init();

<div id="app"></div>