Can not modify inside prototype array

Question

Well the problem is with the Game's instance of rects: [], which should be array of objects Rect. When i access the rects property inside Game gives undefined.

http://jsbin.com/ibilec/34/edit

(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);

Guffa · Accepted Answer · 2013-01-13 12:57:31Z

2

The draw method is not called as a method of the object, it's called as a function in the global scope, so this will be a reference to window, not to the Game object.

Copy this to a variable, and use it to call the method from a function:

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

answered Jan 13, 2013 at 12:57

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Peter Pajchl Over a year ago

This line rect.draw(this.ctx); is also incorrect because the ctx is saved to global scope here window.ctx = this.canvas.getContext('2d');

Guffa Over a year ago

@PeterPajchl: But that code is run inside a callback function, so this will be the window object.

Peter Pajchl Over a year ago

which callback? the one in your answer?

Guffa Over a year ago

@PeterPajchl: No, the callback for the forEach.

Peter Pajchl Over a year ago

please correct me if I am wrong but based on documentation - if thisArg is undefined or null the this value depends on whether it's run in strict mode or not -> only in non-strict mode this value will refer to global object developer.mozilla.org/en-US/docs/JavaScript/Reference/…

|

Collectives™ on Stack Overflow

Can not modify inside prototype array

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related