JavaScript 범위 지정 및 호이스팅 Translation_javascript 기술

다음 JavaScript 코드가 실행된 후 경고가 어떤 값을 출력하는지 알고 있습니까?

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

var foo = 1; bar() {
if (!foo) {
var foo = 10
}
alert(foo)
}
bar();
"10"이라는 대답이 놀랍다면 이는 더욱 혼란스러울 수 있습니다.
[/code]

var a = 1
function b() {
a = 10 ;
return;
function a() {}
}
b()
alert(a);
[/code]
브라우저는 "1 "을 경고합니다. . 그래서 무슨 일이 일어났나요? 조금 이상하고 위험하고 혼란스러워 보일 수도 있지만 실제로는 언어의 강력한 표현 기능입니다. 이 동작을 정의하는 표준이 있는지는 모르겠지만 "호이스팅"을 ​​사용하여 설명하는 것을 좋아합니다. 이 기사에서는 이 메커니즘을 설명하려고 시도하지만 먼저 JavaScript 범위 지정에 대해 필요한 몇 가지 이해를 해보겠습니다.
JavaScript의 범위 지정
범위 지정은 JavaScript 초보자에게 가장 혼란스러운 부분 중 하나입니다. 사실 저는 초보자뿐만 아니라 범위 지정을 완전히 이해하지 못하는 숙련된 JavaScript 프로그래머를 많이 만났습니다. JavaScript 범위 지정이 복잡한 이유는 C 언어 계열의 구성원과 매우 유사하기 때문입니다. 다음 C 프로그램을 살펴보세요.

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

int main() {

int x = 1
printf("%d, ", x) // 1
if (1); 🎜>int x = 2;
printf("%d, ", x); // 2
}
printf("%dn", x) // 1
}


이 프로그램의 출력은 1,2,1입니다. 이는 C 시리즈 언어에 블록 수준 범위가 있기 때문입니다. if 문과 마찬가지로 새 변수는 이 블록 수준 범위에 영향을 주지 않습니다. 하지만 JavaScript에서는 그렇지 않습니다. Firebug에서 다음 코드를 사용해 보세요.

코드 복사

코드는 다음과 같습니다. var x = 1; console.log(x); // 1

