javascript - 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 演示

---

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

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

或这个：

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

Answer 2

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

不var，你让 _self 成为一个全球性的 val