具有监听器回调的 JavaScript OO 类

Question

背景

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

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

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

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 上设置调用:

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 对象上调用该集合，因此不应发生这种情况。

问题

我的 Model 类允许在该类的任何实例上调用 set 时调用所有监听器，这有什么问题吗？

代码

对象.扩展

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 = 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

这是一个简单的修复，我需要在模型构造函数中创建一个监听器实例，如果不这样做，监听器将位于 .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);
        }

    }
});