JavaScript에서 (function () {}) () 구문은 무엇입니까? 지금은 어려움을 겪고 있습니다 … 이것이

나는 이것이 무엇을 의미하는지 알고 있었지만 지금은 어려움을 겪고 있습니다 …

이것이 기본적으로 말하고 document.onload있습니까?

(function () {

})();

답변

그것은이다 즉시-호출 기능 발현 , 또는 인생 에 대한 짧은. 생성 된 직후에 실행됩니다.

이벤트와 같은 이벤트 핸들러와 관련이 없습니다 (예 🙂 document.onload.
첫 번째 괄호 쌍 내의 부분을 고려하십시오. …. 일반 함수 표현식입니다. 그런 다음 마지막 쌍을보십시오 . 이것은 일반적으로 함수를 호출하기 위해 표현식에 추가됩니다. 이 경우, 우리의 이전 표현.(function(){})();(function(){})();

IIFE 내부에 사용 된 모든 변수 (다른 일반 함수 에서처럼 )는 해당 범위 외부에서 보이지 않기 때문에이 패턴은 전역 네임 스페이스를 오염시키지 않으려 고 할 때 자주 사용됩니다 .
이것이 아마도 다음과 같이 window.onload종종 사용되기 때문에이 구조를 이벤트 핸들러와 혼동하는 이유입니다. 

(function(){
  // all your code here
  var foo = function() {};
  window.onload = foo;
  // ...
})();
// foo is unreachable here (it’s undefined)

Guffa가 제안한 수정 :

함수는 구문 분석 된 후가 아니라 작성된 직후에 실행됩니다. 코드가 실행되기 전에 전체 스크립트 블록이 구문 분석됩니다. 또한 구문 분석 코드가 자동으로 실행되는 것을 의미하지는 않습니다. 예를 들어 IIFE가 함수 안에 있으면 함수가 호출 될 때까지 실행되지 않습니다.

업데이트
이것은 꽤 인기있는 주제이므로 IIFE는 ES6의 화살표 기능으로 도 작성할 수 있습니다 ( Gajus 가 주석에서 지적한 것처럼 ).

((foo) => {
 // do something with foo here foo
})('foo value')

답변

그것은 생성 된 직후에 실행되는 익명 함수입니다.

마치 변수에 변수를 할당하고 변수없이 만 바로 사용하는 것과 같습니다.

var f = function () {
};
f();

jQuery에는 비슷한 구조가 있습니다.

$(function(){
});

이것이 ready이벤트 바인딩의 짧은 형식입니다 .

$(document).ready(function(){
});

그러나 위의 두 구성은 IIFE 가 아닙니다 .

답변

IIFE (즉시 호출 된 함수 식)는 즉시 함수를 호출합니다. 이는 정의가 완료된 직후 함수가 실행됨을 의미합니다.

세 가지 더 일반적인 표현 :

// Crockford's preference - parens on the inside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
}());

//The OPs example, parentheses on the outside
(function() {
  console.log('Welcome to the Internet. Please follow me.');
})();

//Using the exclamation mark operator
//https://stackoverflow.com/a/5654929/1175496
!function() {
  console.log('Welcome to the Internet. Please follow me.');
}();

반환 값에 대한 특별한 요구 사항이 없으면 다음과 같이 쓸 수 있습니다.

!function(){}();  // => true
~function(){}(); // => -1
+function(){}(); // => NaN
-function(){}();  // => NaN

또는 다음이 될 수 있습니다.

~(function(){})();
void function(){}();
true && function(){ /* code */ }();
15.0, function(){ /* code */ }();

당신은 쓸 수도 있습니다 :

new function(){ /* code */ }
31.new function(){ /* code */ }() //If no parameters, the last () is not required

답변

익명 함수를 선언 한 다음 호출합니다.

(function (local_arg) {
   // anonymous function
   console.log(local_arg);
})(arg);

답변

즉, 즉시 실행하는 것입니다.

그래서 내가하면 :

var val = (function(){
     var a = 0;  // in the scope of this function
     return function(x){
         a += x;
         return a;
     };
})();

alert(val(10)); //10
alert(val(11)); //21

피들 : http://jsfiddle.net/maniator/LqvpQ/

두 번째 예 :

var val = (function(){
     return 13 + 5;
})();

alert(val); //18

답변

이 구문을 즉시 호출 된 함수 식 (IIFE) 이라고하며 즉시 실행됩니다. 인터프리터가 해당 함수에 도달하면 자동으로 호출되는 함수로 생각하십시오.

가장 일반적인 사용 사례 :

가장 일반적인 사용 사례 중 하나는를 통해 작성된 변수의 범위를 제한하는 것 var입니다. 통해 생성 된 변수 var는 범위가 함수로 제한 되므로이 구조 (특정 코드를 중심으로 함수 래퍼)는 변수 범위가 해당 함수에서 누출되지 않도록합니다.

다음 예에서는 count즉시 호출 된 함수 외부에서 사용할 수 없습니다. 즉, 범위가 count함수에서 누출되지 않습니다. 당신은을 받아야 ReferenceError어쨌든 바로 호출 기능을 외부에서 액세스하려고한다.

(function () {
    var count = 10;
})();
console.log(count);  // Reference Error: count is not defined

ES6 대안 (권장)

ES6, 우리는 지금 통해 생성 된 변수 수 let와 const. 둘 다 블록 범위입니다 ( var기능 범위 와 달리 ).

따라서 위에서 언급 한 유스 케이스에 IIFE의 복잡한 구성을 사용하는 대신 변수 범위가 원하는 블록에서 누출되지 않도록 훨씬 간단한 코드를 작성할 수 있습니다. 

{
    let count = 10;
}
console.log(count);  // ReferenceError: count is not defined

이 예제에서는 중괄호로 만든 코드 블록으로 제한되는 변수 let를 정의했습니다 .countcount{...}

나는 그것을“Curly Jail”이라고 부릅니다.

답변

(function () {
})();

이를 IIFE (즉시 호출 함수 표현식)라고합니다. 유명한 JavaScript 디자인 패턴 중 하나는 현대 모듈 패턴의 핵심입니다. 이름에서 알 수 있듯이 생성 된 직후에 실행됩니다. 이 패턴은 격리 또는 개인 실행 범위를 만듭니다.

ECMAScript 6 이전의 JavaScript는 어휘 범위를 사용 했으므로 IIFE는 블록 범위를 시뮬레이션하는 데 사용되었습니다. ECMAScript 6에서는 let및 const키워드를 소개하여 블록 범위를 지정할 수 있습니다.
어휘 범위 문제에 대한 참조

IIFE로 블록 범위 시뮬레이션

인생의 사용의 성능 이점은 같은 일반적으로 사용되는 전역 개체 전달하는 능력이다 window, document범위 조회를 줄여 인수로 등. JavaScript는 로컬 범위에서 속성을 찾고 전역 범위까지 체인을 확장합니다. 따라서 로컬 범위에서 전역 객체에 액세스하면 아래와 같이 조회 시간이 줄어 듭니다.

(function (globalObj) {
//Access the globalObj
})(window);