이번에는 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().
내부 함수가 외부 함수에서 변수를 얻을 수 있는 권한을 가지고 있기 때문입니다.
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
Vue 사용자 정의 동적 구성 요소 사용에 대한 자세한 설명
js에서 시간 공유 기능을 사용하는 단계에 대한 자세한 설명
위 내용은 js 클로저 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!