Javascript 原型(prototype)和实例创建

Question

我很抱歉，因为这个话题经常出现，但在我今天阅读的任何内容中我都无法充分解释这一点。

我正在尝试制作一个简单的集合类(同时学习 javascript 原型(prototype))，旨在存储具有“名称”属性的对象，并允许通过索引或值访问其成员。到目前为止，我得到了这个:

function Collection() {}
Collection.prototype.constructor = Collection;
Collection.prototype._innerList = [];
Collection.prototype._xref = {};
Collection.prototype.count = function () { return this._innerList.length; };
Collection.prototype.add = function (obj) {
    this._xref[obj.name] = this._innerList.push(obj) - 1;
}
Collection.prototype.get = function (id) {
    if (typeof id == "string") {
        return this._innerList[this._xref[id]];
    } else {
        return this._innerList[id];
    }
};

http://jsfiddle.net/YrVFZ/

问题:

var foo = new Collection();
foo.add({name: "someitem", value:"hello world"});   // foo.count()== 1

var bar= new Collection();
bar.add({name: "someotheritem", value:"hello world"}); // bar.count()== 2

嗯...

基本上，新实例 bar 是使用具有 foo 中数据的当前值的所有属性创建的。我知道我可以通过在构造函数中放置 _xref 等来解决这个问题，但我试图了解原型(prototype)制作的工作原理。如果我创建一个新实例，并对该实例中的数据进行更改，为什么这些值会在我创建另一个新实例时继续存在？

如果我对 foo 或 bar 的原型(prototype)中的属性进行进一步更改，它们是独立的，所以我似乎并没有以某种方式引用任何事物的相同实例。那么是什么导致 bar 被 foo 的当前值实例化？

Answer 1

考虑一个满是学生的教室。在原型(prototype)上放一些东西就像在白板上放一些东西让他们都能看到。当你声明时

Collection.prototype._innerList = [];

您正在为每个集合赋予该属性；无论调用 new Collection() 对白板的任何更改都会影响所有学生。但是，如果您在构造函数中定义它，或者将其中一个函数定义为 this.variableName = []，则每个副本都会有自己的 variableName，就像给每个学生发讲义一样。显然，在某些情况下，白板上可以有一些东西，例如学生之间通用的说明，但如果每个学生的每个项目都不同，它应该是一个单独的属性。希望这个解释是有道理的...

您想这样做。

function Collection() {
    if (!this instanceof Collection)
        return new Collection();
    this._innerList = [];
    this._xref = {};

    return this;
}

Collection.prototype.count = function() {
    return this._innerList.length;
};
Collection.prototype.add = function(obj) {
    this._xref[obj.name] = this._innerList.push(obj) - 1;
}
Collection.prototype.get = function(id) {
    if (typeof id == "string") {
        return this._innerList[this._xref[id]];
    } else {
        return this._innerList[id];
    }
};

var foo = new Collection();
foo.add({name: "someitem", value:"hello world"});   
console.log(foo.count()); // 1

var bar= new Collection();
bar.add({name: "someotheritem", value:"hello world"});
console.log(bar.count()); // 1

http://jsfiddle.net/vXbLL/

编辑

与您的问题并不相关，但这是我所做的，所以我会把它扔在那里。每当我在原型(prototype)上做某事时，如果我没有返回某些东西，我就会返回 this。它允许链接，因此您可以执行 instance.function1().function2().function3() 只要 function1 和 function2 返回 这个。