让原型功能具有继承环境的子功能

Question

具有各种功能的原型对象，主要是用于画布。通常是这样的：

function CanvasPain() { 
    ... 
} 

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

我有一个像paintGrid一些功能（），我想有子功能 - 而且是基于财产的对象。 （不知道如何词这一点。）例：

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 
     } 
    }; 
}; 

然后能够做到，例如说：

var CP = new CP(); 

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

之所以这样做是为了让代码更干净。截至目前我使用这样的事情：

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

这看起来不太好我。我想摆脱“属性”对象，而是将这些属性设置为相关函数（如果有）。像网格的行和列属于功能对象网格。

我的问题是我如何在代码中构造这样的网格函数可以继承母对象的属性？

如果我说CP.grid = new CP.grid();它成为一个独立的对象，从而失去了this.cxt等，如果我做CP.grid.paint()没有启动它作为一个新的对象时，它未能通过不具功能的涂料。

Answer 1

您的paint()功能需要访问CanvasPain对象以及它自己的属性，例如rows和cols。

所以，每个新CanvasPain对象，你需要创建一个专用.grid属性：

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

的p变量的函数指向CanvasPain实例内。

var CP = new CanvasPain(); 

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