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

フロントサイドエンジニアという選択肢

HTMLコーダー → ECサイト運営 → システムエンジニア という経歴の著者がフロントサイトエンジニアという職業に今後の活路を見出し、その道に進むために取得した技術を貯めておくブログ

(Javascript)クロージャとは

広義でのクロージャはコードとスコープがセットになったものだそうです。
Javascriptの場合は、メソッドが自身の外にある変数を参照している関係をクロージャと言います。この場合のメソッドとは、関数の中に組み込まれる内部関数の事を指します。

通常の関数は、実行後に内部の情報は破棄されてしまい、再度呼び出すとすべての値がリセットされていますが、クロージャを使用することで、関数実行後にも関数内部に変数の値を保持させた状態にしておくことが出来ます。

簡単な例をまとめると以下のようになります

  1. 関数Aを定義、関数Aは内部にローカル変数Bを持っている。
    function A(num) {
        var B = num;
    }
  2. 関数Aは、returnでメソッドを返すようにする
    function A(num) {
        var B = num;
        return function()
        {
        }
    }
  3. メソッドは変数Bを参照させるようにする。
    function A(num) {
        var B = num;
        return function()
        {
            B++;
            return B;
        }
    }
  4. グローバル変数Cを定義して関数Aを代入する
    var C = A(5);
  5. この時、変数Cの値にはメソッドが入ってくる。但し、メソッドは変数Aを参照しているので、その情報も一緒に入ってくる。
    変数Cの値は関数なので、変数Cの名前で内部関数を呼ぶことになる
    C(); // 6
  6. この変数Cの値となっているメソッドと変数Aのセットがクロージャということになる。
使用例

名前を定義すると、その名前を関数内に保持し、変更した際に前の名前と新しい名前を表示する関数

// 名前の変更履歴を表示する関数
function nameChangeRecord()
{
    var presentName = '未定義';
    return function(newName)
    {
        var result = '名前は「' + presentName + '」から「' + newName + '」に変更されました<br />';
        presentName = newName;
        return result;
    }
}
    
var changeNameLog = nameChangeRecord();
document.write(changeNameLog('新規名称')); // 名前は「未定義」から「新規名称」に変更されました
document.write(changeNameLog('変更名称')); // 名前は「新規名称」から「変更名称」に変更されました