javascript - Canvas 对象和另一个对象内的多个实例？

Question

我有一个可以这样调用的 Canvas 对象

var canvas = new Canvas();

Canvas 对象在其原型(prototype)中也有很多功能。该对象本质上是创建一个 Canvas 元素，具有一些函数，例如 setWidth、getContext 等。

我还有一个 Layer 对象，它本质上是一个具有附加功能的 Canvas 。我认为将 Layer 的原型(prototype)设置为 Canvas 是个好主意。这很好用，一切都很好。

当我想使用多层时，问题就出现了，因为每个层都应该有自己的 Canvas 。但是由于canvas是Layers的原型(prototype)，所以原型(prototype)只指向一个canvas元素。因此，当我开始使用多个图层时， Canvas 总是会被覆盖，因为图层原型(prototype)中的 Canvas 元素指向同一个 Canvas 对象。

我希望到目前为止我是有道理的!

我知道我可以将 Canvas 作为属性添加到图层中，但我并没有这样做，

layer.setWidth(900);

我必须做

layer.canvas.setWidth(900);

我想我的问题是，如何继承 Canvas 对象函数，但在实例化新层时让它创建一个新的 Canvas 元素？

根据要求的代码(简体)

var carl = {};

carl.Canvas = (function() {

     "use strict";

     function Canvas(config) {

          this._init(config);
     };

     Canvas.prototype._init = function(config) {

         this.element = document.createElement("canvas");
         this.context = this.element.getContext("2d");
     };

     Canvas.prototype.setWidth = function(width) {

         this.element.width = width;
     };

     Canvas.prototype.getWidth = function() {

         return this.element.width;
     };

     Canvas.prototype.setHeight = function(height) {

         this.element.width = height;
     };

     Canvas.prototype.getHeight = function() {

         return this.element.height;
     };

     Canvas.prototype.getContext = function() {

         return this.context;
     };

     return Canvas;
}}();

 carl.Layer = (function() {

     "use strict";

      function Layer() {

      };

      Layer.prototype = new carl.Canvas();

      return Layer;

 })();

Answer 1

您只需要:

carl.Layer = function() {
     carl.Canvas.call(this);
};
carl.Layer.prototype = Object.create(carl.Canvas.prototype);

停止使用立即调用的函数和闭包以及其他类似的东西引入大量开销。它们完全没用。保持代码干净。如果您不需要 Object.create，您可以使用 polyfill。

function inherits(child, parent) {
    function temp() {};
    temp.prototype = parent.prototype;
    child.prototype = new temp();
    child.prototype.constructor = child;
};
carl.Layer = function() {
     carl.Canvas.call(this);
};
inherits(carl.Layer, carl.Canvas);