Question

拥有具有各种功能的原型对象，主要与canvas有关。通常是这样的：

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

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

我的问题是我如何在代码中构造它，以便grid函数可以继承母对象的属性？

如果我说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();

让原型函数具有继承环境的子函数

1 个答案: