자바스크립트 즉시실행 기능_자바스크립트 스킬 심층 분석

Javascript는 다른 프로그래밍 언어보다 캐주얼하기 때문에 JavaScript 코드에는 온갖 종류의 이상한 쓰기 방법이 가득하며 때로는 안개 속에 나타나기도 합니다.
물론, 다양한 글쓰기 유형을 이해할 수 있다는 것은 자바스크립트 언어의 특성을 더욱 깊이 있게 이해하는 것이기도 합니다.

자바스크립트 함수 구문

함수는 중괄호로 묶인 코드 블록으로, 앞에는 function 키워드가 옵니다.

함수 함수 이름()
{
실행할 코드는 다음과 같습니다
}

이 함수가 호출되면 함수 내의 코드가 실행됩니다.

함수는 이벤트가 발생할 때(예: 사용자가 버튼을 클릭할 때) 직접 호출할 수 있으며 JavaScript를 통해 어디서나 호출할 수 있습니다.

팁: JavaScript는 대소문자를 구분합니다. function 키워드는 소문자여야 하며, 함수 이름과 동일한 대소문자를 사용하여 함수를 호출해야 합니다.

( function(){…} )() 및 ( function (){…} () )는 함수를 즉시 실행하기 위해 JavaScript 함수를 작성하는 두 가지 일반적인 방법입니다.

처음에는 괄호로 묶인 익명 함수인줄 알았는데, 끝에 괄호를 추가해서 함수를 호출하게 되었는데, 드디어 함수를 정의하자마자 바로 실행한다는 목적이 달성되었습니다;
나중에 괄호를 붙인 이유가 그게 아니라는 사실이 밝혀졌습니다. 함수의 즉각적인 실행을 이해하려면 먼저 함수의 몇 가지 기본 개념을 이해해야 합니다.

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

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

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

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

함수 선언과 함수 표현식의 차이점:

1. Javascript 엔진은 JavaScript 코드를 구문 분석할 때 현재 실행 환경(범위)에서 함수 선언을 "함수 선언 호이스팅"하며, 함수 표현식은 Javascirtp 엔진이 해당 라인을 실행할 때까지 기다려야 합니다. . 그래야만 함수 표현식이 위에서 아래로 한 줄씩 구문 분석됩니다.

2. 함수 표현식 뒤에 괄호를 추가하면 함수를 즉시 호출할 수 있습니다. 함수 선언은 허용되지 않으며 fnName() 형식으로만 호출할 수 있습니다.

예:

 fnName(); 
 function fnName(){ 
  ... 
 } 
 //正常,因为"提升"了函数声明,函数调用可在函数声明之前 
 fnName(); 
 var fnName = function(){ 
  ... 
 } //报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后
 var fnName = function(){ 
  alert("Hello World"); 
 }(); 
 //函数表达式后面加括号,当javascript引擎解析到此处时能立即调用函数 
 function fnName(){ 
  alert("Hello World"); 
 }(); 
 //不会报错,但是javascript引擎只解析函数声明,忽略后面的括号,函数声明不会被调用 
 function(){ 
  console.log("Hello World"); 
 }();
 //语法错误,虽然匿名函数属于函数表达式,但是未进行赋值操作, 
//所以javascript引擎将开头的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)

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

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

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

JavaScript에는 비공개 범위라는 개념이 없습니다. 여러 사람이 프로젝트를 개발하고 일부 변수가 전역 또는 로컬 범위에서 선언되면 다른 사람이 실수로 같은 이름의 변수를 사용하여 덮어쓸 수 있습니다.

자바스크립트 함수 범위 체인의 특성에 따라 이 기술을 사용하면 비공개 범위를 모방하고 익명 함수를 "컨테이너"로 사용할 수 있습니다. 외부 변수는 "컨테이너" 내부에서 접근할 수 있지만 외부 환경에서는 접근할 수 없습니다. "컨테이너" "내부 변수이므로 (function(){...})() 내부에 정의된 변수는 일반적으로 "익명 래퍼" 또는 "네임스페이스"로 알려진 외부 변수와 충돌하지 않습니다.

JQuery는 이 방법을 사용하여 JQuery 코드를 (function(window, undefine){...jquery code...}(window)에 래핑하고, 전역 범위에서 JQuery 코드를 호출할 때 JQuery 내부 변수를 보호할 수 있습니다.

위 내용은 에디터가 소개한 자바스크립트 즉시실행 기능입니다. 마음에 드셨으면 좋겠습니다.