if (true) {

var x = 2
console.log(x);
console.log(x);// 2


이 코드에서 Firebug는 1, 2, 2를 표시합니다. 이는 JavaScript가 함수 수준 범위를 갖기 때문입니다. 이는 C 기반 언어와 완전히 다릅니다. if 문과 같은 블록은 새 범위를 생성하지 않습니다. 함수만이 새로운 범위를 생성합니다.
C, C#, C# 또는 Java에 익숙한 대부분의 프로그래머에게 이는 예상치 못한 일이며 환영받지 못하는 일입니다. 다행스럽게도 JavaScript 함수의 유연성 덕분에 이 문제에 대한 해결책이 있습니다. 함수에서 임시 범위를 만들어야 하는 경우 다음과 같이 하세요.

코드 복사

코드는 다음과 같습니다. function foo() { var x = 1; if (x) {

(function () {

var x = 2;
// 다른 코드
}());
}
// x는 여전히 1입니다.
}


이 측면은 실제로 매우 유연하므로 다음과 같이 사용할 수 있습니다. 블록 내뿐만 아니라 임시 범위의 장소를 만듭니다. 그러나 JavaScript 범위 지정을 이해하는 데 시간을 할애하는 것이 좋습니다. 정말 강력하고 제가 가장 좋아하는 언어 기능 중 하나입니다. 스코핑을 잘 이해한다면 호이스팅을 이해하는 것이 더 쉬울 것입니다.
선언, 이름 및 호이스팅
JavaScript에는 범위에 네 가지 유형의 이름이 있습니다.
1. 언어 정의: 모든 함수 필드에는 기본적으로 이 항목과 인수가 포함됩니다.

2. 형식 매개변수: 이름이 있는 함수 매개변수는 함수 본문의 범위에 들어갑니다.
3. 함수 선언: foo() {} 형식입니다.
4. 변수 선언: var foo; 형식.
함수 선언과 변수 선언은 항상 JavaScript 인터프리터에 의해 이를 포함하는 범위의 맨 위로 암시적으로 끌어올려집니다. 분명히, 언어 자체의 정의와 함수 매개변수는 이미 범위의 최상위에 있습니다. 다음 코드와 같습니다.




코드 복사

코드는 다음과 같습니다. 함수 foo() { bar(); var x = 1

}

은 실제로 다음과 같이 해석됩니다.

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

function foo() {
var x;
bar();
x = 1
}

결과는 다음과 같습니다. 실행 여부. 다음 두 코드는 동일합니다.

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

function foo() {
if(false) {
var x = 1;
}
return;
var y = 1;
function foo() {
var x, y;
if(false) {
x = 1
}
return;
}


선언의 할당 부분은 끌어올려지지 않습니다. 선언된 이름만 승격됩니다. 이는 전체 함수 본문도 호이스팅되는 함수 선언과 다릅니다. 그러나 함수를 선언하는 방법에는 일반적으로 두 가지가 있다는 점을 기억하십시오. 다음 JavaScript 코드를 고려하십시오.

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

기능 테스트 () {

foo(); // TypeError "foo는 함수가 아닙니다."
bar(); // "이것은 실행됩니다!"
var foo = function () { // 함수 표현식은 다음과 같습니다. 변수 'foo'에 할당
alert("이것은 실행되지 않습니다!")
}
function bar() { // 'bar'라는 함수 선언
alert("이것은 실행됩니다. run! ");
}
}
test();


여기서는 함수 선언만 함수 본문과 함께 승격되고, 함수 표현식은 승격됩니다. 승격됨 이름과 함수 본문은 할당문이 실행될 때만 할당됩니다.

위 내용은 호이스팅에 대한 기본적인 내용을 모두 다룬 내용입니다. 그렇게 복잡하거나 헷갈릴 것 같지는 않죠? 그러나 이는 JavaScript이므로 일부 특수한 경우에는 항상 약간의 복잡함이 있을 수 있습니다.
이름 확인 순서
기억해야 할 가장 중요한 특수 사례는 이름 확인 순서입니다. 이름이 범위에 들어가는 방법에는 네 가지가 있다는 것을 기억하십시오. 위에 나열된 순서는 구문 분석 순서입니다. 일반적으로 이름이 이미 정의된 경우 속성이 다르지만 동일한 이름을 가진 다른 이름으로 덮어쓰여지지 않습니다. 이는 함수 선언이 변수 선언보다 우선순위가 높다는 것을 의미합니다. 그러나 이것이 이 이름에 대한 할당이 유효하지 않다는 의미는 아니며 단지 선언된 부분이 무시된다는 의미입니다. 몇 가지 예외가 있습니다.
내장된 이름 인수는 약간 이상하게 동작합니다. 형식적인 매개변수 뒤에 선언되고 함수 선언 앞에 선언되는 것 같습니다. 이는 매개변수가 정의되지 않은 경우에도 인수라는 형식 매개변수가 내장 인수보다 우선순위가 높다는 것을 의미합니다. 이것은 나쁜 기능입니다. 인수를 형식 매개변수로 사용하지 마십시오.
이를 식별자로 사용하려고 하면 구문 오류가 발생하는데 이는 좋은 기능입니다.
동일한 이름을 가진 형식 매개변수가 여러 개 있는 경우, 정의되지 않은 경우에도 목록 끝에 있는 매개변수가 가장 높은 우선순위를 갖습니다.
함수 표현식 이름 지정
함수 선언문과 마찬가지로 함수 표현식에서 함수 이름을 정의할 수 있습니다. 그러나 이것이 함수 선언이 되지는 않으며 이름이 범위에 도입되지 않으며 함수 본문이 호이스팅되지 않습니다. 다음은 의미를 설명하는 몇 가지 코드입니다.

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

foo( ); // TypeError "foo는 함수가 아닙니다"

bar(); // 유효
baz() // TypeError "baz는 함수가 아닙니다"
spam(); spam은 정의되지 않았습니다."
var foo = function () {}; // 익명 함수 표현식('foo'가 승격됨)
function bar() {}; // 함수 선언('bar ' 및 함수 body가 승격됨)
var baz = function spam() {}; // 명명된 함수 표현식('baz'만 승격됨)
foo(); // 유효함
bar() // 유효함
baz(); // 유효한
spam(); // ReferenceError "spam is not Defined"


이 지식을 활용한 코딩 방법

이제 이해하셨을 겁니다. 범위 지정 및 호이스팅, 이는 JavaScript 코드 작성에 무엇을 의미합니까? 가장 중요한 것은 변수를 선언할 때 항상 var 문을 사용하는 것입니다. 각 범위의 상단에는 하나의 변수만 사용하는 것이 좋습니다. 억지로 이렇게 하면 승진에 관련된 문제로 고민하는 일은 절대 없을 것입니다. 그렇게 하면 현재 범위에서 실제로 선언된 변수를 추적하기가 더 어려워집니다. JSLint에서 onevar 옵션을 사용하는 것이 좋습니다. 이전 제안 사항을 모두 수행하면 코드는 다음과 같습니다.

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

/*jslint onevar: true [...] */
function foo(a, b, c) {
var x = 1,
bar,
baz = "something";
}

표준이 말하는 것
이런 것들이 어떻게 이루어지는지 이해하려면 ECMAScript 표준(pdf)을 직접 참조하는 것이 항상 유용하다고 생각합니다. 작동합니다. 다음은 변수 선언 및 범위(섹션 12.2.2)에 대한 발췌입니다.
변수 문이 FunctionDeclaration 내에서 발생하는 경우 변수는 섹션 10.1.3에 설명된 대로 해당 함수의 함수-로컬 범위로 정의됩니다. 그렇지 않은 경우에는 속성 속성 { DontDelete }를 사용하여 전역 범위로 정의됩니다(즉, 섹션 10.1.3에 설명된 대로 전역 개체의 멤버로 생성됨). 블록은 실행 범위에 진입할 때 생성됩니다. 새로운 실행 범위를 정의하지 마십시오. Program 및 FunctionDeclaration만 생성 시 변수가 정의되지 않은 상태로 초기화됩니다. 🎜>
이 글을 통해 JavaScript 프로그래머들이 가장 혼란스러워하는 부분을 조금이나마 이해할 수 있기를 바랍니다. 더 이상 혼란을 야기하지 않도록 포괄적으로 작성하려고 최선을 다했습니다. 제가 실수했거나 중요한 내용을 놓친 경우 알려주시기 바랍니다.