JavaScript 多实例

Question

我正在尝试创建 JavaScript“类”或对象的多个实例，但它似乎充当单例...有人可以帮助我使用以下代码吗？

        (function() {
            /*
             * Canvas object
             */
            var Canvas = function( el ) {
                _self = this;
                _self.el = el;
            }
            Canvas.prototype.init = function() {
                _self.el.style.backgroundColor = "#000";
                _self.el.addEventListener( "mousedown", _self.onMouseDown );
            }
            Canvas.prototype.onMouseDown = function() {
                console.log( 'onMouseDown: ', _self.el );
            }

            var cOne = new Canvas( document.getElementById('one') );
            var cTwo = new Canvas( document.getElementById('two') );
            cOne.init();
            cTwo.init();
        })();

Answer 1

当变量声明中不使用var时，它就成为全局变量。因此，当您创建新实例时，它会更新全局变量。

此方法的另一种方法是简单地将 el 设为对象属性:

var Canvas = function(el) {
    this.el = el;
};

jsFiddle Demo

<小时/>

此外，您应该考虑将 .onMouseDown 方法绑定(bind)到当前对象。改用这个:

this.el.addEventListener(..., this.onMouseDown.bind(this));

或者这个:

Canvas.prototype.init = function() {
    var self = this;
    ...
    this.el.addEventListener(..., function() {
        self.onMouseDown.call(self);
    });
};