Question

我总是得到player.draw（）不是函数但我找不到问题的错误。 Player类存在，但不是draw方法:(希望我能给你更多详细信息，但没有更多。感谢您的帮助，这里是代码：

var version = "0.0.1";
var is_playing = false;

init();
function init(){
    background_canvas = document.getElementById("background-canvas");
    background_ctx = background_canvas.getContext("2d");
    main_canvas = document.getElementById("main-canvas");
    main_ctx = main_canvas.getContext("2d");

    requestaframe = (function(){
        return  window.requestAnimationFrame            ||
                window.webkitRequestAnimationFrame      ||
                window.mozRequestAnimationFrame         ||
                window.oRequestAnimationFrame           ||
                window.msRequestAnimationFrame          ||
                function(callback){ window.setTimeout(callback, 1000/60); };
    })();

    player = new Player();
    start_loop();
}

function mouse(e){
    var x = e.pageX - document.getElementById("game-holder").offsetLeft;
    var y = e.pageY - document.getElementById("game-holder").offsetTop;
    document.getElementById("x").innerHTML = x;
    document.getElementById("y").innerHTML = y;
}

function Player(){
    this.color = "yellow";
}

Player.prototype.draw = function(){
    main_ctx.fillStyle = this.color;
    main_ctx.arc(205, 70, 25, 0, 2*Math.PI);
    main_ctx.fill();    
};

function clearStage(){
    main_ctx.clearRect(0, 0, 800, 600);
}

function start_loop(){ is_playing = true; loop(); }
function stop_loop(){ is_playing = false; }

function loop(){
    clearStage();
    main_ctx.fillStyle = "blue";
    main_ctx.fillRect(175, 100, 450, 450);
    player.draw();
    if(is_playing) requestaframe(loop);
}

Answer 1

你尝试使用吊装，但似乎并没有完全理解它。

通常，提升将函数和变量声明（不是赋值！）移动到当前范围的顶部。这就是为什么你可以在实际申报之前调用init()方法的原因。

所以稍微剥离你的代码，看起来像这样

init();
function init() { ... }

function Player() { ... }

Player.prototype.draw = ...;

提升后（所以评估代码的方式）看起来像这样：

function init() { ... }

function Player() { ... }

init();

Player.prototype.draw = ...;

因此，您可以清楚地看到，当您第一次致电init()时，draw()方法尚未附加到Player原型，因此未定义。

简单的解决方案是更改代码的顺序并将init()调用移到底部。

Answer 2

在代码执行开始之前处理函数声明，因此您可以在声明之前调用 init ：

init();
function init(){...}

分配在代码执行期间稍后发生，因此赋值：

Player.prototype.draw = function(){...}

当你调用 init 时，

没有发生，因此当你调用 init 时， Player.prototype.draw 是未定义的。

将调用移至脚本底部，或者至少低于 Player.prototype 的所有作业。

javascript原型......不是功能

2 个答案: