javascript - DIV 对象和 Overlay 对象，html 元素的原型(prototype)继承问题？

Question

我有一个非常独特的问题，我不确定应该如何解决它，是否有最好的方法来解决它，和/或这是否是一个设计模式缺陷。

问这个问题的原因是我相信我不必为相同的功能重新编写函数。下面是示例代码；

 function Div(config) {

     var config = config || {};
     this.element = document.createElement("div");
     this.setSize(config.width || 0, config.height || 0);
 };

 Div.prototype.setSize = function(width, height) {

     this.setWidth(width);
     this.setHeight(height);
 };

 Div.prototype.setWidth = function(width) {

     this.element.style.width = width + "px";
 };

 Div.prototype.setHeight = function(height) {

     this.element.style.height = height + "px";
 };

 Div.prototype.appendTo = function(element) {

     element.appendChild(this.element);
 };

您可以看到上面的代码允许我创建 div 标签。我可以轻松创建 html div、设置它们的大小并将它们附加到其他元素。

我还有一个 Overlay 对象，需要继承 Div。一开始我决定将 Div 设置为 Overlay 的原型(prototype)。

 function Overlay(config) {

      var config = config || {};
      this.setSize(config.width, config.height);
 };

 Overlay.prototype = new Div();

这工作得很好，但问题出现了，因为 Overlay 本质上是一个带有一些附加功能的 Div 。由于 Overlay 对象以 Div 作为其原型(prototype)，因此它仅指向一个 div 元素，而 Overlay 的每个实例都应该有自己的 div 元素。

然后我决定将 Div 设为 Overlay 的属性；

 function Overlay(config) {

     var config = config || {};
     this.div = new Div(config);
 };

这也可以正常工作，但现在在创建 Overlay 实例时，我必须像这样使用它；

 var overlay = new Overlay();
 overlay.div.setSize(100, 100);

而不是；

 var overlay = new Overlay();
 overlay.setSize(100, 100);

为了解决这个问题，我在 Overlay 上创建了新的原型(prototype)函数来简化它的使用，Overlay 现在看起来像这样；

 function Overlay(config) {

     var config = config || {};
     this.div = new Div(config);
 };

 Overlay.prototype.setSize = function(width, height) {

     this.div.setWidth(width);
     this.div.setHeight(height);
 };

 Overlay.prototype.setWidth = function(width) {

     this.div.setWidth(width);
 };

 Overlay.prototype.setHeight = function(height) {

     this.div.setHeight(height);
 };

 Overlay.prototype.appendTo = function(element) {

     this.div.appendTo(element);
 };

像这样创建Overlay正是我想要的Overlay功能，但对我来说这似乎是非常错误的，因为我应该这样做我实际上是为了易用性而编写函数，随着 Div 大小的增长，可维护性将变得非常痛苦。

虽然将 Div 设置为 Overlay 的原型(prototype)似乎是正确的做法，但就我而言，它显然不是 的所有实例Overlay 绑定(bind)到同一个 div 元素。

如何创建 Div 对象和 Overlay 对象，其中 Overlay 将拥有自己的 Div 实例 但也会将 Div 的所有功能继承到其原型(prototype)？我应该使用一种模式来解决我面临的这个问题吗？

我真的不知道从这里该去哪里，但我想我很确定我现在做的方式不是正确的方式!

感谢您花时间阅读我的问题。

Answer 1

要使您的代码正常工作并允许您删除所有添加的功能，请将以下内容添加到您的 Overlay 构造函数中:

Div.call(this);

并在声明 Overlay 构造函数后添加此行:

Overlay.prototype = Object.create(Div.prototype);

---

说明: 这是我们正在做的事情的更详细的分割。首先，定义 Div 构造函数并为其原型(prototype)提供一些功能:

function Div() {
    this.propA = true;
}
Div.prototype.sayMyProp = function(){
   alert(this.propA);   
};

定义Overlay构造函数:

function Overlay() {
    Div.call(this);  // This gives any Overlay object the properties of Div
    // Define some properties specific to Overlay
    this.propB = true;
}

为 Overlay 创建一个继承于 Div 原型(prototype)的新原型(prototype):

Overlay.prototype = Object.create(Div.prototype);

请注意，这不会将 Div.prototype 的属性复制到 Overlay.prototype 上，它只是创建一个 Overlay。 prototype 对象，它具有对 Div.prototype 的“父”引用。 Overlay.prototype 没有自己的属性(尽管如果我们没有覆盖它，它会有一个 constructor 属性)。接下来，通过创建两个 Overlay 实例来测试我们的结构:

var o1 = new Overlay();
var o2 = new Overlay();

o1.propA = false;  // Does not change o2.propA because it is an "own"
                   // property of Overlay instances

他们可以访问 Div 原型(prototype)上的功能:

o1.sayMyProp();    // FALSE
o2.sayMyProp();    // TRUE, so they are not sharing the same propA

fiddle : 这是FIDDLE