Let prototype function have sub functions with inherited environment

Question

Having a prototype object with various functions, mainly to do with canvas. Typically like this:

function CanvasPain() {
    ...
}

CanvasPaint.prototype.drawFoo = function(x, y) {
    this.ctx.moveTo(x, y);
    ...
};

I have some functions like paintGrid() where I would like to have sub functions – but also being property based objects. (Not sure how to word this.) Example:

CanvasPaint.prototype.grid = function() {
    this.paint = function() {
        this.ctx.moveTo(0, 0);
         // Here this.rows should be a property of CanvasPaint.prototype.grid()
         // and not CanvasPaint()
        for (var i = 0; i < this.rows; ++i) {
            ... paint lines
        }
    };
};

And then being able to do say for example:

var CP = new CP();

// And in some function:
   this.grid.rows = 10;
   this.grid.cols = 10;
   this.grid.paint();

Reason for this is to make the code cleaner. As of now I use something like this:

function CanvasPain(arg) {
    ...
    this.properties = {};
    this.properties.fig1 = {a:123, b:111};
    this.properties.grid = {
                rows = arg.rows;
                cols = arg.cols;
                live = 1;
    };
}

CanvasPaint.prototype.paintGrid = function() {
    this.ctx.clearRect(0, 0, this.width, this.height);
    this.ctx.moveTo(0, 0);
    for (var i = 0; i < this.properties.grid.rows; ++i)
        ...
}

CanvasPaint.prototype.foo = function() {
    this.paintGrid();
}

This does not look to good too me. I want to get rid of the "properties" object and instead set those properties to the relevant function if there is one. Like rows and columns for grid belongs to the function object grid.

My question is how I can structure this in code such that the grid function can inherit the properties of the mother object?

If I say CP.grid = new CP.grid(); it becomes a independent object and looses for this.cxt etc. If I do CP.grid.paint() without initiating it as a new object it fails by not having a function paint.

Answer 1

Your paint() function needs access to both the CanvasPain object as well as its own properties such as rows and cols.

So, with each new CanvasPain object you need to create a dedicated .grid property:

function CanvasPain(arg)
{
  // ...

  // generate grid object
  this.grid = function(p) {
      // return public interface
      return {
          paint: function() {
              p.ctx.moveTo(0, 0);
              for (var i = 0; i < this.rows; ++i) {
                  //... paint lines
              }
          }
      };
  }(this);
}

The p variable inside your function points to the CanvasPain instance.

var CP = new CanvasPain();

CP.grid.rows = 10;
CP.grid.cols = 10;
CP.grid.paint();