Home > スポンサー広告 > クロージャのメモ

スポンサーサイト

スポンサー広告

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Comments:-

Comment Form

Trackback+Pingback:-

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/136-40aa3f15
Listed below are links to weblogs that reference
スポンサーサイト from Karafuto Blog

Home > スポンサー広告 > クロージャのメモ

Home > javascript > クロージャのメモ

クロージャのメモ

javascript

クロージャのことが分かりかけてきたのでメモしておく。

普通は関数の実行が終わると、ローカル変数はなくなる。

function outer(){
    var a = 0;
    function inner(){
        a++;
        alert(a);
    }
    inner();
}

outer();        // 1
outer();        // 1

しかし、クロージャを使うと、内側の関数が外側の関数のローカル変数を参照していることによってローカル変数が保持される。

function outer(){
    var a = 0;
    function inner(){
        a++;
        alert(a);
    }
    return inner;
}

var count = outer();
count();        // 1
count();        // 2

関数を実行して内側の関数を返す。内側の関数を残すことによって、内側の関数から参照されているローカル変数が保持される。
通常は外側の関数からしか呼び出せない内側の関数が、内側の関数を返すことによって、関数の外でも実行できる。
通常は関数の外からアクセスできないローカル変数が、内側の関数を使うことで関数の外でローカル変数にアクセスできるようになる。

クロージャを使わないで失敗する例

for (var i = 0; i < document.links.length; i ++ ){
    document.links[i].onclick = function (){
        alert(document.links[i]);
        return false;
    }
}

全てのリンクにイベントハンドラを設定している中で、イベントハンドラを設定するループの中で関数内の変数 iにも同じ数が代入されることを期待しているが、失敗する。

イベントハンドラを設定した時には関数が実行されないため、関数内の変数 iには何も代入されない。そのため、どのリンクをクリックしても関数内の変数 iには現在の変数 iの値(document.links.length)が代入されて、そのリンクは存在しないため undefinedが表示される。

そこでクロージャを使う

for (var i = 0; i < document.links.length; i ++ ){
    document.links[i].onclick = function (a){
        return function (){
            alert(document.links[a]);
            return false;
        }
    }(i);
}

クロージャを使って関数の外の変数 iを保持する。イベントハンドラを設定するループの中で、外側の関数を実行して、イベントハンドラに内側の関数を返す。その時に変数 iの値を外側の関数の引数 aにとり、内側の関数から引数 aを参照して保持している。

こういう時は本当は thisを使えばいいと(クロージャの練習なんでいらないが)。

for (var i = 0; i < document.links.length; i ++ ){
    document.links[i].onclick = function (){
        alert(this);
        return false;
    }
}

参考にしたページ

Core JavaScript 1.5 Guide:Working with Closures - MDC

Comments:0

Comment Form

Trackback+Pingback:0

TrackBack URL for this entry
http://karafuto50.blog117.fc2.com/tb.php/136-40aa3f15
Listed below are links to weblogs that reference
クロージャのメモ from Karafuto Blog

Home > javascript > クロージャのメモ

おまかせリンク(R)
全記事表示リンク
Search
Meta
Feeds

Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。