30
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

JavaScriptでクロージャー

Last updated at Posted at 2015-03-07

#クロージャーってなに?
「関数宣言の中に別の関数宣言を書けること(入れ子の関数宣言)」や「ローカル変数を参照している関数内変数」と言われます。
これだけだとどういうことかわかりませんね・・・
自分自身理解できなかったので、自分が納得したことを踏まえてクロージャーについて説明していきます。

#クロージャーを書くために理解しておきたいこと
###1. JavaScriptでは現在の関数の外側で定義された変数を参照できる

function func() {
  var name = 'taro';
  function greeting() {
    return 'My name is ' + name;
  }
  return greeting();
}

func();  // My name is taro

###2. 関数は、その外側の関数がリターンした後になっても、まだ外側の関数内で定義された変数を参照できる

function func() {
  var lastName = 'suzuki';
  function greeting(firstName) {
    return 'My name is ' + lastName + ' ' + firstName;
  }
  return greeting;
}

var f = func();
f('taro');    // My name is suzuki taro
f('hanako');  // My name is suzuki hanako

###3. クロージャは外側の変数を更新できる

function box() {
  var val = undefined;
  return {
    set: function(newVal){
      val = newVal;
    },
    get: function(){
      return val;
    },
    type: function(){
      return typeof val;
    }
  };
}

var b = box();
b.type();    // undefined
b.set(10);
b.get();     // 10
b.type();    // "number"

#カウントアップをしていくクロージャ
よくあるサンプルを書いていきます

function counter() {
  var count = 0;
  return function() {
    return ++count;
  }
}

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

#クロージャの使い所
ここまでで一応簡単なコードを書くことができるようになったかと思います。
しかし、実際クロージャってどんなところで使うかわからない・・・
そこで私なりに考えたクロージャのメリット
・クロージャ内の変数をクロージャ外からアクセス出来ない
・クロージャ内の変数を保持することができる

これらを踏まえて以下の様なコードがあるとします。

function createClicked() {
  var isClicked = false;
  return function() {
    if (isClicked) {
      return 'すでにClickしています';
    }
    isClicked = true;
    return 'Clickしました';
  }
}

var click = createClicked();
click();  // Clickしました
click();  // すでにClickしています

一回しかクリックできないようにするコードです
二重に処理させないようにするためにとかといった場面で有効かもですね・・・

30
34
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
30
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?