한마디로
요약
가장 간단한 형태로,이 기술은 코드를 함수 범위 안에 넣는 것을 목표로 합니다.
다음과 같은 가능성을 줄이는 데 도움이됩니다.
- 다른 응용 프로그램 / 라이브러리와 충돌
- 우수한 (전 세계적으로 가장 가능성이 높은) 오염
그것은 하지 않는 문서가 준비되면 감지 - 그것은 어떤 종류의하지 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/xstatement: 코드 행으로 무언가를 수행하지만 값으로 평가 되지 않습니다 . 즉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
따라서 일단 "대체 코드"에 해당 수정 사항이 추가되면 "코드 설명"예제에서 사용한 코드와 정확히 동일한 코드로 돌아갑니다.
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.
범위 이해하기
한 가지 궁금한 점은 "함수 내에 변수를 '적절하게'정의하지 않으면 어떻게됩니까? 즉, 간단한 대입을 수행합니까?"
(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.
자원
다음 단계
이 IIFE개념 을 얻으면 module pattern이 IIFE 패턴을 활용하여 일반적으로 수행됩니다. 재미있게 보내세요 :)