蜻蛉のバグ取り部屋: 【C++、JavaScript】クロージャーについて

C++のラムダ式とJavaScriptの無名関数・匿名関数が似ているなと感じた。
調べてみると、クロージャーという機能の実装として共通点が多いことが分かった。

ポイント

C++のラムダ式とJavaScriptの無名関数（匿名関数）は、どちらもクロージャーを実現することのできる言語機能であるという点で似ている

まずは言葉について整理する。

クロージャー
関数宣言の中に別の関数宣言を書ける機能、あるいはローカル変数を参照している関数内変数の機能である[1]。
クロージャー型
生成される関数オブジェクトの型の名前である
クロージャーオブジェクト
クロージャー型の関数オブジェクトである。

C++では「ラムダ式」という記述方法をとることで、クロージャーを実装することができる。
C++でクロージャーでは、通常の関数定義では不可能なクロージャー外部の変数を保存しておくことができる。この、クロージャー外部の変数を保存する機能のことを「キャプチャ」と呼ぶ。

一方で、JavaScriptでは「アロー」表記で関数を宣言する。
JavaScriptの関数は宣言された時点では名前を持たないため、無名関数（匿名関数）と呼ばれる。JavaScriptではクロージャーを含むスコープ内でvarで宣言された変数はクロージャー内部からもアクセスでき、これによりキャプチャが実現できる。

C++のクロージャーでは、変数へのアクセス方法をある程度細かく指定することができる

C＋＋のクロージャーの基本的なシンタックスを以下に示す。

[....ラムダ指定...]{...関数の本体...}

[]は「ラムダ導入子」といい、ここにクロージャーがスコープ内部の変数にどのようにアクセスするかを記述する。
アクセスの種類には、大きく分けて「コピー」、「参照」、「this」参照がある。
変数を「コピー」しておけば、クロージャーの定義元が消滅しても値を保持することができる。一方で、「参照」でアクセスすることを指定した変数は、クロージャーの定義元が消失した後にアクセスした場合の動作が未定義である。

JavaScriptのクロージャーでは、C++ほど直接的に変数へのアクセス設定をできない

JavaScriptのクロージャーの基本的なシンタックスを以下に示す[3]。

(引数,...)=>{...関数の本体...}

C++では、ラムダ導入子により変数へのアクセス方法を詳しく指定できたが、JavaScriptでは、そのような詳細なアクセス指定の方法は調べた範囲では見つからなかった。
しかしながら、逆に考えると、クロージャーを用いて変数を掩蔽することができるといえる。

開発・実行環境

ブラウザ Google Chrome
バージョン: 78.0.3904.70（Official Build）（64 ビット）
起動時オプション:
--flag-switches-begin --flag-switches-end

PC
プロセッサ: Intel(R) Core(TM) i5-5200U CPU @2.20GHz
メモリ: 8.00 GB
OS: Windows 8.1 (64bit)
compiler: Microsoft (R) C/C++ Optimizing Compiler Version 19.00.24215.1 for x86
Visual Studio: 14.0

コード

main.cc

#include <stdio.h>
#include <functional>

