자바 스크립트의 초기화 기능 및 작동 방식

자바 스크립트의 초기화 기능 및 작동 방식

---

다음 코드가 자주 표시됩니다.

(function () {
  // init part
})();

그러나 나는 그것이 어떻게 작동하는지에 대해 결코 이해할 수 없었습니다. 마지막 대괄호가 특히 혼란 스럽습니다. 누군가 EC (실행 컨텍스트) 및 VO (변수 객체) 측면에서 작동 방식을 설명 할 수 있습니까?

---

이 패턴은 모든 지역 변수 객체 (VO)가 존재하는 새로운 실행 컨텍스트 (EC)를 생성하며, 마찬가지로 EC가 종료되면 죽습니다. 이 수명의 유일한 예외는 클로저의 일부가되는 VO에 대한 것 입니다.

JavaScript에는 마법의 "init"기능이 없습니다. 대부분의 자존심이 강한 JS 라이브러리 (jQuery, YUI 등)가 필요 이상으로 전역 NS를 오염시키지 않도록이 작업을 수행하므로이 패턴을 이러한 패턴과 연관시킬 수 있습니다.

데모 :

var x = 1; // global VO
(function(){        
    var x = 2; // local VO
})();
x == 1; // global VO, unchanged by the local VO

두 번째 "대괄호"집합 (실제로는 괄호 또는 괄호 집합이라고 함)은 바로 앞에있는 함수 식을 호출하는 것입니다 (이전 괄호 집합에 정의 됨).

---

제가 보통 사람들에게 이것을 설명하는 방법은 그것이 다른 자바 스크립트 패턴과 어떻게 유사한 지 보여주는 것입니다.

먼저 함수를 선언하는 두 가지 방법이 있음을 알아야합니다 (실제로는 최소한 5 가지가 있지만 두 가지 주요 원인이 있습니다).

function foo() {/*code*/}

과

var foo = function() {/*code*/};

이 구조가 이상해 보이더라도 이벤트를 첨부 할 때 항상 사용합니다.

window.onload=function(){/*code*/};

두 번째 형식은 일반 변수 선언과 크게 다르지 않습니다.

var bar = 5;
var baz = 'some string';
var foo = function() {/*code*/};

그러나 JavaScript에서는 항상 값을 직접 사용하거나 변수를 통해 사용할 수 있습니다. 경우 bar이며 5, 그 다음 두 명령문은 동일합니다 :

var myVal = bar * 100; // use 'bar'
var myVal = 5 * 100;   // don't use 'bar'

글쎄, 당신 5이 단독으로 사용할 수 있다면 , 왜 당신 function() {\*code*\}도 단독으로 사용할 수 없습니까? 실제로 할 수 있습니다. 이를 익명 함수라고합니다. 따라서이 두 가지 예도 동일합니다.

var foo = function() {/*code*/}; // use 'foo'
foo();                           

(function(){/*code*/}());        // don't use 'foo' 

당신이 볼 유일한 차이점은 여분의 괄호에 있습니다. 이는 단순히 키워드로 줄을 시작 function하면 파서가이 답변의 맨 위에있는 첫 번째 패턴을 사용하여 함수를 선언한다고 생각하고 구문 오류 예외를 던지기 때문입니다. 따라서 전체 익명 함수를 중괄호로 감싸면 문제가 사라집니다.

즉, 다음 세 가지 문이 유효합니다.

5;                        // pointless and stupid
'some string';            // pointless and stupid
(function(){/*code*/}()); // wonderfully powerful

---

이 코드는 익명 함수를 만든 다음 즉시 실행합니다. 비슷하다:

var temp = function() {
  // init part
}
temp();

이 구성의 목적은 함수 내부에 코드 범위를 만드는 것입니다. 범위 내에서 변수와 함수를 선언 할 수 있으며 해당 범위에 로컬이됩니다. 이렇게하면 전역 범위가 복잡해지지 않으므로 다른 스크립트와의 충돌 위험이 최소화됩니다.

---

아무도 작전 질문에 답하지 않았다 니 믿을 수 없습니다!

마지막 대괄호 세트는 매개 변수를 익명 함수로 전달하는 데 사용됩니다. 따라서 다음 예제에서는 함수를 만든 다음 x = 5 및 y = 8로 실행합니다.

(function(x,y){
    //code here
})(5,8)

이것은 그다지 유용하지 않은 것 같지만 그 자리가 있습니다. 내가 본 가장 흔한 것은

(function($){
    //code here
})(jQuery)

이는 jQuery가 호환 모드가되도록 허용하지만 익명 함수 내에서 "$"로 참조 할 수 있습니다.

---

자체 호출 익명 함수 (SIAF)

자체 호출 함수는 DOM이 완전히 준비되지 않은 경우에도 즉시 실행됩니다.

jQuery document.ready vs self calling anonymous function

---

In simple word you can understand that whenever page load, by this second pair of brackets () function will have called default.We need not call the function.It is known as anonymous function.

i.e.

(function(a,b){
//Do your code here
})(1,2);

It same like as

var test = function(x,y) {
  // Do your code here
}
test(1,2);

---

Its is called immediatly invoking function expression (IIFE). Mainly associated with the JavaScript closure concept. Main use is to run the function before the global variable changed, so that the expected behaviour of code can be retained.

ReferenceURL : https://stackoverflow.com/questions/4212149/init-function-in-javascript-and-how-it-works