Question

我正在尝试使用其中的方法创建一个简单的对象文字，在这种情况下，它是画布上的移动块。我使用http://www.html5rocks.com

中的教程编写了以下代码

var block = {
    color: "#000000",
    x: 0,
    y: 0,
    width: 30,
    height: 30,
    draw: function () {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
};

function update() {
    block.x = block.x + 30;
    block.y = block.y + 30;
}

function draw() {
    var x = document.getElementById("space");
    var ctx = x.getContext("2d");

    ctx.clearRect(0, 0, 900, 600);

    block.draw();
}

由于某种原因，它不会像这样工作，而如果我现在在draw（）函数中的draw方法中编写代码。我可能错过了什么，但是什么？

Answer 1

block及其成员从未听说过您ctx函数本地的draw()。

要么全局化，要么将其传递给block.draw：

var block = {
  // ...

  draw: function(ctx) { 
    // ...
  }
};

// ...

block.draw(ctx);

Answer 2

声明方法时，

ctx未知。该方法创建一个闭包，并且没有ctx的值。请记住，范围不是精确动态的（关于引用），因为范围是在函数定义上定义的，而不是函数用法。

如何修复它：将ctx作为参数传递给方法，或作为可分配属性（并修改方法以引用this.ctx）

使用方法我对JS对象文字缺少什么？

2 个答案: