es5와 es6 범위의 차이점은 무엇입니까

차이점: es5에는 전역 범위와 함수 범위라는 두 가지 유형의 범위만 있는 반면, es6에는 전역 범위, 함수 범위, 블록 수준 범위의 세 가지 범위가 있습니다. . 블록 수준 범위의 역할: 내부 범위 변수의 승격으로 인해 외부 변수가 덮어쓰이는 문제를 해결하고 루프 계산에 사용되는 변수가 전역 변수로 누출되는 것을 방지할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터

범위 측면에서 es5와 es6의 차이점:

• 범위에는 두 가지 유형만 있습니다. es5: 전역 범위 도메인 및 함수 범위

• es6에는 세 가지 유형의 범위가 있습니다: 전역 범위, 함수 범위 및 블록 수준 범위

ES5에서는 전역 범위와 함수 범위만 ES5에서 사용됩니다.

변수는 var로 선언됩니다. var로 선언된 변수는 전역 범위 또는 로컬 범위에 존재할 수 있습니다. 구체적인 상황은 다음과 같습니다

글로벌 범위를 갖는 세 가지 상황입니다.

a. 함수 외부에 선언된 변수는 전역 범위를 갖습니다.

b. 직접 할당을 위해 정의되지 않은 변수는 자동으로 전역 변수로 선언됩니다.

c. 창 개체의 속성에는 전역 범위가 있습니다.

2. 범위( 함수 범위)

함수 본문의 변수 범위

함수 내부에 정의된 변수는 함수 내에서만 액세스할 수 있습니다.

• 
  예

    var a = 1;
    console.log(a);// 1                  此处a为全局变量，在全局作用域下都可访问得到
  
    b = 2
    console.log(b); // 2                 此处b未被var定义，而是被直接赋值，自动声明为全局变量
    
    function fun() {
      var c = 3;
      console.log(c);//3                 此处c存在在函数作用域中，仅在函数fun中可访问
    }
    fun()
    console.log(c);// undefined         全局作用域下访问函数作用域中的变量c，得到undefined

Es6의 새로운 블록 수준 범위

블록 수준 범위는 자체 범위를 형성할 수 있는 중괄호 {}로 묶인 콘텐츠로 간단히 이해될 수 있습니다. 블록 수준 범위의 변수는 let 및 const

블록 수준 범위가 필요한 이유는 무엇입니까?

1. 내부 범위 변수의 승격으로 인해 외부 변수가 덮어쓰이는 문제 해결

var i = 5;
function fun(){
  console.log(i);//undefined
  if(true){
    var i = 6
    console.log(i);//6
  }
}
fun()

실행 결과

함수 fun의 변수 i는 var를 사용하여 선언됩니다. 소위 변수 호이스팅은 함수 선언과 변수 선언이 인터프리터에 의해 항상 메서드 본문의 맨 위로 조용히 "호이스팅"되는 것을 의미합니다. 따라서 여기서 i는 함수 fun의 맨 위에 미리 도달하는 것과 동일하지만 i = 6이 실행 중일 때 할당은 여전히 ​​수행됩니다. 위 코드는 실제로 다음과 동일합니다.

var i = 5;
function fun(){
  var i;
  console.log(i);
  if(true){
    i = 6
    console.log(i)
  }
}
fun()

첫 번째 i가 인쇄되면 i는 다음과 같습니다. 선언되었지만 아직 할당되지 않았습니다(if 문에서 i에 값 6이 할당됨). 따라서 첫 번째로 인쇄된 i는 정의되지 않았고 두 번째로 인쇄된 i는 6

var i = 5;
function fun(){
  console.log(i);//5
  if(true){
    let i = 6
    console.log(i);//6
  }
}
fun()

if에서 변수 i를 선언하기 위해 let을 사용하는 경우 , 그러면 if 문이 위치한 중괄호 { }는 블록 수준 범위를 형성하고, 이 범위에서 선언된 변수는 이 영역에 "바운드"되어 더 이상 외부 영향(즉, 임시 중단)의 영향을 받지 않습니다. zone) 따라서 fun 함수를 실행할 때 첫 번째 i 출력은 전역 범위에서 var i=5이고, if 문의 i 출력은 블록 수준 범위에서 선언된 let i=6입니다

2. 루프 계산에 사용되지 않습니다. 변수가 전역 변수로 유출됩니다.

for(var i = 0; i < 3; i++){
  doSomething()
}
console.log(i)//3

위 코드는 루프에서 사용하기 위해 var로 i 변수를 선언합니다. 이상적으로 i는 루프 본문 내에서만 유효해야 합니다. 노출되고 전역 범위에 있으므로 루프가 끝난 후에도 i의 값은 여전히 ​​전역적으로 액세스할 수 있습니다

for(let i = 0; i < 3; i++){
  console.log(i)
}
console.log(i)//undefined

블록 수준 범위에서 let을 사용하여 i를 선언한 경우 여기에서 선언된 i 변수는 for 루프 중괄호 { }. 전역 범위에서 블록 수준 범위의 변수에 액세스하면 정의되지 않은 결과가 발생합니다

블록 수준 범위의 특성

1. let으로 선언된 변수는 범위( 현재 중괄호 안에 있음) 임의 중첩이 허용되며 각 수준은 별도의 범위입니다

2. 내부 범위는 외부 범위 변수와 동일한 이름을 가질 수 있습니다(서로 간섭하지 않고 범위를 사용하지 않음)

3. let은 현재 범위 최상위에만 존재할 수 있습니다

참고: if 문과 for 문에서 { }에 let 또는 const로 선언된 변수/상수가 있는 경우 { }의 범위도 블록 범위에 속합니다

scope에 대한 예

<script type="text/javascript">
	{
		var a = 1;
		console.log(a); // 1
	}
	console.log(a); // 1
	// 可见，通过var定义的变量可以跨块作用域访问到。

	(function A() {
		var b = 2;
		console.log(b); // 2
	})();
	// console.log(b); // 报错，
	// 可见，通过var定义的变量不能跨函数作用域访问到

	if(true) {
		var c = 3;
	}
	console.log(c); // 3
	for(var i = 0; i < 4; i++) {
		var d = 5;
	};
	console.log(i);	// 4   (循环结束i已经是4，所以此处i为4)
	console.log(d); // 5
	// if语句和for语句中用var定义的变量可以在外面访问到，
	// 可见，if语句和for语句属于块作用域，不属于函数作用域。

	{
		var a = 1;
		let b = 2;
		const c = 3;	
		
		{
			console.log(a);		// 1	子作用域可以访问到父作用域的变量
			console.log(b);		// 2	子作用域可以访问到父作用域的变量
			console.log(c);		// 3	子作用域可以访问到父作用域的变量

			var aa = 11;
			let bb = 22;
			const cc = 33;
		}
		
		console.log(aa);	// 11	// 可以跨块访问到子 块作用域 的变量
		// console.log(bb);	// 报错	bb is not defined
		// console.log(cc);	// 报错	cc is not defined
	}
</script>

【 관련 추천:

javascript 비디오 튜토리얼

,

web front-end

】

위 내용은 es5와 es6 범위의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!