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