누군가이 JavaScript로 함수 랩핑 구문을 설명 할 수 있습니까?

Question

다음 예에서 변수 범위의 개념을 이해하고 있지만 누군가 은 함수 줄 바꿈 구문(...)();을 설명 할 수 있습니다. 실제로 일상적인 자바 스크립트 프로그래밍에서는 어떻게 사용합니까? PHP/Java/C#에서 내가 아는 것은 아닙니다.

window.onload = function() { 
    var i = 4; 
    console.log(i); //4 
    (function showIt() { 
     var i = 'whatever'; 
     console.log(i); //whatever 
    })(); 
    console.log(i); //4 
}; 

Answer 1

이 양식이 유용한 여러 가지 방법이 있습니다. 하나는 코드 세그먼트를 어휘 적으로 범위 지정하여 코드의 내부 변수와 메서드가 포함 된 코드 본문과 분리되어 있습니다. 이 방법으로, 자바 스크립트의 블록 범위 지정 방법입니다. 하지만이 형식을 사용하는 가장 일반적인 방법이 대안으로이다 :

var ret = { 
    depth:0, 
    initialized:false, 
    helper:function() { /*help with some stuff*/ }, 
    initialize:function(){ /*do some initialization code*/ }, 
    action:function(){/*do the thing you want*/} 
    destroy:function() { /*clean up*/ } 
} 

절대적으로 매우 시간이없는 중괄호와 쉼표를 찾기 위해 소모된다이 형식에 대해 저를 죽이는 것은. 예를 들어 위의 코드는 action 선언 끝에 쉼표가 없으므로 작동하지 않습니다. 예외가 발생하면 문제가 발생하기 때문에 문제를 발견하는 데 어려움이있었습니다. "문제를 일으키는"부분이 아니라 전체 진술. 이것은 피할 수만 있다면 더 이상이 형식을 사용하지 않는 예측 가능한 문제입니다. 내가 거부. 대신 다음과 같이 훨씬 더 명확하게 작성할 수 있습니다.

var ret = (function(){ 
    var self = {}, 
     initialized = false; 

    var helper = function() { /*help with some stuff*/ }; 

    self.depth = 0; 
    self.initialize = function() {/*do some initialization*/}; 
    self.action = function() {/*do the thing you want*/}; 
    self.destroy = function() { /*clean up*/ }; 

    return self; 
}()); 

저에게는 두 가지 큰 이점이 있습니다. 누락 된 중괄호와 쉼표가 더 쉽게 발견 될 수 있습니다 (예외가 발생하면 줄 번호가 누락 된 영역에 가깝습니다). 둘째, 일부 변수와 메소드를 비공개로 유지하고 첫 번째 코드 블록의 모든 이점을 유지할 수 있습니다.

마지막으로이 형식에 대한 플러그는 위의 코드 (Singleton과 같은 종류)를 1) 외부에서 호출 중괄호를 제거하고 2) self = {}을 변경하여 생성자로 변환 할 수 있다는 것입니다. self = this 및 3) 임의로 끝에 return self 제거하려면 다음,`그 때문에

var Ret = function(){ 
    var self = this, 
     initialized = false; 

    var helper = function() { /*help with some stuff*/ }; 

    self.depth = 0; 
    self.initialize = function() {/*do some initialization*/}; 
    self.action = function() {/*do the thing you want*/}; 
    self.destroy = function() { /*clean up*/ }; 

    return self; // this is ignored by the compiler if used as a constructor 
}; 
var ret = new Ret(); 

Answer 2

자바 스크립트에 함수 리터럴이 있습니다. 함수 리터럴을 만들고 표현식의 결과를 호출하는 것뿐입니다. 너를 혼란스럽게하는 이름인가? 모든 이름은 자체 본문 내부의 함수를 참조하는 데 사용되며 선택 사항입니다. (IE 8 이전 버전과 호환되지 않습니다.)

Answer 3

이것은 이미 알고있는 것과 유사한 기능 showIT (function showIT() {...} 사용)을 정의합니다. 끝에있는 ()은 정의 된 것과 동일한 행에서 함수를 직접 호출합니다. 그것은 아마도 당신에게 새로운 부분 일 것입니다. 함수를 호출하는 데 showIT()이라고 말한 것처럼 이름을 실제 정의로 바꿀 수 있으며 자바 스크립트에서 작동합니다.

Answer 4

변수 이름에 블록 범위가있는 C와 달리 JavaScript (Pico와 같은)는 기능 범위 만 가지고 있습니다.

따라서 새 이름 범위를 만들려면 { ... }을 C에서와 같이 사용할 수 없으므로 (function() { ... })();을 사용해야합니다.