Core > クロージャー

by s_hiroshi

HTML

<div id="foo">Paragraph foo Click Me</div>
<div id="bar">Paragraph bar Click Me</div>

JavaScript

// イベントハンドラの外側の括弧は必要ないが
// 可読性を上げる為に追加。
var foo = document.getElementById('foo');
foo.onclick = (function() {
    var flag = false;
    return function() {
        if (flag) {
            alert('Even Click');
            flag = false;
        } else {
            alert('Odd Click');
            flag = true;
        }
    }
}());

// オブジェクトインスタンスで実現する
// 上記のクロージャで実現する方が良い。
var o = {
    flag: false,
    showAlert: function() {
        if (this.flag) {
            alert('Even Click');
            this.flag = false;
        } else {
            alert('Odd Click');
            this.flag = true;
        }
    }
};
var bar = document.getElementById('bar');
bar.onclick = o.showAlert;