js 범위에 대한 자세한 설명

이 기사에서는 특정 참조 가치가 있는 js 범위에 대한 자세한 설명을 주로 소개합니다. 이제 모든 사람과 공유합니다. 도움이 필요한 친구들이 참조할 수 있습니다.

1.ES5

for(var i =0;i<10;i++){
 } 
console.log(i)

js 코드의 범위, 어떻게 생각하시나요? 출력이 될까요? 정답은 10입니다. Java에 익숙한 학생들은 조금 놀랐을 것입니다. 왜 그럴까요? js는 여전히 java와 다르기 때문에 ES5에서는 전역 범위와 함수 범위만 있고 블록 범위는 없습니다. 물론 블록 범위의 기능을 구현할 수 있습니다. 아래 코드를 보세요:

(function(){
  for(var i =0;i<10;i++){
   
   } 
})() 
console.log(i)

이러한 작성 방식을 IIFE(즉시 호출 함수 표현식)라고 합니다. Baidu를 모르는 경우 실제로 이 범위에 선언된 변수는 블록 내에서만 유효합니다. 그리고 외부에서 접근이 가능합니다. 이 작성 방법의 장점은 전역 변수를 오염시키지 않는다는 것입니다.

여기서 또 언급하고 싶은 점은 ES5에서는 변수 선언이 엄격하지 않다는 점입니다. a=10을 사용하여 전역 변수를 직접 선언할 수 있습니다. 다음과 같습니다:

a=10; 
   console.log(a)

출력 10, 여기서는 변수를 선언하지 않고도 사용할 수 있습니다. 실제로 js는 한 가지 작업을 수행합니다. 다음 코드가 실행됩니다.

var a=undefined; 
   a=10;
   console.log(a)

변수를 선언하지 않고 함수에서 직접 사용해 볼 수 있습니다. 개인적으로 이런 유연한 접근 방식은 별로 좋지 않다고 생각합니다. 그러나 ES6에서는 변수를 선언하지 않고 사용하는 것이 더 이상 권장되지 않습니다.
그럼 좀 더 발전된 작업, 즉 가변 개선을 해보겠습니다. (ES5의 개념, ES6의 새로운 사용법은 변수 승격을 유발하지 않습니다.) 코드를 살펴보세요.

a=10;
 (function(){
    console.log(a) 
    var a=1; 
})();

출력이 무엇일 것 같나요? 정의되지 않음, 올바르게 대답하셨나요? 헷갈려도 상관없지만, 변수 승격이 무엇인지 살펴보겠습니다. 사실, 변수 선언을 함수 상단으로 승격시키는 것입니다. 실제로 위 코드는 js를 설명하면 다음과 같습니다.

var a=undefined;
 a=10;
 (function(){
     var a=undefined;
     console.log(a)
     a=1;
 })();

이제 변수 승격이 무엇을 의미하는지 이해하셨을 것입니다. 사실 이는 명령문을 맨 앞으로 가져오는 것을 의미하므로 출력이 정의되지 않습니다.

2.

ES6 Scope ES5의 많은 문제로 인해 ES6에서는 var 선언이 let으로 대체되었습니다. 그러나 ES5와의 호환성을 위해 이전 var를 계속 사용할 수 있습니다. 그러나 여전히 let을 사용하는 것이 좋습니다.
let은 블록 범위인 js에 새로운 범위를 추가합니다. 코드를 보세요:

for(let i=0;i<10;i++){
 }
 console.log(a)

출력 a가 정의되지 않았습니다. 여기서는 java 및 기타 구문을 완전히 사용하여 변수 선언을 이해할 수 있으며, let을 사용하여 선언한 변수는 선언에 사용할 수 없습니다.
a=3
let a =10;
alert(a)
출력은 정의되지 않습니다. 이유는 무엇입니까? Ruan Yifeng의 ES6에서는 let 명령이 블록 수준 범위에 존재하는 한 이 명령이 선언하는 변수는 이 영역에 "바인딩"되며 더 이상 외부 영향의 영향을 받지 않을 것이라고 말합니다. ES6에서는
블록에 let 및 const 명령이 있는 경우 이 블록에서 이러한 명령으로 선언된 변수가 처음부터 닫힌 범위를 형성한다고 명확하게 규정합니다. 선언 전에 이러한 변수를 사용하면 오류가 발생합니다. 물론 그 이유를 설명하면서 일시적인 데드존을 언급하기도 했다.
. 요약(주제에서 벗어남)
ES6이 나온 지 꽤 되었기 때문에 ES5의 작성과 사용법을 많이 접하게 되므로 JS es5와 es6을 이해하는 것이 중요합니다. end 또는 back-end에서 js와 ​​어느 정도 접촉하게 됩니다. 이제 js에 대해 심층적으로 이해해야 합니다. end는 더 이상 예전과 다릅니다. 저는 여전히 js 개발에 대해 매우 낙관적입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 추천:

JS의 프로토타입에 대한 자세한 설명

js를 통해 의사 배열을 배열로 변환하는 방법

위 내용은 js 범위에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!