>웹 프론트엔드 >프런트엔드 Q&A >JavaScript에서 두 가지 유형의 변수 범위의 차이점은 무엇입니까?

JavaScript에서 두 가지 유형의 변수 범위의 차이점은 무엇입니까?

青灯夜游
青灯夜游원래의
2021-07-19 11:24:403106검색

차이점: 전역 범위에서 변수는 페이지 스크립트 전반에 걸쳐 표시되며 자유롭게 액세스할 수 있습니다. 로컬 범위에서 변수는 선언된 함수 내부에서만 볼 수 있으며 함수가 실행된 후에는 함수 외부에서 액세스할 수 없습니다.

JavaScript에서 두 가지 유형의 변수 범위의 차이점은 무엇입니까?

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

"변수 범위(Scope)"라고도 불리는 변수 범위는 변수가 프로그램 내에서 접근할 수 있는 유효 범위, 즉 변수의 가시성이라고도 합니다.

Scope

1. Scope란 무엇입니까

일반적으로 프로그램 코드에 사용되는 이름은 항상 유효하고 사용 가능한 것은 아니며, 이 이름의 사용 가능 여부는 제한되어 있습니다. 이 이름의 범위.

JS 범위: 코드명(변수)의 범위입니다.

범위의 목적: 프로그램의 신뢰성을 높이고, 더 중요한 것은 이름 충돌을 줄이는 것입니다.

2. ES6 이전)

JS 범위는 전역 범위, 로컬 범위(함수 범위) 두 가지 범주로 나눌 수 있습니다.

1) 전역 범위:

  스크립트 태그에 직접 작성된 JS 코드는 전역 범위에 있습니다.

 또는 별도의 JS 파일에 있습니다.

전역 범위는 페이지가 열릴 때 생성되고 페이지가 닫힐 때 소멸됩니다.

전역 범위에는 직접 사용할 수 있는 전역 개체 창이 있습니다(브라우저에서 생성된 브라우저 창을 나타냄).

전역 범위에서

  • 생성된 모든 변수는 창 개체의 속성으로 저장됩니다.

  • 생성된 모든 함수는 window 객체의 메소드로 저장됩니다.

2) 로컬 범위(함수 범위):

함수 내부는 로컬 범위입니다. 이 코드의 이름은 함수 내부에서만 작동합니다.

함수 범위는 함수가 호출될 때 생성됩니다. 함수가 실행된 후에는 함수 범위가 소멸됩니다.

함수가 호출될 때마다 새로운 함수 범위가 생성되며 서로 독립적입니다.

분석 예:

이 예에서는 un 함수의 로컬 범위에 num 변수가 있고, script 태그의 전역 범위에도 num 변수가 있습니다.

(하나는 전역 범위에 있고 다른 하나는 로컬 범위에 있습니다. 두 변수의 변수 이름이 충돌하더라도 효과가 없습니다.)

그래서 변수 이름이 동일해도 상관 없습니다. 다른 범위에 영향을 미치므로 이름 충돌이 효과적으로 줄어듭니다.

<script>
    var num = 10;
    function nu(){
        var num = 20;
        console.log(num);
    }
    nu();
    console.log(num);
</script>

현재 단계(ES6 이전)에는 JS에 블록 수준 범위가 없습니다. 블록 수준 범위는 중괄호({})로 묶여 있습니다.

2. 변수의 범위

JavaScript 변수는 전역 변수와 지역 변수로 나눌 수 있습니다.

  • 전역 변수: 변수는 전체 페이지 스크립트에 표시되며 해당 범위는 전역 도메인입니다.

  • 로컬 변수: 변수는 선언된 함수 내에서만 볼 수 있으며 함수 외부에서는 액세스할 수 없습니다.

예제 1

다음 예에서는 전역 변수와 지역 변수의 관계를 보여줍니다.

var a = 1;  //声明并初始化全局变量
function f(){  //声明函数
    document.write(a);  //显示undefined
    var a = 2;  //声明并初始化局部变量
    document.write(a);  //显示 2
}
f(); //调用函数

함수 내부에 같은 이름의 지역 변수 a가 선언되어 있으므로, 사전 컴파일 기간 동안 JavaScript는 이 변수를 사용하여 함수 내부의 전역 변수의 영향을 무시합니다. 실행 시작 시 지역 변수 a에는 값이 할당되지 않으므로 함수 코드의 첫 번째 줄에서 읽은 지역 변수 a의 값은 정의되지 않습니다. 함수의 코드 2번째 줄이 실행되면 지역변수에 2의 값이 할당되므로 3번째 줄에는 2로 표시됩니다.

예제 2

다음 예에서는 지역 변수를 명시적으로 선언하지 않은 경우의 결과를 보여줍니다.

var jQuery = 1;
(function () {
    jQuery = window.jQuery = window.$ = function(){};
})()
document.write(jQuery);  //显示函数代码:function(){}

따라서 함수 본문 내에서 전역 변수를 사용하는 것은 위험한 행동입니다. 이러한 문제를 방지하려면 함수 본문 내에서 var 문을 사용하여 지역 변수를 명시적으로 선언하는 습관을 들여야 합니다.

【추천 학습: javascript 고급 튜토리얼

위 내용은 JavaScript에서 두 가지 유형의 변수 범위의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.