JavaScript 변수의 전체 범위 분석_기본 지식

변수 범위는 프로그램에서 변수가 정의되는 영역입니다.
먼저 예를 살펴보겠습니다.

/* 코드 1 */

var scope = "global ";
function checkScope() {
 var scope = "local ";
 function childCheck() {
  var scope = "childLocal ";
  document.write(scope);
 }
 function childUndefined() {
  document.write(scope);
  var scope;
 }
 function childOverride() {
  scope = "childOverride ";
  document.write(scope);
 }
 document.write(scope); //输出"local"
 childCheck();   //输出"childLocal"
 childUndefined();  //输出"undefined"
 childOverride();  //输出"childOverride"
 document.write(scope); //输出"childOverride"
}
checkScope();    //输出"local childLocal undefinedchildOverride childOverride"
document.write(scope);  //输出"global "

글로벌 범위와 로컬 범위
전역 변수는 전역 범위를 가지며 Javascript의 모든 곳에서 정의됩니다. 함수 내부에 선언된 변수는 지역 변수이며 해당 범위는 지역적이며 함수 본문 내부에서만 정의됩니다. 다음 결과는 독자들에게 놀라운 일이 아닙니다.
/* 코드 2 */

var scope = "global";
function checkScope() {
 var scope = "local";
 document.write(scope);
}
checkScope();   //输出"local"
document.write(scope); //输出"global"

전역 변수 범위에서는 var 문 없이도 변수를 사용할 수 있지만, 지역 변수 선언 시에는 반드시 var 문을 사용해야 합니다. 그렇지 않으면 전역 변수에 대한 참조로 간주됩니다. 아래 코드를 보세요:
/* 코드 3 */

var scope = "global";
function checkScope() {
 scope = "local";
 document.write(scope);
}
checkScope();   //输出"local"
document.write(scope); //输出"local"

블록 범위 없음
자바스크립트에는 블록 수준 범위가 없으며 함수에서 선언된 변수는 함수 전체에 걸쳐 정의됩니다. 다음 코드는 익숙하지 않은 독자에게는 놀라울 수 있습니다.
/* 코드 4 */

var scope = "global";
function checkScope() {
 document.write(scope); //语句4.1
 var scope = "local"; //语句4.2
 document.write(scope);
}
checkScope();   //输出"undefinedlocal"

문 4.1에서 선언한 변수(varscope = "local";)는 checkScope 함수 전체 범위 내에서 유효하므로, 문 4.2(document.write(scope);)를 실행하면 해당 범위는 지역 변수를 참조하게 됩니다. 이때 지역변수의 범위가 정의되지 않았기 때문에 "undefine"이 출력됩니다. 따라서 좋은 프로그래밍 방법은 함수 시작 부분에서 모든 변수 선언을 그룹화하는 것입니다.

위 내용을 이해하신 후, 코드 1을 보시면 독자분들이 헷갈리지 않으실 겁니다.
객체의 속성변수
객체의 속성 변수는 비교적 이해하기 쉽습니다. 다음 코드를 보는 독자들은 혼동하지 마십시오.
/* 코드 5 */

var scope = "global ";
var obj = new Object();
obj.scope = "object ";
obj.checkScope = function () {
 var scope = "loacl ";
 document.write(scope);   //输出"loacl"
 document.write(this.scope);  //输出"object"
 document.write(window.scope); //输出"global"
}
obj.checkScope(); //输出"loacl object global"

소위 범위는 코드 블록에서 이 변수의 유효 범위를 나타냅니다. JavaScript 범위 지정을 이해하지 못하면 코드를 디버그하기 어려울 수 있습니다.

함수에서 var를 사용하여 변수를 선언하면 변수의 범위가 함수 내부로 제한되고, 함수 외부의 코드는 변수에 접근할 수 없습니다. 이 함수 내에서 함수를 선언하면 이 내부 함수도 이 변수에 액세스할 수 있습니다.

반대로, 변수 선언 시 var를 사용하지 않으면 이 변수의 범위는 이 함수로 제한되지 않습니다. JavaScript 엔진은 변수가 전역 범위에 정의되었는지 확인합니다. 변수가 정의되지 않은 경우 전역 변수로 정의됩니다.

함수는 동일한 범위에 있는 변수에 액세스할 수 있습니다.

var foo = 'hello';

var sayHello = function() {
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // also logs 'hello'

변수 범위 밖의 코드는 변수에 액세스할 수 없습니다.

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // doesn't log anything

스코프에 이름은 같지만 값이 다른 변수를 사용하지 마세요.

var foo = 'world';

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // logs 'world'

함수를 정의한 후 함수 내 변수 값의 변경 사항을 확인할 수 있습니다.

var myFunction = function() {
 var foo = 'hello';

 var myFn = function() {
  console.log(foo);
 };

 foo = 'world';

 return myFn;
};

var f = myFunction();
f(); // logs 'world' -- haha

스코프도 순회 — 클로저

// 一个自执行的匿名函数
(function() {
 var baz = 1;
 var bim = function() { alert(baz); };
 bar = function() { alert(baz); };
})();

console.log(baz); // 在函数外面不能访问 baz

bar(); // 声明 bar 的时候并没有用 var
  // 所以 bar 是一个全局变量; 但是，
  // bar 和 baz 在相同的作用域内被定义,
  // 所以 bar 可以访问 baz
  // 其实 bar 是个闭包函数

bim(); // bim 的作用域只限于匿名函数内部，
  // 所以这里不能调用

종합

소위 범위는 코드 블록에서 이 변수의 유효한 범위를 나타냅니다. JavaScript 범위 지정을 이해하지 못하면 코드를 디버그하기 어려울 수 있습니다.

함수에서 var를 사용하여 변수를 선언하면 변수의 범위가 함수 내부로 제한되고, 함수 외부의 코드는 변수에 접근할 수 없습니다. 이 함수 내에서 함수를 선언하면 내부 함수도 이 변수에 액세스할 수 있습니다.

반대로, 변수 선언 시 var를 사용하지 않으면 이 변수의 범위는 이 함수로 제한되지 않습니다. JavaScript 엔진은 변수가 전역 범위에 정의되었는지 확인합니다. 변수가 정의되지 않은 경우 전역 변수로 정의됩니다.

함수는 동일한 범위에 있는 변수에 액세스할 수 있습니다.

var foo = 'hello';

var sayHello = function() {
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // also logs 'hello'

변수 범위 밖의 코드는 변수에 액세스할 수 없습니다.

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // doesn't log anything

스코프에 이름은 같지만 값이 다른 변수를 사용하지 마세요.

var foo = 'world';

var sayHello = function() {
 var foo = 'hello';
 console.log(foo);
};

sayHello();   // logs 'hello'
console.log(foo); // logs 'world'

함수를 정의한 후 함수 내 변수 값의 변경 사항을 확인할 수 있습니다.

var myFunction = function() {
 var foo = 'hello';

 var myFn = function() {
  console.log(foo);
 };

 foo = 'world';

 return myFn;
};

var f = myFunction();
f(); // logs 'world' -- haha

스코프도 순회 — 클로저

// 一个自执行的匿名函数
(function() {
 var baz = 1;
 var bim = function() { alert(baz); };
 bar = function() { alert(baz); };
})();

console.log(baz); // 在函数外面不能访问 baz

bar(); // 声明 bar 的时候并没有用 var
  // 所以 bar 是一个全局变量; 但是，
  // bar 和 baz 在相同的作用域内被定义,
  // 所以 bar 可以访问 baz
  // 其实 bar 是个闭包函数

bim(); // bim 的作用域只限于匿名函数内部，
  // 所以这里不能调用