Javascript,jQuery.extend和“new”

时间:2011-02-16 10:33:21

标签: javascript jquery oop prototype

使用jQuery.extend扩展对象的原型时,我有一种奇怪的行为。

假设这个样本类:

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方法。

任何人都可以帮我这个吗?

提前谢谢!

1 个答案:

答案 0 :(得分:3)

这种情况正在发生,因为SampleClass的每个“实例”共享一个collection属性:当insertInCollection()方法访问对象的collection属性时,没有找到对象本身因此它使用对象原型的collection属性。要解决此问题,您需要为每个collection对象创建一个新的SampleClass数组。 Init()方法是一个很好的地方:

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