Javascript 原型继承和 OOP

Question

我正在创建一个允许用户创建小部件的应用程序。有几种不同类型的小部件，我使用原型继承来定义它们。即

//the base widget that all widgets inherit from
var Widget = function(){}        
Widget.prototype.someFunction = function(){}


//widget type A
var A = function(){}    
A.prototype = new Widget();


//widget type B
var B = function(){}    
B.prototype = new Widget();

我发现在基类上添加一个可以创建相同类型的新小部件实例的方法会很方便。即，

//the base widget
var Widget = function(){};        

Widget.prototype.clone = function(){
    switch(this.type){
         case 'A':
             return new A();
             break;
         case 'B':
             return new B();
             break;
         default:
             break;
    }
};

这将允许我使用以下代码获得相同类型的新小部件：

var widgetTypeA = new A();
var cloneOfWidgetTypeA = widgetTypeA.clone();

我担心的是，基本小部件现在必须明确了解从它继承的每种类型的小部件。这是否违反了良好的 OOP 原则？

Answer 1

Widget.prototype.clone = function() {
  var constructor = window[this.type];
  return new constructor();
};

当然，假设所有子类都被声明为全局变量。

但老实说，我会在 Widget 命名空间中取出这些子类，并通过它访问它们，而不是将所有内容都全局化。

Widget.A = function(){};
Widget.A.prototype = new Widget();

Widget.prototype.clone = function() {
  var constructor = Widget[this.type];
  return new constructor();
};

Answer 2

鉴于您的构造函数是全局的，您可以执行以下操作：

var global = this;

Widget.prototype.clone = function() {
  if (global[this.type])
    return new global[this.type]();
};

假设每个实例都有一个 type 属性，其值是构造函数的名称。或者您可以修复构造函数原型的构造函数属性并执行以下操作：

Widget.prototype.clone = function() {
    return new this.constructor();
};

function A() { };
A.prototype = new Widget();
A.prototype.constructor = A;

var a = new A();
var aa = a.clone();

但是，这假设您没有任何要传递的参数。如果您确实需要传递参数，那么您可能必须知道您正在创建哪种类型，以便无论如何都可以调用正确的构造函数。

Answer 3

如果支持 ECMA5：

• 使用 Object.create(Object.getPrototypeOf(this));

如果不支持 ECMA5：

• 创建匿名函数
• 将匿名函数的原型设置为非标准属性 this.__proto__

示例：

var Widget = function() { };

Widget.prototype.clone = function() {
  /*
   Non-ECMA5: 

   var newClone = function() {};
   newClone.prototype = this.__proto__;
   return new newClone(); 
  */

  // ECMA5
  return Object.create(Object.getPrototypeOf(this));
}


var A = function() { };
A.prototype = new Widget();
A.prototype.name = "I'm an A";

var B = function() { };
B.prototype = new Widget();
B.prototype.name = "I'm a B";

var x1 = new A();
var y1 = x1.clone();

console.log("y1 should be A: %s", y1.name);

var x2 = new B();
var y2 = x2.clone();

console.log("y2 should be B: %s", y2.name);

Answer 4

您需要的信息已在 constructor 属性中提供。但是，覆盖 prototype 会丢失它，因为我最近 在这里解释。

使用我自己的 ECMAScript 类实现 版本 3 或 版本5，您的示例将如下所示：

var Widget = Class.extend({
    someFunction : function() {
        alert('someFunction executed');
    },

    clone : function() {
        return new this.constructor;
    }
});

var A = Widget.extend();

var B = Widget.extend({
    constructor : function(arg) {
        Widget.call(this); // call parent constructor
        this.arg = arg;
    },

    // override someFunction()
    someFunction : function() {
        alert('someFunction executed, arg is ' + this.arg)
    },

    // clone() needs to be overriden as well:
    // Widget's clone() doesn't know how to deal with constructor arguments
    clone : function() {
        return new this.constructor(this.arg);
    }
});

var a = new A;
var a2 = a.clone();
a2.someFunction();

var b = new B(42);
var b2 = b.clone();
b2.someFunction();