带有侦听器回调的JavaScript OO类

Question

背景

我一直在为一个小项目设置我自己的JavaScript基础对象。我希望能够设置一些简单的对象，我的更复杂的对象可以从中继承功能。

我一直在线学习一些教程（http://desalasworks.com/article/object-oriented-javascript-inheritance/）并具有我需要的基本扩展行为，请参阅此问题的代码部分以进行基本框架设置。

我有一个继承Model的功能的TestModel类。我可以像这样创建两个新实例：

var test_model_1 = new TestModel();
var test_model_2 = new TestModel();

然后我可以设置一些数据：

test_model_1.set({test:'Test1'});
test_model_2.set({test:'Test2'});

我可以得到两个对象的结果：

test_model_1.get() //test will = Test1
test_model_2.get() //test will = Test2

我现在只为test_model_1添加一个监听器：

test_model_1.addListener(function(data){
    console.log(data);
});

并在test_model_2上调用set：

test_model_2.set({test:'Some data that should not be seen in the console.log'});

test_model_1侦听器被触发并将数据发送到控制台日志。由于侦听器仅添加到test_model_1对象并且在test_model_2对象上调用了set，​​因此不应该这样做。

问题

我的Model类有什么问题，只要在类的任何实例上调用set，就会调用所有侦听器？

代码

Object.extends

Object.extend = function (superClass, definition) {

    var subClass = function () {
    };

    // Our constructor becomes the 'subclass'
    if (definition.constructor !== Object) {
        subClass = definition.constructor;
    }

    subClass.prototype = new superClass();
    for (var prop in definition) {
        if (prop != 'constructor')
            subClass.prototype[prop] = definition[prop];
    }

    // Keep track of the parent class
    // so we can call its constructor too
    subClass.superClass = superClass;
    return subClass;
};

模型

Model = Object.extend(Object, {

    data: {},

    listener: [],

    constructor: function (data) {
        var root = this;
        this.data = data;
    },

    get: function () {
        return this.data;
    },

    set: function (data) {
        this.data = data
        var arrayLength = this.listener.length;

        for (var i = 0; i < arrayLength; i++) {
            this.listener[i](data);
        }
    },

    addListener: function (callback) {
        if (typeof callback == 'function') {
            this.listener.push(callback);
        }

    }
});

TestModel

TestModel = Object.extend(Model, {

    constructor: function () {
        TestModel.superClass.call(this, {test: 'some default data'});
    },

    addListener: function (callback) {
        if (typeof callback == 'function') {
            this.listener.push(callback);
        }
    }

});

Answer 1

这是一个简单的修复，我需要在Model构造函数中创建一个侦听器实例，如果没有这样做，侦听器将在.prototype对象范围内，并在扩展它的所有对象之间共享。

固定型号

Model = Object.extend(Object, {

    data: {},

    listener: [],

    constructor: function (data) {
        this.data = data;
        this.listener = []; //set up listener for this instance
    },

    get: function () {
        return this.data;
    },

    set: function (data) {
        this.data = data
        var arrayLength = this.listener.length;

        for (var i = 0; i < arrayLength; i++) {
            this.listener[i](data);
        }
    },

    addListener: function (callback) {
        if (typeof callback == 'function') {
            this.listener.push(callback);
        }

    }
});