즉시실행 함수(function(){…})()에 대한 심층적인 이해_JavaScript에 대한 기본지식

Javascript는 다른 프로그래밍 언어에 비해 상대적으로 캐주얼하기 때문에 JavaScript 코드에는 때로는 연기와 거울처럼 보일 수 있는 온갖 이상한 쓰기 방법이 가득합니다. 물론 모든 종류의 쓰기 방법을 이해할 수 있는 것도 중요합니다. JavaScript 언어의 특성에 대한 더 깊은 이해.

( function(){…} )() 및 ( function (){…} () )는 즉시 실행되는 JavaScript 함수를 작성하는 두 가지 일반적인 방법입니다. 처음에는 괄호로 묶인 익명 함수인 줄 알았습니다. 그리고 추가된 괄호는 함수를 호출하고, 최종적으로 정의된 직후에 함수를 실행한다는 목적을 달성했지만, 나중에 괄호를 추가한 이유가 동일하지 않은 것으로 밝혀졌습니다. 함수의 즉각적인 실행을 이해하려면 먼저 함수의 몇 가지 기본 개념을 이해해야 합니다.

함수선언, 함수표현, 익명함수

함수 선언: function fnName () {…}; function 키워드를 사용하여 함수를 선언한 다음 함수 이름을 지정합니다. 이를 함수 선언이라고 합니다.

함수 표현식 var fnName = function () {…}; 함수를 선언하려면 function 키워드를 사용하되, 함수에 이름을 지정하지 마세요. 마지막으로 익명 함수가 함수 표현식이라는 변수에 할당됩니다. 가장 일반적인 함수 표현입니다.

익명 함수: function() {}; 함수를 선언할 때 function 키워드를 사용하지만 함수에 이름을 지정하지 않으므로 익명 함수라고 합니다. 익명 함수는 함수 표현식에 속합니다. 변수에 할당되면 함수가 생성되고, 이벤트를 할당하면 이벤트 핸들러가 되거나 클로저가 생성됩니다.

함수 선언과 함수 표현식의 차이점은 1. 자바스크립트 엔진이 자바스크립트 코드를 파싱할 때 현재 실행 환경(범위)에서 함수 선언을 '함수 선언 호이스팅'하는 반면, 함수 표현식은 기다려야 합니다. Javascirtp 엔진이 실행되는 라인에 도달할 때까지 함수 표현식을 위에서 아래로 한 줄씩 구문 분석합니다. 2. 함수 표현식 뒤에 괄호를 추가하면 함수를 즉시 호출할 수 없습니다. fnName() 양식 호출. 차이점에 대한 두 가지 예는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

fnName();
function fnName (){
 …
}
//정상, 함수 선언이 '승격'되어 있으므로 함수 선언 이전에 함수 호출이 가능합니다

fnName();
var fnName=function( ){
 …
}
//오류, fnName 변수가 함수에 대한 참조를 저장하지 않았습니다. 함수 호출은 함수 표현식

코드 복사 코드는 다음과 같습니다.

var fnName=function(){
Alert( 'Hello World');
}();
//함수 표현식 뒤에 괄호를 추가합니다. 자바스크립트 엔진이 이를 구문 분석하면 해당 함수를 즉시 호출할 수 있습니다.
function fnName(){
Alert( 'Hello World');
}();
//오류는 보고되지 않지만 자바스크립트 엔진은 함수 선언만 구문 분석하고 다음 대괄호는 무시합니다. 함수 선언은 호출되지 않습니다.
function(){
console.log('Hello World');
}();
//익명 함수는 함수 표현식이지만 할당 작업이 수행되지 않습니다.
//그래서 자바스크립트 엔진이 시작됩니다. function 키워드가 함수 선언으로 사용되어 오류가 보고됩니다: 함수 이름이 필요합니다

함수에 대한 몇 가지 기본 개념을 이해한 후, 함수를 즉시 실행하는 함수를 작성하는 두 가지 방법(function(){…})()과 (function(){…}())을 다시 살펴보았습니다. 익명 함수를 괄호로 묶고 그 뒤에 괄호를 추가하면 함수가 바로 호출되는 줄 알았는데, 당시에는 왜 괄호를 추가했는지 몰랐는데, 나중에 괄호를 추가하고 싶으면 알게 됐어요. 즉시 호출하려면 함수 본문 뒤에 함수가 함수 선언이 아닌 함수 표현식이어야 합니다.

코드 복사 코드는 다음과 같습니다.

(function(a){
console.log (a); //firebug 출력 123, () 연산자 사용
})(123);

(function(a){
console.log(a); // Firebug 출력 1234, () 연산자 사용
}(1234));

!function(a){
console.log(a); //firebug 출력 12345, 사용! 연산자
}(12345);

function(a){
console.log(a); //firebug 출력 123456, 연산자 사용
}(123456);

-function(a){
console.log(a); //firebug 출력 1234567, 사용 - 연산자
}(1234567);

var fn=function(a ){
console.log(a); //firebug 출력 12345678, = 연산자 사용
}(12345678)

출력을 보려면 함수 앞에 추가하세요! , , - 또는 심지어 쉼표도 함수가 정의된 직후에 함수를 실행하는 효과를 가질 수 있습니다. while (),! , - 및 =와 같은 연산자는 모두 함수 선언을 함수 표현식으로 변환하여 함수 표현식과 함수 선언을 식별할 때 JavaScript 엔진 사이의 모호성을 제거하고 JavaScript 엔진에 이것이 함수 선언이 아니라 함수 표현식임을 알려주며 나중에 사용할 수 있습니다. 괄호를 추가하고 함수 코드를 즉시 실행하세요.

괄호를 추가하는 것이 가장 안전한 방법입니다. 왜냐하면! , , - 등의 연산자도 함수의 반환 값으로 작업을 수행하므로 때로는 불필요한 문제가 발생합니다.

근데 이렇게 써도 무슨 소용이 있나요?

JavaScript에는 프라이빗 범위라는 개념이 없습니다. 여러 사람이 개발한 프로젝트에서 일부 변수를 전역 또는 로컬 범위에서 선언하면 다른 사람이 실수로 같은 이름의 변수를 사용하여 덮어쓸 수 있습니다. JavaScript 함수 범위 체인의 특성상 이 기술을 사용하면 비공개 범위를 모방하고 익명 함수를 "컨테이너"로 사용할 수 있습니다. 외부 변수는 "컨테이너" 내부에서 접근할 수 있지만 외부 환경은 "컨테이너" 내부의 변수에 접근할 수 없습니다. ". 변수이므로 (function(){…})()() 내부에 정의된 변수는 일반적으로 "익명 래퍼" 또는 "네임스페이스"로 알려진 외부 변수와 충돌하지 않습니다.

JQuery에서는 JQuery 코드를 (function(window, undefine){...jquery code...}(window)로 감싸는 방식을 사용합니다. 전역 범위에서 JQuery 코드를 호출할 때 JQuery 내부 변수를 보호할 수 있습니다. .

본 글은 개인적인 이해를 바탕으로 작성되었으며, 오류가 있는 경우 지적해 주시기 바랍니다.

"Javascript 권위 가이드", "Javascript 고급 프로그래밍"