집 > 기사 > 웹 프론트엔드 > js 익명 자체 실행 함수 예제에 대한 자세한 설명

js 익명 자체 실행 함수 예제에 대한 자세한 설명

小云云원래의: 2018-03-19 17:28:121950검색

익명 자체 실행 함수: 메서드 이름이 없는 함수, 클로저: 클로저는 다른 함수 범위 변수에 액세스할 수 있는 권한이 있는 함수를 의미합니다. 이 문서에서는 주로 js 익명 자체 실행 함수 예제에 대한 자세한 설명을 공유합니다. , 모두에게 도움이 되기를 바랍니다.

예를 통해 설명하세요.

for 루프, 익명 자체 실행 함수 및 setTimeout을 사용하여 인터넷에서 사례를 찾았습니다.

사례 1:

var value1 =0,value2=0,value3=0;for(var i =1;i<=2;i++){  var i2 = i;  console.log(&#39;i2==>&#39;,i2);
  (function(){    var i3 = i;    console.log(&#39;i3==>&#39;,i3);
    setTimeout(function(){      console.log(&#39;i==>&#39;,i);      console.log(&#39;i2==>&#39;,i2);      console.log(&#39;i3==>&#39;,i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();
}

setTimeout(function(){  console.log(value1,value2,value3);
},100)

//输出结果i2==> 1i3==> 1i2==> 2i3==> 2i==> 3i2==> 2i3==> 1i==> 3i2==> 2i3==> 26 4 3

설명:

1. 익명 자체 실행 함수의 여러 구문

(function () { /* code */ } ()); // 推荐(function () { /* code */ })(); 
~function () { /* code */ }(); 
+function () { /* code */ }(); 
!function () { /* code */ }(); 
void function () { /* code */ }();

2 자체 실행 함수와 클로저를 사용하여 특수 상태에 값을 저장합니다.

(function(){//自执行函数
    var i3 = i;    console.log(&#39;i3==>&#39;,i3);
    setTimeout(function(){//闭包
      console.log(&#39;i==>&#39;,i);      console.log(&#39;i2==>&#39;,i2);      console.log(&#39;i3==>&#39;,i3);
      value1 +=i;
      value2 +=i2;
      value3 +=i3;
    },1);
  })();

함수 클로저에서 변수가 호출됩니다. for 루프의 각 루프의 다른 값이 클로저에 전달됩니다.

3. For 루프 구문 이해

for (语句 1; 语句 2; 语句 3) {
 ...
}

루프(코드 블록)의 문 1은 시작 전에 실행됩니다
문 2는 루프(코드 블록) 실행 조건을 정의합니다
문 3은 루프(코드 블록)가 실행된 후 실행됩니다

다음 사례를 통해 분석됩니다.

for(var i=1;i<3;i++){  console.log(i);
  setTimeout(function(){    console.log(&#39;i===>&#39;,i);
  },100);
}//输出12i===> 3i===> 3

for 루프가 실행되면 i++는 for가 됩니다. 문의 코드는 종료 후 실행되고, setTimeout은 비동기적으로 실행되므로 setTimeout의 i 출력은 실제로 마지막 루프가 끝난 후 다시 i ++ 값입니다.

사례 1 설명:

이 내용을 보시면 다들 이해하실 겁니다. 사례 1의 경우 첫 번째 루프에서는 자체 실행 함수에서 i2 = 1, i3 = 1이지만 클로저는 다른 곳에 값을 저장할 수 있습니다. 따라서 이때 setTimeout에 전달된 값 중 i3만 캐시에 저장되고, i2와 i는 두 번째 루프에 의해 덮어쓰게 되며 이때 setTimeout은 실행되지 않습니다. time, i2=2;i3=2 ;마찬가지로 i3=2도 클로저에 저장되고 i2는 덮어쓰기 됩니다.
이때 for 루프 실행이 종료되고 setTimeout 함수가 실행되기 시작합니다. for 루프가 종료되고 마지막 문 "i++"가 실행되므로 이번에는 2가 아닌 3이고 클로저 외부의 i2는 클로저에 다른 상태를 저장하지 않으며 덮어쓰기만 가능하며 i3의 값은 다음과 같습니다. 클로저는 매번 클로저에 의해 메모리에 캐시되며 상태를 유지하므로 setTimeout의 값은 모두 3이고 i2는 2이며 i3은 각 사이클의 값입니다. 기사 내용:

혜택 1: 프런트 엔드, Java, 제품 관리자, WeChat 애플릿, Python 및 기타 리소스의 훌륭한 컬렉션: https://www.jianshu.com/p/e8197d4d9880