Question

我有这个javascript代码，我用它在画布对象上绘制一个小方块，并让它向左或向右移动，但我收到此错误，我不知道为什么。

function Walker(canvas, ctx) {
    console.log("Received canvas with (" + canvas.width + ", " + canvas.height + ")");

    this.x = Math.floor((Math.random() * canvas.width) + 1);
    this.y = Math.floor((Math.random() * canvas.height) + 1);
    this.canvas = canvas;
    this.ctx = ctx;

    this.draw = function(x = this.x, y = this.y) {
        console.log("Drawing at (" + this.x + ", " + this.y + ")");

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.beginPath();
        this.ctx.rect(this.x, this.y, 5, 5);
        this.ctx.fillStyle = "#000000";
        this.ctx.fill();
        this.ctx.closePath();
    };

    this.walk = function() {
        left_or_right = Math.floor(Math.random() * 2);

        if(left_or_right === 0) {
            console.log("Moving right");
            this.x += 1;
        }
        else {
            console.log("Moving left");
            this.x -= 1;
        }

        this.draw(this.x, this.y);
    };

}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var w = new Walker(canvas, ctx);

w.draw();
setInterval(w.walk, 10000);

这是我的.html文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gamedev Canvas Workshop</title>
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
<body>
    <canvas id="myCanvas" width="480" height="320"></canvas>
    <script src="../scripts/walk.js" type="text/javascript"></script>
</body>
</html>

此代码有什么问题？

Answer 1

查看您的代码。问题在这里

setInterval(function(){
       w.walk();
    }, 10000);

当您将w.walk作为参数传递时，它会从对象中获取该函数。如果函数被删除，则会丢失它context。所以在w.walk＆＃中39;复制this不是您的w。在这种情况下，您可以通过许多变体来实现目标。

1）您可以使用我的代码中的包装函数 2）您可以使用bind功能 - setInterval(w.walk.bind(w), 1000 }

＆＃13;

function Walker(canvas, ctx) {
    console.log("Received canvas with (" + canvas.width + ", " + canvas.height + ")");

    this.x = Math.floor((Math.random() * canvas.width) + 1);
    this.y = Math.floor((Math.random() * canvas.height) + 1);
    this.canvas = canvas;
    this.ctx = ctx;

    this.draw = function(x = this.x, y = this.y) {
        console.log("Drawing at (" + this.x + ", " + this.y + ")");

        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        this.ctx.beginPath();
        this.ctx.rect(this.x, this.y, 5, 5);
        this.ctx.fillStyle = "#000000";
        this.ctx.fill();
        this.ctx.closePath();
    };

    this.walk = function() {
        left_or_right = Math.floor(Math.random() * 2);

        if(left_or_right === 0) {
            console.log("Moving right");
            this.x += 1;
        }
        else {
            console.log("Moving left");
            this.x -= 1;
        }

        this.draw(this.x, this.y);
    };

}

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var w = new Walker(canvas, ctx);

w.draw();
setInterval(function(){
   w.walk();
}, 10000);

＆＃13;

<canvas id='myCanvas'></canvas>

＆＃13;

错误：未捕获TypeError：this.draw不是函数

1 个答案: