JavaScriptの別の関数内で関数を定義する

function foo(a) {
    if (/* Some condition */) {
        // perform task 1
        // perform task 3
    }
    else {
        // perform task 2
        // perform task 3
    }
}

上記と同様の構造の関数があります。タスク3を関数に抽象化したいのですがbar()、この関数へのアクセスをfoo(a)。の範囲内に限定したいと思います。

私が望むことを達成するために、次のように変更するのは正しいですか？

function foo(a) {
    function bar() {
        // Perform task 3
    }

    if (/* Some condition */) {
        // Perform task 1
        bar();
    }
    else {
        // Perform task 2
        bar();
    }
}

上記が正しければ、呼び出されるbar()たびに再定義さfoo(a)れますか？（ここではCPUリソースの浪費が心配です。）

はい、あなたが持っているものは正しいです。いくつかの注意：

• bar関数を呼び出すたびに作成されますが、次のようになりますfoo。
  • 最近のブラウザでは、これは非常に高速なプロセスです。（一部のエンジンは、コードを1回だけコンパイルし、そのコードを毎回異なるコンテキストで再利用する場合があります。ほとんどの場合、GoogleのV8エンジン（Chromeなど）がそれを行います。）
  • また、機能によってbarは、一部のエンジンが「インライン化」できると判断し、関数呼び出しを完全に排除する場合があります。V8はこれを行います、そして私はそれがする唯一のエンジンではないと確信しています。当然、コードの動作を変更しない場合にのみ、これを実行できます。
• bar毎回作成した場合のパフォーマンスへの影響は、JavaScriptエンジン間で大きく異なります。barが些細な場合は、検出できないものからかなり小さいものまでさまざまです。foo何千回も続けて（たとえば、mousemoveハンドラーから）呼び出していない場合は、心配する必要はありません。たとえそうだとしても、遅いエンジンで問題が発生した場合にのみ心配します。これはDOM操作を含むテストケースです。これは影響があることを示唆していますが、些細なものです（おそらくDOMのものによって洗い流されています）。ここでは、純粋な計算やってテストケースだはるかに高いの影響を示しているが、率直に言ってさえ、我々はの違い話をしているマイクロ取る何かでさえ92％増ので秒マイクロ発生する秒数はまだ非常に、非常に速いです。実際の影響が見られるまで/見ない限り、心配する必要はありません。
• bar関数内からのみアクセス可能であり、関数へのその呼び出しのすべての変数と引数にアクセスできます。これはこれを非常に便利なパターンにします。
• 関数宣言を使用したので、宣言をどこに置くかは問題ではないことに注意してください（上、下、または中央-フロー制御ステートメント内ではなく、関数のトップレベルにある限り）。構文エラー）、段階的なコードの最初の行が実行される前に定義されます。

これがクロージャの目的です。

var foo = (function () {
  function bar() {
    // perform task 3
  };

  function innerfoo (a) { 
    if (/* some cond */ ) {
      // perform task 1
      bar();
    }
    else {
      // perform task 2
      bar();
    }
  }
  return innerfoo;
})();

Innerfoo（クロージャ）はbarへの参照を保持し、innerfooへの参照のみが、クロージャを作成するために1回だけ呼び出される無名関数から返されます。

この方法でバーに外部からアクセスすることはできません。

var foo = (function () {
    var bar = function () {
        // perform task 3
    }
    return function (a) {

        if (/*some condition*/) {
            // perform task 1
            bar();
        }
        else {
            // perform task 2
            bar();
        }
    };
}());

クロージャは包含のスコープを保持bar()し、自己実行無名関数から新しい関数を返すと、より目に見えるスコープがに設定されfoo()ます。匿名の自己実行関数は1回だけbar()実行foo()されるため、インスタンスは1つだけで、実行するたびにそれが使用されます。

はい、問題なく動作します。

内側の関数は、外側の関数に入るたびに再作成されるわけではありませんが、再割り当てされます。

このコードをテストする場合：

function test() {

    function demo() { alert('1'); }

    demo();
    demo = function() { alert('2'); };
    demo();

}

test();
test();

それが表示されます1、2、1、2、ではありません1、2、2、2。

ネストされたテストケースとネストされていない関数、および関数式と関数宣言をテストするためにjsperfを作成しましたが、ネストされたテストケースがネストされていないテストケースよりも20倍高速に実行されたことに驚きました。（私は反対または無視できる違いを予想しました）。

https://jsperf.com/nested-functions-vs-not-nested-2/1

これはChrome76、macOSにあります。