#define show(EXPRESSION)         \
  {                              \
    printf("%s\n", #EXPRESSION); \
    printf("%d\n", EXPRESSION);  \
    printf("\n");                \
  }

std::function<int(int)> CreateAdd(int add) {
  return [add](int i) { return i + add; };  // Use copy of add.
}

std::function<int(int)> CreateAddRef(int add) {
  return [&add](int i) { return i + add; };  // Use reference to add.
}

int main(int argc, char* argv[]) {
  (void)argc;
  (void)argv;

  auto add1 = CreateAdd(1);
  auto add2 = CreateAdd(2);
  show(add1(1))
  show(add2(1))

  auto addref1 = CreateAddRef(1);
  auto addref2 = CreateAddRef(2);
  show(addref1(1))  // Behavior is undefined.
  show(addref2(1))  // Behavior is undefined.

  return 0;
}

C++におけるクロージャーの実装例である。

std::function<int(int)> CreateAdd(int add) {
  return [add](int i) { return i + add; };  // Use copy of add.
}

この関数はクロージャーオブジェクトを生成する関数である。
生成されたクロージャーオブジェクトは、引数にある数を受け取り、クロージャー生成関数に渡した数を加える機能を持つ。

  auto add1 = CreateAdd(1);
  auto add2 = CreateAdd(2);
  show(add1(1))
  show(add2(1))

クロージャー生成関数に渡された引数は、この関数が消滅した後もクロージャーから利用することができる。なぜなら、消滅してしまったクロージャー生成関数の引数の値をコピーしてあるからだ。

std::function<int(int)> CreateAddRef(int add) {
  return [&add](int i) { return i + add; };  // Use reference to add.
}

この関数もクロージャーオブジェクトを生成する関数である。
先ほどのクロージャー生成関数と異なる点は、ラムダ指定子で変数へのアクセス方法を参照としている点だ。

  auto addref1 = CreateAddRef(1);
  auto addref2 = CreateAddRef(2);
  show(addref1(1))  // Behavior is undefined.
  show(addref2(1))  // Behavior is undefined.

このように、クロージャー生成関数が消滅した後に、クロージャーで参照するクロージャー生成関数の引数にアクセスすることは、動作が未定義であるため、してはいけない。
（一応動いたけど、わけの分からん値が表示された）

ここら辺のことについては、こちらの質問と回答に詳しい[4]。

test.html

<!DOCTYPE html>
<html>
  <head>
    <meta charser="utf-8" />
    <title>count</title>
    <link rel="manifest" href="/manifest.json">
    <script type="text/javascript">
      function createCounter() {
        var count = 0;
        return function() {
          let elem = document.getElementById("id_count");
          elem.innerText = count;
          ++count;
        }
      }
      var counter = createCounter();
      // console.log(count);  // Error... 'count' cannot be seen from here.
    </script>
  </head>
  <body>
    <input type="button" value="Increment" onclick="counter();"><br />
    count: <span id="id_count"></span><br />
  </body>
</html>

JavaScriptにおけるクロージャーの実装例である。

      function createCounter() {
        var count = 0;
        return function() {
          let elem = document.getElementById("id_count");
          elem.innerText = count;
          ++count;
        }
      }

この部分の記述はクロージャーオブジェクトを生成する関数リテラルである。

      var counter = createCounter();

変数counterにクロージャーオブジェクトを代入する。

    <input type="button" value="Increment" onclick="counter();"><br />

ボタンをクリックした際に、クロージャー生成関数内部のスコープにある変数varへアクセスし、ドキュメントにカウンタの値を表示し、カウンタの値を増加させる。

      // console.log(count);  // Error... 'count' cannot be seen from here.

クロージャー生成関数とクロージャーの外側からカウンタにアクセスすることはできない。

実行結果

count:

test.htmlの一部を埋め込んだ。

まとめ

クロージャーオブジェクトと通常の関数宣言の違いは、スコープ内部変数のコピーや参照をキャプチャしたクロージャーオブジェクトを生成することができる点である
C++、JavaScriptのいずれもクロージャーの実装をすることができる
C++では変数へのアクセス方法の詳細な指定ができる一方で、JavaScriptではC++ほど詳細なアクセス指定の仕組みが無いと思われる（調べた範囲では）。逆に考えると、JavaScriptではクロージャーを用いることにより変数の掩蔽をすることができるといえる

感想

ラムダ式というと関数型プログラミングのイメージが強い（関数型はhaskellでハローワールドしたことのある程度の初心者）。
一般的なラムダ式に関する理解は足りていないと思うが、少なくともC++では、ラムダ式よりもクロージャーとして考えた方が理解しやすいかもしれないと思った。

付録

今回のコードの最新版(C++の方)をここに上げる。

蜻蛉のバグ取り部屋

ページ

2019年11月3日日曜日

【C++、JavaScript】クロージャーについて