JavaScriptのクロージャについてメモ

Published: 2016年3月30日 by tomsato

概要

今日はJavaScriptのクロージャについて調べます

JavaScript勉強シリーズ

クロージャについて (簡単に)

クロージャとは一言で言うと「状態を持つ関数」
または関数を抜けた後にも生きるローカル変数とか
クロージャの例

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

var x = count();
x(); // 1
x(); // 2
x(); // 3

前提として以下を知っておく必要がある

  • 関数内で別の関数を記述できる
  • 関数を返す関数を定義できる
  • ガベージコレクションが不要になった領域を自動で解放する
  • スコープチェーン

クロージャの仕組み

JavaScriptは不要になった領域を自動で解放するガベージコレクションという機能があり、参照元がなくなったオブジェクトなどは自動的に解放される

通常だと関数count(先の例の関数)の実行終了時に変数iなどはメモリ上から解放されるがグローバル変数xに関数count()が代入されているため変数xにnullをセットしない限り変数iは参照が残ることになる

この性質にスコープテェーンを利用してローカル変数の値を参照し続けるデータ構造がクロージャとなる

参考

コメントを書く

※ Emailは公開されません

※ コメントは承認されると下記に表示されます

コメント一覧

最近の投稿

vue-pdfを使ってNuxt.jsで作成しているアプリケーションに pdfスライドを表示させるサンプルを作成しました README.md通りに実装してもうまくいかないところがあったのでそのあたり含めてまとめます

Vue.js / Nuxt.jsにおけるログインの実装方法をまとめる Auth0やNuxt.jsのAuth Moduleとmiddlewareについて調べつつサンプルを作成することで理解を深める

コンポーネント設計について考える Atomic DesignやPresentational Component, Container Componentについてまとめつつ 自分だったらVue.js / Nuxt.jsでどういうコンポーネント設計にするかについてまとめます

Netlify Formsを使ってブログサイトにコメント機能を追加する方法を調べたので紹介 Netlify FormsはNetlifyに標準機能として用意されているフォーム機能 サーバレスなので別途コメント用にサーバを用意する必要がなくHTMLを埋め込むだけで準備できる

TypeScriptの入門の入門チートシート 型の種類や使い方についてまとめていくだけでなく、 TypeScriptについてや必要性などについてもまとめることでこのページでTypeScriptをざっくり理解できる程度の内容を目指す

カテゴリ一覧

タグ一覧