> 웹 프론트엔드 > JS 튜토리얼 > js 클로저 사용에 대한 자세한 설명

js 클로저 사용에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-04-28 11:56:39
원래의
1688명이 탐색했습니다.

이번에는 js 클로저 사용에 대한 자세한 설명을 가져왔습니다. js 클로저 사용 시 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

클로저는 함수와 해당 함수가 선언된 어휘 환경의 조합입니다.

클로저의 첫 번째 예

function init() {
 var name = 'Mozilla'; // name is a local variable created by init
 function displayName() { // displayName() is the inner function, a closure
 alert(name); // use variable declared in the parent function 
 }
 displayName(); 
}
init();
because inner functions have access to the variables of outer functions, displayName() can access the variable name declared in the parent function, init().
로그인 후 복사
사실 이 밤나무는 내부의 클로저 함수입니다. init(), 외부에서 정의된 변수 이름을 displayName 내에서 호출할 수 있는 이유는 js

내부 함수가 외부 함수에서 변수를 얻을 수 있는 권한을 가지고 있기 때문입니다.

두 번째 예

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 for(var i=0;i<data.length;i++) {
   setTimeout(function(){
    //console.log(i); //发现i输出了3次3
   //console.log(this); // 发现 this 指向的是 Window
   data[i].key = data[i].key + 10;
   console.log(data[i].key)
   }, 1000);
 }
}
showKey();
로그인 후 복사

위의 예는 10 11 12를 올바르게 출력할 수 있나요?

답은: 아니요, 또한

구문 오류를 보고합니다....

console.log(i)는 3번, 즉 setTimeout 1000밀리초 후에 3번을 출력한다는 것을 발견했습니다. 실행이 닫힙니다. 함수를 래핑하면

for 루프의 실행이 완료되고 i는 고정된 값이므로 기대한 효과를 얻지 못합니다.

console.log(this)는 이것이 Window를 가리키는 것을 발견했습니다. 즉, 함수 내부에 구현된 클로저 함수가

전역 함수로 변환되어 메모리에 저장되었습니다.

그래서 다른 실행 함수를 정의해야 합니다

var data = [
 {'key':0},
 {'key':1},
 {'key':2}
];
function showKey() {
 var f1 = function(n){
  data[i].key = data[i].key + 10;
  console.log(data[i].key)
 }
 for(var i=0;i<data.length;i++) {
   setTimeout(f1(i), 1000);
 }
}
showKey();
// 得到预期的 10 11 12
로그인 후 복사
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:

Vue 사용자 정의 동적 구성 요소 사용에 대한 자세한 설명

js에서 시간 공유 기능을 사용하는 단계에 대한 자세한 설명

위 내용은 js 클로저 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