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>