집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript의 즉각적인 기능 실행에 대한 자세한 예

JavaScript의 즉각적인 기능 실행에 대한 자세한 예

小云云원래의: 2017-12-28 09:38:241578검색

js 즉시 실행 기능을 사용하면 함수가 생성된 후 즉시 실행될 수 있습니다. js 실행 함수 즉시 모드는 함수가 정의 후 즉시 실행될 수 있도록 하는 구문입니다. 창조. 다른 프로그래밍 언어에 비해 JavaScript는 상대적으로 캐주얼하기 때문에 JavaScript 코드에는 때때로 안개 속에 나타나는 온갖 이상한 쓰기 방법이 가득합니다. 물론 다양한 쓰기 방법을 이해할 수 있다는 것도 더 깊은 이해입니다. 자바스크립트 언어의 특징. 이 글에서는 자바스크립트의 즉각적인 기능 실행에 대한 관련 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

Preface

( function(){…} )() 및 ( function (){…} () )은 함수를 즉시 실행하기 위해 JavaScript 함수를 작성하는 두 가지 일반적인 방법입니다. 처음에는 익명 함수를 래핑한 줄 알았습니다. 괄호 안에 괄호를 추가해 함수를 호출하면 함수 정의 직후에 함수를 실행한다는 목적이 달성되는데, 나중에 괄호를 추가하는 이유가 동일하지 않은 것으로 밝혀졌습니다.

아래에서는 할 말이 많지 않으니, 자세한 소개를 살펴보겠습니다.

보통 우리는 다음과 같은 방법으로 함수를 선언합니다:

// 声明函数f1
function f1() {
 console.log("f1");
}
// 通过()来调用此函数
f1();


//一个匿名函数的函数表达式，被赋值给变量f2:
var f2 = function() {
 console.log("f2");
}
//通过()来调用此函数
f2();


//一个命名为f3的函数的函数表达式(这里的函数名可以随意命名，可以不必和变量f3重名)，被赋值给变量f3:
var f3 = function f3() {
 console.log("f3");
}
//通过()来调用此函数
f3();

일부 사용자 정의 컨트롤을 본 경우 대부분은 다음과 같은 작성 방식을 따른다는 것을 알 수 있습니다:

(function() {
 "
 // 这里开始写功能需求
 })();

이것은 우리가 종종 즉시 실행 함수라고 부르는 것입니다( IIFE)는 이름에서 알 수 있듯이 이 함수가 함수 본문을 즉시 실행하며 사용자가 직접 호출할 필요가 없음을 의미합니다. 일반적으로 우리는 익명 함수에만 IIFE를 사용합니다.

거기에 둘째, IIFE는 내부적으로 별도의 범위를 형성하여 외부에서 읽을 수 없는 일부 개인 변수를 캡슐화할 수 있습니다.

이 두 문장을 이해할 수 없다면 IIFE의 작동 원리부터 시작해 보세요.

IIFE는 일반적으로 익명 함수에 사용되므로 여기서는 간단한 익명 함수를 예로 사용합니다.

var f = function(){
 console.log("f");
}
f();

여기서 f는 이 익명 함수의 참조 변수일 뿐이므로 f()가 이 함수를 호출할 수 있으므로 , f를 넣었습니다. 함수 자체로 바꿀 수 있나요?

function(){
 console.log("f"); 
}();

실행 후 다음 결과를 얻습니다.

Uncaught SyntaxError: Unexpected token (

이 오류가 발생하는 이유는 Javascript 엔진이 함수 키워드를 본 후 다음에 오는 내용이 다음과 같다고 생각하기 때문입니다. 함수 선언문이며 괄호로 끝나서는 안 됩니다. 해결책은 괄호 앞의 부분이 함수 정의 문이 아니라 연산이 가능한 표현식임을 엔진에 알리는 것입니다. 함수 선언과 함수 표현식의 차이점은 다음과 같습니다.

1. 즉, 함수를 선언할 때 보통 x(){} 함수를 사용합니다.)

function myFunction () { /* logic here */ }

2. 함수 표현식(이 형식과 유사)

var myFunction = function () { /* logic here */ };
var myObj = {
 myFunction: function () { /* logic here */ }
};

초등학교에서는 ()로 묶인 표현식이 먼저 실행된다는 것을 배웠습니다. , like 다음과 같습니다.

1+(2+3) //这里先运行小括号里面的内容没有意见撒

사실 JavaScript에서 괄호는 비슷한 효과를 갖습니다. Javascript 엔진은 function 키워드를 보면 함수 선언문이라고 생각합니다. 따라서 Javascript 엔진이 괄호를 먼저 보면 어떻게 될까요? :

//用小括号把函数包裹起来
(function(){
  console.log("f");  
})();

함수가 성공적으로 실행되었습니다. :

f //控制台输出

이 경우 Javascript 엔진은 이를 함수 선언이 아닌 표현식으로 간주합니다. 물론 Javascript 엔진이 이를 선언이라고 생각하도록 하는 방법은 여러 가지가 있습니다. 표현식:

!function(){}();
+function(){}();
-function(){}();
~function(){}();
new function(){ /* code */ }
new function(){ /* code */ }() // 只有传递参数时，才需要最后那个圆括号。
……

이전 질문으로 돌아가서 IIFE 형식이 전역 변수 오염을 방지한다고 말하는 이유는 무엇입니까? 다른 사람이 작성한 jquery 플러그인을 본 적이 있다면 일반적으로 다음과 유사한 코드가 있습니다.

(function($){
  "
  //插件实现代码
})(jQuery);

The 여기서 jquery는 실제로 익명 함수의 매개변수입니다. 익명을 호출할 때 생각해 보세요. 함수에 f()가 사용되면 익명 매개변수는 f(args)가 됩니다. 여기서 jquery는 매개변수로 함수에 전달됩니다. , 따라서 형식 매개변수 $가 함수 내부에서 사용될 때 외부 환경에 영향을 주지 않습니다. 왜냐하면 일부 플러그인은 $ 한정자를 사용하고 이 함수 내에서 이를 가지고 놀 수 있기 때문입니다.

위의 두 기사는 이 과정에서 참조되었습니다.

javascript는 함수를 즉시 실행합니다: 플러그인의 function(){}(), 다시 생각해 보세요

JavaScript의 즉시 실행 기능

JavaScript의 즉각적인 기능 실행에 대한 자세한 예

관련 기사