Question

I’m trying to create multiple instances of a JavaScript “class” or object but it seems to be acting as a singleton… Could someone assist me with the following code?

        (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

When not using var on a variable declaration, it becomes a global variable. So when you create a new instance, it updates the global variable.

An alternative to this approach is to simple make a el an object property:

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

jsFiddle Demo

---

Moreover, you should consider binding your .onMouseDown method to the current object. Use this instead:

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

or this:

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