>  기사  >  웹 프론트엔드  >  JavaScript의 범위 및 범위 체인 설명

JavaScript의 범위 및 범위 체인 설명

PHPz
PHPz앞으로
2023-09-07 09:25:02977검색

解释 JavaScript 中的作用域和作用域链

JavaScript에서 Scope는 변수와 함수에 액세스하는 코드의 어느 부분과 방법을 정의합니다. 간단히 말해서 범위는 코드의 안전성과 가독성을 향상시키는 데 도움이 될 수 있습니다. 그러므로 우리는 그 범위 내에서만 변수와 함수에 접근할 수 있고 그 외부에서는 접근할 수 없습니다.

이 튜토리얼에서는 다양한 유형의 범위에 대해 논의합니다.

JavaScript의 전역 범위

전역적으로 정의된 변수 및 함수는 전역 범위를 갖는 모든 블록 및 함수 외부를 의미합니다. 코드 어디에서나 전역 범위를 사용하여 모든 변수와 함수에 액세스할 수 있습니다.

문법

사용자는 다음 구문을 따라 전역 범위의 변수를 정의할 수 있습니다.

으아아아

여기서 전역 변수 global는 함수 외부에서 선언되므로 전역 범위를 갖습니다. 그런 다음 지역 변수 b를 선언하고 전역 변수 global의 값을 할당하여 func 함수 내에서 액세스합니다.

이 예에서는 전역 범위를 사용하여 전역 변수를 정의합니다. func()이라는 함수 내에서 이에 액세스하고 함수에서 해당 값을 반환합니다.

출력에서 func() 함수가 전역 변수의 값인 20을 반환하는 것을 볼 수 있습니다.

으아아아

로컬/기능 범위

로컬 범위는 함수 범위라고도 합니다. 함수 내부에 정의된 변수에는 함수 범위/로컬 범위가 있습니다. 함수 외부의 변수에는 접근할 수 없습니다.

문법

아래 구문을 따르면 변수와 함수의 로컬 범위를 알 수 있습니다. -

으아아아

여기 local_var에는 func() 함수 내부에 함수 범위가 있으므로 외부에서는 액세스할 수 없습니다.

이 예에서는 func() 함수를 만들었습니다. func() 함수 내에서 local_var 변수를 로컬 범위로 정의했습니다. 즉, func() 함수 내에서만 해당 변수에 액세스할 수 있습니다. func() 함수 외부에서 local_var에 액세스하려고 하면 local_var이 정의되지 않았기 때문에 오류가 발생하는 것을 볼 수 있습니다. 이 오류를 보려면 콘솔을 열어야 합니다.

으아아아

블록 범위

JavaScript에서는 두 개의 중괄호 ({ ….. })를 사용하여 블록을 정의할 수 있습니다. 블록 범위는 특정 블록 내에서 정의한 모든 변수에 액세스할 수 있으며 블록 외부에서는 액세스할 수 없음을 의미합니다. letconst 키워드를 사용하여 선언된 변수에는 블록 범위가 있습니다.

문법

사용자는 아래 구문을 따라 변수의 블록 범위를 이해할 수 있습니다.

으아아아

여기서는 특정 블록 내부에 정의했기 때문에 중괄호 외부에서 block_var에 액세스할 수 없습니다.

Note - var 키워드를 사용하여 선언된 변수에는 블록 범위가 없습니다.

이 예에서는 중괄호를 사용하여 블록을 정의하고 변수 num을 정의했습니다. 우리는 블록 내부와 외부에서 이 변수에 접근하려고 합니다. num을 블록 내부에 정의했기 때문에 중괄호 외부에서는 액세스할 수 없다는 것을 알 수 있습니다.

으아아아

어휘 범위

어휘 범위는 정적 범위와 동일합니다. JavaScript에서는 중첩 함수를 실행하고 중첩 함수 내의 변수에 액세스하려고 하면 먼저 로컬 컨텍스트에서 변수를 찾습니다. 중첩된 함수의 로컬 컨텍스트에서 변수를 찾을 수 없으면 함수 실행의 상위 컨텍스트에서 변수를 찾으려고 시도합니다. 마지막으로 변수가 전역 컨텍스트에서 발견되지 않으면 정의되지 않은 것으로 간주됩니다.

문법

사용자는 아래 구문을 따라 어휘 범위를 이해할 수 있습니다.

으아아아

위 구문에서는 함수 실행 범위에서 parent_var에 액세스했습니다. log() 함수는 로컬 범위에서 parent_var를 찾지 않으므로 함수가 호출된 범위(예: 전역 범위)에서 찾으려고 시도합니다.

이 예에서는 test() 함수와nested() 함수를 내부에 정의했습니다. 또한, 우리는nested() 함수 내에서 global_var 및 parent_var에 액세스하고 있습니다. JavaScript는 로컬 컨텍스트에서 이 두 변수를 찾지 않기 때문에 먼저 Nested() 함수의 실행 컨텍스트를 찾은 다음 test() 함수의 실행 컨텍스트를 찾습니다.

으아아아

스코프 체인

스코프 체인이라는 용어에서 알 수 있듯이 스코프 체인입니다. 예를 들어, 함수 내에 중첩 함수를 정의한다고 가정해 보겠습니다. 이 경우 로컬 범위를 가질 수 있으며 중첩 함수 내부에 선언된 변수는 외부 함수에서 액세스할 수 없습니다.

그래서 우리는 스코프 체인을 만들고 있습니다. 그래서 스코프 체인이라고 부릅니다.

문법

사용자는 아래 구문을 따라 범위 체인을 이해할 수 있습니다.

으아아아

이 예에서 inner() 함수는 external() 함수의 범위 내에 있습니다. 즉, external() 함수 외부에서 inner() 함수를 호출할 수 없습니다. inner() 함수는 external() 함수 내부에 범위 체인을 만듭니다.

<html>
   <body>
      <h2>Scope Chain in JavaScript </i></h2>
      <div id="output"></div>
      <script>
         let output = document.getElementById("output");
         function outer() {
            var emp_name = "Shubham!";
            function inner() {
               var age = 22;
               output.innerHTML += ("The value of the emp_name is " + emp_name) +"<br/>";
               output.innerHTML += "The value of the age is " + age;
            }
            inner();
            
            // age can't be accessible here as it is the local scope of inner
         }
         outer();
      </script>
   </body>
</html>

在本教程中,我们讨论了 JavaScript 中的作用域和作用域链。我们讨论了全局、局部/函数、块和词法作用域。在上一节中,我们了解了作用域链在 Javascript 中的工作原理。

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

성명:
이 기사는 tutorialspoint.com에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제