我正在尝试拥有一个通用的“列表”类，它将具有:

• 属性:项目 - 这将是一个“what-ever”的数组
• 方法:Add() - 这将是抽象的并由特定的“列表”对象实现
• 方法:Count() - 返回“项目”的数量

然后创建将从“List”继承的子类:

// Class 'List'
function List(){
    this.Items = new Array();
    this.Add = function(){ alert('please implement in object') }
}

// Class CDList - which inherits from 'List'
function CDList(){
    this.Add = function(Artist){
        this.Items.push(Artist)
    }
}
CDList.prototype = new List();
CDList.prototype.constructor = CDList;

// Create a new CDList object
var myDiscs = new CDList();
myDiscs.Add('Jackson');
myDiscs.Count()  <-- this should be 1


// Create a second CDList object
var myDiscs2 = new CDList();
myDiscs2.Add('Walt');
myDiscs2.Add('Disney');
myDiscs2.Count()  <-- this should be 2

...但这似乎为所有“CDList”实例创建了一个共享的“项目”列表。我需要以某种方式为每个“CDList”实例创建一个新的“Items”列表继承实例。

我该怎么做？

*我在此示例中使用“项目”列表作为示例。我希望能够在我的子类中为任何类型的继承属性创建一个新实例 - 不一定是 Array 对象。

最佳答案

只有一个数组，因为您只创建一个。该数组附加到“CDList”的原型(prototype)，因此在所有实例之间共享。

要解决这个问题:不要将它附加到原型(prototype)上，而是附加到实例上。这只能在构建时完成:

// This is the constructor of the parent class!
function List() {
    this.Items = new Array();
}

// Add methods to the prototype, not to the instance ("this")
List.prototype.Add = function() { alert('please implement in object'); };

// Constructor of the child
function CDList() {
    List.call(this); // <-- "super();" equivalent = call the parent constructor
}

// "extends" equivalent = Set up the prototype chain
// Create a new, temporary function that has no other purpose than to create a
// new object which can be used as the prototype for "CDList". You don't want to
// call "new List();", because List is the constructor and should be called on
// construction time only. Linking the prototypes directly does not work either,
// since this would mean that overwriting a method in a child overwrites the
// method in the parents prototype = in all child classes.
var ctor = function() {};
ctor.prototype = List.prototype;
CDList.prototype = new ctor();
CDList.prototype.constructor = CDList;

// Overwrite actions
CDList.prototype.Add = function(Artist) {
    this.Items.push(Artist);
};

演示:http://jsfiddle.net/9xY2Y/1/

一般概念是:每个实例必须有自己的副本的东西(如本例中的“Items”数组)必须在构造时创建并附加到“this”(=实例)，即做new List() 或 new CDList()。可以跨实例共享的所有内容都可以附加到原型(prototype)上。这实质上意味着像“添加”函数这样的属性只创建一次，然后由所有实例使用(导致原始问题的原因)。

链接原型(prototype)时，不能直接链接(通常)，例如:

CDList.prototype = List.prototype;
DVDList.prototype = List.prototype;

// Now add a new function to "CDList"
CDList.prototype.Foo = function() { alert('Hi'); };

由于“List”、“CDList”、“DVDList”这三个函数的原型(prototype)是直接联系在一起的，它们都指向一个原型(prototype)对象，即List.prototype。因此，如果您向 CDList.prototype 添加内容，您实际上会将其添加到 List.prototype - 这也是“DVDList”的原型(prototype)。

var dvd = new DVDList();
dvd.Foo(); // <-- alerts "hi" (oops, that wasn't intended...)

诀窍是将原型(prototype)链接到父类的新实例:

CDList.prototype = new List();

这将创建一个类型为“List()”的新对象，其特殊功能是函数“List()”的原型(prototype)链接到新对象，使您能够直接在对象上调用原型(prototype)的属性:

var l = new List();
alert( l.hasOwnProperty("Add") );  // <-- yields "false" - the object l has no
                                   // property "Add"
l.Add("foo"); // <-- works, because the prototype of "List" has a property "Add"

但是，请记住我们打算使用函数“List()”的主体在每个实例的基础上创建像这个数组“Items”这样的东西？这是您放置任何“构造函数”代码的地方，例如

function User(userId) {
    $.getJSON('/user/' + userId, ...
}

function Admin() {}
Admin.prototype = new User( // ... now what?

一个非常干净的解决方案是使用另一个函数来创建原型(prototype)对象:

var ctor = function() {}; // <-- does nothing, so its super safe
                          // to do "new ctor();"

现在可以直接链接原型(prototype)，因为我们永远不会向 ctor.prototype 添加任何内容:

ctor.prototype = List.prototype;

如果我们这样做:

CDList.prototype = new ctor();

“CDList()”的原型(prototype)成为一个“ctor”类型的新对象，它没有自己的属性但可以扩展，例如通过新的“添加”功能:

CDList.prototype.Add = function() { /* CD specific code! */ };

但是，如果您不向这个新的原型(prototype)对象添加“Add”属性，“ctor()”的原型(prototype)就会启动——它是“List()”的原型(prototype)。这就是所需的行为。

此外，“List()”中的代码现在仅在您执行 new List() 或直接从另一个函数调用它时执行(在子类中通过 List .call(this);).

关于JavaScript 属性继承，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12027282/