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

Question

我有一个画布对象，我可以打电话像这样

var canvas = new Canvas(); 

画布对象也有很多的功能，在它的原型。该对象本质上创建一个画布元素，并具有几个功能，如setWidth,getContext等

我也有一个Layer对象，实质上是一个具有附加功能的画布。我认为将Layer的原型设置为Canvas是一个好主意。这工作很好，一切都很好。

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

我希望迄今为止我有道理！

我知道我可以在画布添加到层的属性，但是这样而不是做，

layer.setWidth(900); 

我会做

layer.canvas.setWidth(900); 

我想我的问题是，如何我可以继承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);