자바스크립트에서 자체 실행 함수의 목적은 무엇입니까?

Question

자바스크립트에서는 언제 이것을 사용하고 싶습니까?

(function(){
    //Bunch of code...
})();

이에 대해:

//Bunch of code...

Answer 1

가변 범위에 관한 모든 것. 자체 실행 기능에서 선언 된 변수는 기본적으로 자체 실행 기능 내에서 코드 만 사용할 수 있습니다. 이를 통해 JavaScript 코드의 다른 블록에서 변수의 이름이 어떻게 명명되는지에 대한 우려없이 코드를 작성할 수 있습니다.

예를 들어:

(function(){ 
    var foo = 3; 
    alert(foo); 
})(); 

alert(foo); 

FOO가 정의되지 않기 때문에 먼저 "3"을 알리고 다음 경고에 오류가 발생합니다.

Answer 2

단순합니다. 매우 정상적인 모습, 거의 편안함 :

var userName = "Sean";

console.log(name());

function name() {
  return userName;
}

하지만. 고급 문자를 기본 레벨 표현으로 변환하는 매우 편리한 JavaScript 라이브러리를 내 페이지에 포함 시키면 어떻게됩니까?

무엇을 기다립니다?

내말은. 누군가가 어떤 종류의 악센트로 캐릭터를 입력 한 경우 (예 : 프랑스어 또는 스페인어 캐릭터와 같은) '영어'캐릭터 만 원하십니까? 내 프로그램에서 AZ? 글쎄 ... 스페인어 'n ~'와 프랑스어 'e/'캐릭터 (나는 각각 두 캐릭터를 사용했지만 악센트를 나타내는 캐릭터로 정신적으로 도약 할 수 있습니다), 해당 캐릭터는 번역 될 수 있습니다. 'n'과 'e'의 기본 문자로.

그래서 좋은 사람이 내 사이트에 포함시킬 수있는 포괄적 인 캐릭터 컨버터를 작성했습니다.

한 가지 문제 : 내 함수와 동일한 '이름'이라는 기능이 있습니다.

이것이 충돌이라고합니다. 우리는 두 가지 기능을 동일하게 선언했습니다 범위 같은 이름으로. 우리는 이것을 피하고 싶습니다.

그래서 우리는 어떻게 든 코드를 범위로 삼아야합니다.

JavaScript에서 코드를 범위로하는 유일한 방법은 기능으로 래핑하는 것입니다.

function main() {
  // We are now in our own sound-proofed room and the 
  // character-converter libarary's name() function can exist at the 
  // same time as ours. 

  var userName = "Sean";

  console.log(name());

  function name() {
    return userName;
  }
}

그것은 우리의 문제를 해결할 수 있습니다. 이제 모든 것이 밀폐되어 있으며 개구부 및 닫는 버팀대 내에서만 액세스 할 수 있습니다.

우리는 함수에 함수가 있습니다 ... 보는 것이 이상하지만 완전히 합법적입니다.

단 하나의 문제. 우리 코드는 작동하지 않습니다. 우리의 사용자 이름 변수는 콘솔에 반영되지 않습니다!

기존 코드 블록 후 기능에 호출을 추가 하여이 문제를 해결할 수 있습니다 ...

function main() {
  // We are now in our own sound-proofed room and the 
  // character-converter libarary's name() function can exist at the 
  // same time as ours. 

  var userName = "Sean";

  console.log(name());

  function name() {
    return userName;
  }
}

main();

또는 전에!

main();

function main() {
  // We are now in our own sound-proofed room and the 
  // character-converter libarary's name() function can exist at the 
  // same time as ours. 

  var userName = "Sean";

  console.log(name());

  function name() {
    return userName;
  }
}

이차적 인 관심사 : '메인'이라는 이름이 아직 사용되지 않은 기회는 무엇입니까? ... 너무 날씬합니다.

더 많은 범위가 필요합니다. Main () 함수를 자동으로 실행하는 방법.

이제 우리는 자동 실행 기능 (또는 자체 실행, 자기 운영 등)에옵니다.

((){})();

구문은 죄처럼 어색합니다. 그러나 작동합니다.

함수 정의를 괄호 안에 래핑하고 매개 변수 목록 (다른 세트 또는 괄호!)을 포함시킬 때 함수 역할을합니다. 전화.

자체 실행 구문으로 코드를 다시 살펴 보겠습니다.

(function main() {
  var userName = "Sean";

    console.log(name());

    function name() {
      return userName;
    }
  }
)();

따라서 읽은 대부분의 튜토리얼에서는 이제 '익명 자체 실행'이라는 용어 또는 유사한 용어로 폭격을 일으킬 것입니다.

수년간의 전문성 개발 후, i 강하게 이름을 촉구합니다 당신이 쓴 모든 기능 디버깅 목적.

