Caller の束縛（bind）

javascript

Javascript で関数の呼び出し元オブジェクト（Caller）をあらかじめ指定したいときは、fn.call(obj) を使う。


例えば、こんな感じ。Firebug が入ってなければ、console.log() を 換わりに alert() とすればOK。

Caller の束縛
function fn() {
    console.log(this.attr);
};
var cat = {
    attr: "nyan"
};
// caller を束縛する
function bind(fn, obj) {
    return function() {
        fn.apply(obj);
    };
};
// bind
var fn_bound = bind(fn, cat);
document.getElementById('kuma').onclick = fn_bound;
操作対象のHTMLの例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8" />
                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <script type="text/javascript" charset="utf-8" src="slide.js"></script>
                <title>Web/JS part.7</title>
        </head>
        <body>
            <div id="kuma">
                　　 <span id="year">∩＿＿＿＿＿∩</span><br />
                　　 <span id="head">| ノ　　　　　 ヽ</span><br />
                　　<span id="eyes">/　　●　　　● |　</span><span id="shout">クマ──！！</span><br />
                　 <span id="nose">|　　　　( _●_)　 </span><span id="hige">ミ</span><br />
                　<span id="mouth">彡､　　  　|∪|　　､｀＼</span><br />
                <span id="neck">/　＿＿ 　　ヽノ　/´>　 )</span><br />
                <span id="body">(＿＿＿）　　　　/　(_／</span><br />
            </div>
        </body>
</html>

参考

Web/JavaScript 講習会 part.7 (this, スコープと環境、クロージャ） — ディノオープンラボラトリ：情報源