Snippets > イベントハンドラ

イベントハンドラのthisの問題

by s_hiroshi

HTML

<button id="foo">Click</button>
<button id="fuga">Click</button>
<button id="bar">Click</button>
<button id="baz">Click</button>

JavaScript

// 期待通り
var o1 = {
    name: 'foo',
    bind: function(selector) {
        var self = this;
        $(selector).bind('click', function() {
            console.log(self.name); // foo
        });
    }
};
o1.bind('#foo');


// 期待通り
var o2 = {
    name: 'fuga',
    setHandler: function() {
        $('#fuga').click(function() {
           console.log(this); // <button>
        });
    }
};
o2.setHandler();


// 期待通りに動作しない例
var o3 = {
    name: 'bar',
    event: function() { // 即時実行
        var self = this; // thisはwindowオブジェクト o3ではない
        $('#bar').click(function() {
            console.log(self.name); // self is not defined. selfはwindowオブジェクト
        });
    }()
};


// 期待通りに動作しない例
var o4 = {
    name: 'baz',
    event: function(self) { // 即時実行
        var self = this; // windowオブジェクト 
        $('#baz').click(function() {
           console.log(self.name); // self is not defined. selfはwindowオブジェクト
        });
    }(this)
};