뭔가 잘못되면 (그리고 그것은) 브라우저에서 뒤로를 확인하게됩니다. 그것은이다 언제나 스택 추적의 항목에 이름이있을 때 코드 문제를 좁힐 수 있습니다!

대단히 바람이 불고 도움이되기를 바랍니다!

Answer 3

자체-보정 (자동 인상으로도 알려짐)은 함수가 해당 정의에 즉시 실행될 때입니다. 이것은 핵심 패턴이며 다른 많은 패턴의 JavaScript 개발의 기초 역할을합니다.

나는 훌륭한 팬입니다 :)

• 코드를 최소로 유지합니다
• 프레젠테이션에서 행동의 분리를 시행합니다
• 그것은 명명 충돌을 방지하는 폐쇄를 제공합니다

엄청나게 - (왜 좋은 말을해야합니까?)

• 한 번에 함수를 정의하고 실행하는 것입니다.
• 자체 실행 함수가 값을 반환하고 함수를 다른 함수로 전달할 수 있습니다.
• 캡슐화에 좋습니다.
• 블록 스코핑에도 좋습니다.
• 예, 모든 .js 파일을 자체 실행 기능으로 동봉하고 글로벌 네임 스페이스 오염을 방지 할 수 있습니다. ;)

더 여기.

Answer 4

네임 스페이스. JavaScript의 스코프는 기능 수준입니다.

Answer 5

묵시적인 전역 변수에 대한 답변 중 어느 것도 언급되지 않았다는 것을 믿을 수 없습니다.

그만큼 (function(){})() 구문은 나에게 더 큰 관심사인 암시적 전역 변수로부터 보호하지 않습니다. http://yuiblog.com/blog/2006/06/01/global-domination/

기본적으로 함수 블록은 정의한 모든 종속 "전역 변수"가 프로그램에 국한되어 있는지 확인하며 암시적 전역 정의로부터 사용자를 보호하지 않습니다. JSHint 등은 이러한 행동을 방어하는 방법에 대한 권장 사항을 제공할 수 있습니다.

간결할수록 var App = {} 구문은 유사한 수준의 보호를 제공하며 '공개' 페이지에 있을 때 함수 블록에 래핑될 수 있습니다.(보다 Ember.js 또는 새싹코어 이 구성을 사용하는 라이브러리의 실제 예를 보려면)

한 private 속성은 공용 프레임워크나 라이브러리를 만들지 않는 한 다소 과대평가되지만 구현해야 하는 경우에는 더글라스 크록포드 좋은 아이디어가 있어요.

Answer 6

매개 변수가 있고 "많은 코드"가 함수를 반환합니까?

var a = function(x) { return function() { document.write(x); } }(something);

폐쇄. 의 가치 something 할당 된 함수에 의해 사용됩니다 a. something 약간의 값 (루프)을 가질 수 있으며 매번 A는 새로운 기능을 가질 수 있습니다.

Answer 7

나는 모든 답을 읽었습니다. 여기에서 매우 중요한 것이 빠져 있습니다, 나는 키스 할 것이다. 자기 실행 익명 기능이 필요한 이유는 두 가지 주요 이유가 있습니다.즉시 침입 된 기능 표현 (IIFE)":

1. 더 나은 네임 스페이스 관리 (네임 스페이스 오염 방지 -> JS 모듈)
2. 클로저 (OOP에서 알려진 개인 클래스 멤버 시뮬레이션)

첫 번째는 매우 잘 설명되었습니다. 두 번째는 다음 예를 연구하십시오.

var MyClosureObject = (function (){
  var MyName = 'Michael Jackson RIP';
  return {
    getMyName: function () { return MyName;},
    setMyName: function (name) { MyName = name}
  }
}());

주의 1 : : : : 우리는 기능을 할당하지 않습니다 MyClosureObject, 뿐만 아니라 그 기능을 호출 한 결과. 알고 있어야합니다 () 마지막 줄에서.

Attention 2: JavaScript의 기능에 대해 추가로 알아야 할 것은 내부 기능이 얻는다는 것입니다. 매개 변수 및 변수에 대한 액세스 함수의 내부에 정의됩니다.

몇 가지 실험을 시도해 봅시다.

나는 얻을 수있다 MyName 사용 getMyName 그리고 그것은 작동합니다 :

 console.log(MyClosureObject.getMyName()); 
 // Michael Jackson RIP

다음과 같은 독창적 인 접근 방식은 작동하지 않습니다.

console.log(MyClosureObject.MyName); 
// undefined

그러나 다른 이름을 설정하고 예상 결과를 얻을 수 있습니다.

MyClosureObject.setMyName('George Michael RIP');
console.log(MyClosureObject.getMyName()); 
// George Michael RIP

편집하다: 위의 예에서 MyClosureObject 없이 사용하도록 설계되었습니다 new접두사, 따라서 협약별로는 대문자가되어서는 안됩니다.

Answer 8

범위 격리. 함수 선언 내부의 변수가 외부 네임 스페이스를 오염시키지 않도록합니다.

