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