Javascript、jQuery.extend 和 "new"

Question

我在使用 jQuery.extend 扩展一个对象的原型(prototype)时有一个奇怪的行为。

假设这个样本类:

var SampleClass = function (anArray) { this.Init(anArray); };

$.extend(SampleClass.prototype, {

    array: null,
    collection: new Array(),

    Init: function (arr) {
        var c = this;
        c.array = arr;
        c.insertInCollection();
    },

    insertInCollection: function () {

        var c = this;
        var l = c.array.length;
        for (var i = 0; i < l; i++) {
            var bar = {};
            c.collection.push(bar);
        }

        alert(c.collection.length);
    }
});

然后我执行这个示例代码

var arr1 = [{ name: 'foo', value: 20 }, { name: 'baz', value: 20}];
var arr2 = [{ name: 'bar', value: 60 }, { name: 'gaz', value: 40}];

c = new SampleClass(arr1);
d = new SampleClass(arr2); //<-- HERE LIES THE PROBLEM

当我创建对象“c”时，集合被填充到“insertInCollection”函数中，并且警报返回长度为 2。但是，当我实例化对象“d”(执行新的 TestClass(arr2))时，“insertInCollection”函数内的警报被触发并且警报显示 4!

实际上，我无法了解后台发生的情况。似乎第一个集合的元素从未被删除 - 当创建第二个对象(“d”)时，它已经在“集合”属性中存在对象“c”的 2 个元素。

这也会在不使用 jQuery.extend 的情况下发生，使用普通的 .prototype 方法。

谁能帮我解决这个问题？

提前致谢!

Answer 1

这是因为 SampleClass 的每个“实例”都共享一个 collection 属性:当 insertInCollection() 方法访问对象的 collection 属性，在对象本身没有找到，所以它使用对象原型(prototype)的 collection 属性。要解决此问题，您需要为每个 SampleClass 对象创建一个新的 collection 数组。 Init() 方法是执行此操作的好地方:

Init: function (arr) {
    var c = this;
    c.collection = [];
    c.array = arr;
    c.insertInCollection();
},