JavaScript_javascript 기술의 var 선언의 변수 범위 추론에 대해

1. 신화! 코드 조각으로 인한 의심
다음 코드를 살펴보십시오.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

for(var i=0;i<3;i ) {
console.log(j "," k)
for(var j=0; j<3;j ) {
var k = j
}
}
console.log(i)

출력 결과:
정의되지 않음 ,undefine
3, 3
3,3
3
C, Java 및 기타 언어로 작업하는 경우 j 및 k와 같은 지역 변수에 외부 코드로 액세스할 수 있는 이유가 궁금할 수 있습니다. 범위?
JavaScript에서 var로 선언된 변수를 지역 변수로 간주할 수 있다면 변수에 접근할 수 있는 범위는 변수의 지역 범위입니다. 위의 예에서와 같이 console.log 줄에는 여전히 j와 k의 범위가 있고 루프 외부에는 여전히 i의 범위가 있습니다. 이 시점에서 JavaScript에는 실제 로컬 범위가 없다고 임의로 말할 수 있습니다. 정말? 아니요!

2. 실제 로컬 범위를 얻는 방법은 무엇입니까? 글쓰기 방법이 눈길을 끌었습니다
JQuery의 소스코드나 Ext의 소스코드를 보신 적이 있으시다면, 다음의 작성방법이 조금 익숙하실 것입니다.

코드 복사 코드는 다음과 같습니다.

var a = 3,b=4;
var imports = (function() {
var a = 1,b=2;
return {a:a,b:b};
})()
콘솔. log(" " a "," b);
console.log(exports.a ","exports.b)

출력 결과:
3,4
1,2
함수 내부에 독립적인 범위가 있다는 것은 매우 놀라운 발견입니다(실제로는 놀라운 일이 아닙니다. 모두가 알고 있습니다). 즉, 함수 내부에서 var로 선언된 변수는 함수 내부에서만 사용할 수 있습니다. 기능. 따라서 각 프레임워크의 모든 마스터는 지역 변수와 외부 변수(외부 지역 변수와 전역 변수) 간의 충돌을 방지하기 위해 이렇게 작성합니다.
이 시점에서 첫 번째 기사에서 임의의 추론을 철회하고 수정합니다.
JavaScript는 함수로 제한되며 각 함수는 다른 블록(일반 코드 블록, for 루프, If 포함)을 갖습니다. , while 및 기타 코드 블록)에는 로컬 범위가 없습니다. var를 사용하여 선언된 변수는 이러한 코드 블록을 직접 통과할 수 있으며 외부 코드에서 액세스할 수 있습니다.


3. 오류는 언제 보고되고 언제 정의되지 않나요? var의 선언 메커니즘
코드 보기:

코드 복사 코드는 다음과 같습니다. 🎜>

console.log(a)

출력 결과:
ReferenceError: a가 정의되지 않았습니다
출력 결과:
정의되지 않음

코드 복사 코드는 다음과 같습니다.

var imports = (function() {
var a = 1,b=2;
return {a:a,b:b};
})()
console.log(a);

출력 결과:
ReferenceError: a가 정의되지 않았습니다.
추측:
JavaScript 엔진이 코드를 실행할 때마다 먼저 범위에 있는 모든 코드를 검색합니다(범위에 있는 함수 내부의 코드는 검색되지 않습니다). var에 의해 선언된 모든 변수를 기록합니다. 코드가 실행되고 할당되기 전에는 이러한 변수의 값이 정의되지 않습니다. 그 후 변수에 접근하게 되면 먼저 지역 변수에 접근하게 되고, 해당 지역 변수가 없다면 상위 수준의 지역 변수(클로저 등)에 접근하게 되고, 상위 수준에서는 이에 대한 환경을 생성하게 됩니다. 클로저) 전체 전역 변수에 액세스할 때까지. 해당 변수가 없으면 예외가 발생합니다.



4. 여담: 클로저가 비동기식이며 변수 값이 엉망입니다! 비동기 상황에서 지역 변수의 현재 값 전송을 보장하는 방법은 무엇입니까?
코드에 대해 이야기해보자:

코드 복사 코드는 다음과 같다:

for( var i=0;i<3;i ) {
setTimeout(function() {
console.log(i);
},1)
}

출력 결과:
3
3
3
왜? 왜냐하면 클로저가 비동기적으로 실행될 때 i는 항상 외부 범위에서 i에 액세스하기 때문입니다. 비동기식이므로 클로저가 실행될 때 루프가 종료되고 i는 이미 3이므로 인쇄될 때마다 3입니다.
그렇다면 이 문제를 어떻게 해결할 수 있을까요? i를 지역 변수로 변환해야 합니다.
글쎄, 이런 식으로 쓰는 사람이 있습니다.

코드 복사 코드는 다음과 같습니다.

for(var i=0;i<3;i ) {
var j = i;
setTimeout(function() {
console.log(j);
}, 1)
}


출력 결과:
2
2
2
왜?
실제로 앞서 설명했듯이 j와 i의 범위는 실제로 동일합니다. 모두 외부 지역 변수입니다. 비동기 상황에서 루프 실행이 완료되면 j는 2입니다(i는 i보다 1 작습니다).
어떻게 해야 할까요? (광고를 상상해 보세요, (∨v⋅)).
우리 모두 알고 있듯이 함수의 매개변수도 함수의 지역 변수로 간주됩니다. 그래서 여기에 지역 변수를 함수의 실제 매개변수로 변환하여 값 전달 효과를 얻는 방법이 있습니다.

코드 복사 코드는 다음과 같습니다.

for(var i=0;i< 3;i ) {
setTimeout((
function(j){
return function() {
console.log(j);
}
})(i)
, 1);
}

출력
0
1
2
사실 너무 많이 말하면 글을 쓰고 나면 거의 이해가 되실 겁니다. 코드를 사용하세요. 이 익명 함수 메서드는 비동기 상황에서 변수 변경 문제를 제거하지만 이는 이 게시물에서 벗어난 것입니다.

요약:
음. 더 이상 쓰지 않겠습니다. 너무 게을러서 언젠가 시간을 내서 정리하겠습니다. 안녕-안녕.
사실 이러한 결론은 RFC에 작성되어야 합니다. 그런데 영어 문서를 씹는 거죠. . . 잊어버리세요. . 나는 그것을 스스로 추론했다. 하하, 그거 보고 웃지 마세요.