한마디로

요약

가장 간단한 형태로,이 기술은 코드를 함수 범위 안에 넣는 것을 목표로 합니다.

다음과 같은 가능성을 줄이는 데 도움이됩니다.

• 다른 응용 프로그램 / 라이브러리와 충돌
• 우수한 (전 세계적으로 가장 가능성이 높은) 오염

그것은 하지 않는 문서가 준비되면 감지 – 그것은 어떤 종류의하지 document.onload않고window.onload

일반적으로 Immediately Invoked Function Expression (IIFE)또는 로 알려져 있습니다 Self Executing Anonymous Function.

코드 설명

var someFunction = function(){ console.log('wagwan!'); };

(function() {                   /* function scope starts here */
  console.log('start of IIFE');

  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!');
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001,
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();                           /* function scope ends */

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

위의 예에서 함수에 정의 된 (즉,을 사용하여 선언 된) 변수 var는 “비공개”이고 함수 범위 내에서만 액세스 할 수 있습니다 (Vivin Paliath가 말한 것처럼). 다시 말해, 이러한 변수는 함수 외부에서 보이거나 도달 할 수 없습니다. 라이브 데모를 참조하십시오 .

Javascript에는 기능 범위가 있습니다. “함수에 정의 된 매개 변수와 변수는 함수 외부에 표시되지 않으며, 함수 내에서 정의 된 변수는 함수 내 어디에서나 볼 수 있습니다.” ( “자바 스크립트 : 좋은 부분”에서).

자세한 내용은

대체 코드

결국, 이전에 게시 된 코드는 다음과 같이 수행 될 수 있습니다.

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = {
    anotherNumber : 1001,
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
};

myMainFunction();          // I CALL "myMainFunction" FUNCTION HERE
someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

라이브 데모를 참조하십시오 .

뿌리

반복 1

언젠가 누군가는 “myMainFunction”이라는 이름을 피하는 방법이 있어야한다고 생각했을 것입니다. 왜냐하면 우리가 원하는 것은 바로 그것을 실행하는 것이기 때문입니다. “

기본으로 돌아 가면 다음을 알 수 있습니다.

• expression: 가치를 평가하는 것. 즉3+11/x
• statement: 코드 행으로 무언가를 수행하지만 값으로 평가 되지 않습니다 . 즉if(){}

마찬가지로 함수 표현식은 값으로 평가됩니다. 그리고 하나의 결과 (나는 가정합니까?)는 즉시 호출 할 수 있다는 것입니다.

 var italianSayinSomething = function(){ console.log('mamamia!'); }();

보다 복잡한 예는 다음과 같습니다.

var someFunction = function(){ console.log('wagwan!'); };

var myMainFunction = function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = {
    anotherNumber : 1001,
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
}();

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

라이브 데모를 참조하십시오 .

반복 2

다음 단계는 ” var myMainFunction =우리가 그것을 사용하지 않으면 왜 !”라는 생각입니다.

대답은 간단합니다. 아래와 같이 제거해보십시오.

 function(){ console.log('mamamia!'); }();

라이브 데모를 참조하십시오 .

“함수 선언은 호출 할 수 없으므로 “작동하지 않습니다 .

비결은 제거함으로써 함수 표현식 을 함수 선언 으로 var myMainFunction =변환 했다는 것 입니다. 이에 대한 자세한 내용은 “리소스”링크를 참조하십시오.

다음 질문은 “왜 다른 식으로 함수 표현식으로 유지할 수 var myMainFunction =없습니까?

대답은 “당신이 할 수있는 것”이며 실제로 당신이 이것을 할 수있는 많은 방법이 있습니다 : +, a !, a -또는 아마도 한 쌍의 괄호로 묶는 것 (지금은 컨벤션에 의해 이루어짐), 그리고 나는 더 믿습니다. 예를 들어 :

 (function(){ console.log('mamamia!'); })(); // live demo: jsbin.com/zokuwodoco/1/edit?js,console.

또는

 +function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wuwipiyazi/1/edit?js,console

또는

 -function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wejupaheva/1/edit?js,console

• 느낌표는 기능 전에 무엇을합니까?
• 함수 이름 앞에 JavaScript 더하기 기호

따라서 일단 “대체 코드”에 해당 수정 사항이 추가되면 “코드 설명”예제에서 사용한 코드와 정확히 동일한 코드로 돌아갑니다.

var someFunction = function(){ console.log('wagwan!'); };

(function() {
  console.log('start of IIFE');

  var myNumber = 4;
  var myFunction = function(){ console.log('formidable!'); };
  var myObject = {
    anotherNumber : 1001,
    anotherFunc : function(){ console.log('formidable!'); }
  };
  console.log('end of IIFE');
})();

someFunction();            // reachable, hence works: see in the console
myFunction();              // unreachable, will throw an error, see in the console
myObject.anotherFunc();    // unreachable, will throw an error, see in the console

다음에 대해 자세히 알아보십시오 Expressions vs Statements.

• developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions#Function_constructor_vs._function_declaration_vs._function_expression
• 자바 스크립트 : 문장과 표현식의 차이점은 무엇입니까?
• 표현 대 진술

범위 이해하기

한 가지 궁금한 점은 “함수 내에 변수를 ‘적절하게’정의하지 않으면 어떻게됩니까? 즉, 간단한 대입을 수행합니까?”

(function() {
  var myNumber = 4;             /* number variable declaration */
  var myFunction = function(){  /* function variable declaration */
    console.log('formidable!');
  };
  var myObject = {              /* object variable declaration */
    anotherNumber : 1001,
    anotherFunc : function(){ console.log('formidable!'); }
  };
  myOtherFunction = function(){  /* oops, an assignment instead of a declaration */
    console.log('haha. got ya!');
  };
})();
myOtherFunction();         // reachable, hence works: see in the console
window.myOtherFunction();  // works in the browser, myOtherFunction is then in the global scope
myFunction();              // unreachable, will throw an error, see in the console

라이브 데모를 참조하십시오 .

기본적으로 현재 범위에서 선언되지 않은 변수에 값이 할당 된 경우 “변수를 찾거나 전역 범위에 도달 할 때까지 범위 체인을 조회합니다 (이 시점에서 변수가 생성됩니다)”.

브라우저 환경 (nodejs와 같은 서버 환경)에서 전역 범위는 window객체에 의해 정의됩니다 . 따라서 우리는 할 수 있습니다 window.myOtherFunction().

이 주제에 대한 나의 “우수 사례”팁 은 숫자, 객체 또는 함수이든 전역 범위에 있을 때든 무엇이든 정의 할 때 항상 사용 var하는 것 입니다. 이렇게하면 코드가 훨씬 간단 해집니다.

노트 :

• javascript 에는 (업데이트 : ES6에 추가 된 블록 범위 로컬 변수) 가 없습니다 .block scope
• 자바 스크립트에는 function scope& 만 있습니다 global scope( window브라우저 환경에서 범위)

다음에 대해 자세히 알아보십시오 Javascript Scopes.

• var 키워드의 목적과 사용시기 (또는 생략)는 무엇입니까?
• JavaScript에서 변수의 범위는 무엇입니까?

자원

• youtu.be/i_qE1iAmjFg?t=2m15s-Paul Irish는 IIFE를 최소 2:15에 선물합니다. 이것을보십시오!
• developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ 함수
• 책 : Javascript, 좋은 부분 -강력 추천
• youtu.be/i_qE1iAmjFg?t=4m36s-Paul Irish는 4:36에 모듈 패턴을 나타냅니다.

다음 단계

이 IIFE개념 을 얻으면 module pattern이 IIFE 패턴을 활용하여 일반적으로 수행됩니다. 재미있게 보내세요 🙂

답변

(function() {

    var x = 2;

    // do stuff with x

})();

   navigator.html5={
     canvas: (function(){
      var dc= document.createElement('canvas');
      if(!dc.getContext) return 0;
      var c= dc.getContext('2d');
      return typeof c.fillText== 'function'? 2: 1;
     })(),
     localStorage: (function(){
      return !!window.localStorage;
     })(),
     webworkers: (function(){
      return !!window.Worker;
     })(),
     offline: (function(){
      return !!window.applicationCache;
     })()
    }

(function($) { ...code...})(jQuery);