0

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();
        })();
4

2 に答える 2

4

変数宣言で使用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);
    });
};
于 2013-02-07T01:46:07.817 に答える
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をgloblevalにします

于 2013-02-07T01:46:08.650 に答える