Grids, Cells, and Inheritance

Question

I want to build a grid and I have 2 concepts: Grid which is consist of Cell.

Grid class is:

var Grid = function (rows, columns, cellInit) {
 var canvas = create_canvas();
 this.context = canvas.getContext('2d');
 this.matrix = new Array(rows);
 for (var x = 0; x < rows; x+=1) {
 this.matrix[x] = new Array(columns);
 for (var y = 0; y < columns; y+=1) {
 this.matrix[x][y] = new Cell(x, y, cellInit(), this.context);
 }
 }
};

Cell class is:

var Cell = function (x, y, value, context) {
 this.x = x;
 this.y = y;
 this.rectX = s.cell_width * this.x + s.pad;
 this.rectY = s.cell_height * this.y + s.pad;
 this.value = value;
 this.context = context;
};

Also I have fill method for Cell:

Cell.prototype.fill = function(type) {
 this.context.fillStyle = s.colors[type];
 this.context.fillRect(this.rectX, this.rectY, s.rect_width, s.rect_height);
 return this;
}

And actually I have 2 questions about this code:

• Looks like that Grid and Cell should have parent-child relationship. Is it normal that I'm creating child objects at parent class?
• I need somehow to give access to context var from Cell class without passing it via constructor. I had tried to play with prototypes but can't figure out how to do that.

• Bergi: Just pass the context as an argument to the fill method? Where are you calling the method, maybe from the grid?
• Bergi: You are looking for composition ("consists of"), not inheritance ("is a").
• Viacheslav Kondratiuk: @Bergi Yes, you are right. I call it from Grid prototype. I will check composition.

Answer 1

Looks like that Grid and Cell should have parent-child relationship. Is it normal that I'm creating child objects at parent class?

There is no reason for a Grid and Cell to have any inheritance relationship. A Cell is not a kind of Grid, nor is a Grid a kind of Cell.

I need somehow to give access to context var from Cell class without passing it via constructor.

Why? That's exactly how you should give a Cell access to the context. The constructor is the right way to do this. It's completely normal for a container class to pass needed context into its children.

I had tried to play with prototypes but can't figure out how to do that.

It's a bad design to put data on the prototype. You would effectively make it impossible to have two independent Grids, if every single instance of Cell can only share access to one Grid's context via Cell's prototype. It's far better for each Grid to pass its context into all its Cells.

• Viacheslav Kondratiuk: Why I won't have 2 independent Grids? var g1 = new Grid(); var g2 = new Grid(); g1 and g2 are independent, with different contexts and if I will apply inheritance, I will have access to that context from Cells.
• user229044: @viakondratiuk If you're using Cell.prototype to push contexts into cells, then all cells will have the same context. It doesn't matter how many Grids you instantiate if all Cells use the same prototype.context.
• Viacheslav Kondratiuk: I thought about: when I type this.context at Cell object it wouldn't be found inside of it and falls back to this.context at Grid object.
• user229044: @viakondratiuk all Cells share a prototype. If you set Cell.prototype.context to something, every single cell will have that same value. It will be impossible for one Cell to use Cell.prototype and another Cell to "fall back" to Grid.prototype, because they will always have the same value for Cell.prototype.context.