물론 JS 구현의 절반에서 어쨌든 그들은 어쨌든 할 것입니다.

Answer 9

다음은 익명의 자체 호출 기능이 어떻게 유용 할 수 있는지에 대한 확실한 예입니다.

for( var i = 0; i < 10; i++ ) {
  setTimeout(function(){
    console.log(i)
  })
}

산출: 10, 10, 10, 10, 10...

for( var i = 0; i < 10; i++ ) {
  (function(num){
    setTimeout(function(){
      console.log(num)
    })
  })(i)
}

산출: 0, 1, 2, 3, 4...

Answer 10

한 가지 차이점은 함수에서 선언하는 변수가 로컬이므로 함수를 종료 할 때 사라지고 다른 코드의 다른 변수와 충돌하지 않습니다.

Answer 11

자바 스크립트에서 자체 호출 기능 :

자체 침입 표현은 부름받지 않고 자동으로 (시작) 호출됩니다. 자체 침입 표현은 생성 된 직후에 호출됩니다. 이것은 기본적으로 명명 충돌을 피하고 캡슐화를 달성하는 데 사용됩니다. 이 함수 외부에서는 변수 또는 선언 된 객체에 액세스 할 수 없습니다. 최소화 문제를 피하기 위해 (filename.min)는 항상 자체 실행 기능을 사용하십시오.

Answer 12

JavaScript의 함수는 일류 객체이므로이를 정의함으로써 C ++ 또는 C#과 유사한 "클래스"를 효과적으로 정의합니다.

이 함수는 로컬 변수를 정의하고 그 안에 함수를 가질 수 있습니다. 내부 함수 (효과적으로 인스턴스 방법)는 로컬 변수 (효과적으로 인스턴스 변수)에 액세스 할 수 있지만 나머지 스크립트에서 격리됩니다.

Answer 13

자체 실행 기능은 변수의 범위를 관리하는 데 사용됩니다.

변수의 범위는 프로그램의 영역입니다.

글로벌 변수는 글로벌 범위를 가지고 있습니다. JavaScript 코드의 어느 곳에서나 정의되며 스크립트 내 어디에서나 함수의 경우에도 액세스 할 수 있습니다. 반면에 함수 내에서 선언 된 변수는 함수 본문 내에서만 정의됩니다. 그들은 로컬 변수이며 로컬 범위를 가지고 있으며 해당 기능 내에서만 액세스 할 수 있습니다. 함수 매개 변수는 또한 로컬 변수로 계산되며 함수의 본문 내에서만 정의됩니다.

아래에 표시된 것처럼 함수 내부의 GlobalVariable 변수에 액세스 할 수 있으며 함수 본문 내에서 로컬 변수가 동일한 이름의 글로벌 변수보다 우선합니다.

var globalvar = "globalvar"; // this var can be accessed anywhere within the script

function scope() {
    alert(globalvar);
    localvar = "localvar" //can only be accessed within the function scope
}

scope(); 

따라서 기본적으로 자체 실행 함수를 사용하면 JavaScript 코드의 다른 블록에서 변수가 어떻게 명명되는지에 대한 우려없이 코드를 작성할 수 있습니다.

Answer 14

이 질문이 준비된 것처럼 보이지만 어쨌든 내 입력을 게시하겠습니다.

나는 언제 자기 집행 기능을 사용하는 것을 알고 있습니다.

var myObject = {
    childObject: new function(){
        // bunch of code
    },
    objVar1: <value>,
    objVar2: <value>
}

이 기능을 통해 일부 추가 코드를 사용하여 일반적으로 사용되는 변수를 설정하거나 수학 방정식을 실행하는 등 청정 코드의 childobjects 속성 및 속성을 정의 할 수 있습니다. 오! 또는 오류 확인. 중첩 된 객체 인스턴스틱 구문으로 제한되는 것과는 달리 ...

object: {
    childObject: {
        childObject: {<value>, <value>, <value>}
    }, 
    objVar1: <value>,
    objVar2: <value>
}

일반적으로 코딩하는 것은 똑같은 일을 많이하는 많은 모호한 방법을 가지고 있으며, "왜 귀찮게합니까?" 그러나 더 이상 기본/핵심 원칙에만 의존 할 수없는 새로운 상황이 계속 나타납니다.

Answer 15

(function(){
    var foo = {
        name: 'bob'
    };
    console.log(foo.name); // bob
})();
console.log(foo.name); // Reference error

실제로 위의 함수는 이름이없는 함수 표현식으로 취급됩니다.

근접 및 열린 괄호로 기능을 감싸는 주요 목적은 전 세계 공간을 오염시키는 것을 피하는 것입니다.

함수 표현식 내부의 변수와 함수는 개인이되었습니다 (즉,) 함수 외부에서 사용할 수 없습니다.

Answer 16

IIRC를 사용하면 개인 속성과 방법을 만들 수 있습니다.