読者です 読者をやめる 読者になる 読者になる

Caller の束縛(bind)

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>