자바 스크립트의 다른 함수 내에서 함수 정의

자바 스크립트의 다른 함수 내에서 함수 정의

---

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()될 때마다 get이 재정의 foo(a)됩니까? (여기 CPU 자원 낭비 걱정)

---

네, 당신이 가지고있는 것이 옳습니다. 몇 가지 참고 사항 :

• bar함수를 호출 할 때마다 생성 foo되지만 :
  • 최신 브라우저에서 이것은 매우 빠른 프로세스입니다. (일부 엔진은 코드 를 한 번만 컴파일 한 다음 매번 다른 컨텍스트로 해당 코드를 재사용 할 수 있습니다. 대부분의 경우 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에 대한 참조 만 반환됩니다.

Bar is not accessible from the outside this way.

---

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

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

The closure keeps the scope of bar() contained, returning the new function from the self-executing anonymous function sets more visible scope to foo(). The anonymous self-executing function is run exactly once, so there is only one bar() instance, and every execution of foo() will use it.

---

Yes, that works fine.

The inner function is not recreated each time you enter the outer function, but it's re-assigned.

If you test this code:

function test() {

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

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

}

test();
test();

it will show 1, 2, 1, 2, not 1, 2, 2, 2.

---

I created a jsperf to test nested vs. non-nested and function expressions vs. function declarations, and I was surprised to see that the nested test cases performed 20x faster than non-nested. (I anticipated either the opposite or negligible differences).

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

This is on Chrome 76, macOS.

참고URL : https://stackoverflow.com/questions/10204420/define-function-within-another-function-in-javascript