Question

问题在于Game的rects实例：[]，它应该是Rect对象的数组。当我访问里面的rects属性时，给出了undefined。

(function(window, document, console) {
  'use strict';

  function Rect() {
    this.x = 0;
    this.y = 0;
    this.width = 20;
    this.height = 20;
  }

  Rect.prototype.draw = function(ctx) {
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };


  var Game = Object.create({    
    rects: [],  /// PROBLEM IS WITH this

    draw: function() {
      console.log('Draw called', this.rects);
      if (this.rects) {
        this.rects.forEach(function(rect, index) {
          console.log(rect);
          rect.draw(this.ctx);
        });
      }

      //window.setInterval(function() { this.ctx.clearRect(0, 0, 200, 200); }, 1000);


    },

    genRect: function() {
      var newRect = new Rect();
      newRect.x = parseInt(Math.random() * 200, 10);
      newRect.y = parseInt(Math.random() * 200, 10);

      this.rects.push(newRect);
    },

    loop: function() {
      //Game.draw();
      // Frame rate about 30 FPS

      window.setInterval(this.draw, 1000 / 30);
    },

    init: function() {
      this.canvas = document.getElementById('game'); 
      this.height = this.canvas.height;
      this.width = this.canvas.width;

      window.ctx = this.canvas.getContext('2d');


      this.genRect();
      this.loop(); //start loop
    }
  });

  var game = Object.create(Game);
  game.init();
})(window, document, console);

Answer 1

draw方法不是作为对象的方法调用的，它在全局范围内被称为函数，因此this将是对window的引用，而不是游戏对象。

将this复制到变量，并使用它从函数调用方法：

var t = this;
window.setInterval(function() { t.draw(); }, 1000 / 30);

无法修改原型数组内部

1 个答案: