JavaScript 변수 범위를 이해하는 것이 더 쉬워졌습니다_javascript 팁

JavaScript 자체는 단순한 언어이지만 가변 범위 문제로 인해 많은 사람들이 어지러워집니다. 이는 주로 JavaScript 클로저의 존재 때문입니다. 이 글은 자바스크립트 변수 범위 문제를 심도 깊게 설명할 의도가 없으며(사실 이 주제에 대해 깊이 있게 이야기할 능력이 없습니다), "클로저"라는 주제에 대해서도 이야기하지 않습니다. 가장 실용적인 JavaScript 범위 지식 포인트.

1. JavaScript 범위 분류
JavaScript에는 전역(창)과 함수 수준(함수)의 두 가지 범위가 있습니다. 함수 수준(function)을 "블록 수준(중괄호 {} 수준)"으로 이해하면 안 됩니다.

2. JavaScript 전역 변수와 지역 변수를 구별하고 정의합니다.
1.1 var 키워드가 있든 없든 모든 함수 외부에 정의된 변수는 전역 변수입니다. 전역변수는 실제로 윈도우 객체의 속성으로 파싱되므로 "window.global 변수명" 메소드에서 접근할 수 있으므로, 꼭 필요한 경우가 아니면 변수명을 사용하여 직접 접근하는 것이 좋습니다. 다음 예는 전역 변수를 정의하는 가장 일반적인 방법을 보여줍니다.

코드 복사 코드는 다음과 같습니다.

var msg1='메시지 1입니다';
msg2='메시지 2입니다';
alert(window.msg1); //window 키워드를 사용하여
alert(window .msg2); //메시지 2입니다.
alert(msg1); //메시지 1입니다. 윈도우 키워드의 액세스 방법을 생략합니다.
alert(msg2);
function otherFunction (){} //다른 함수 또는 객체 선언 코드
var otherObject={}

1.2 전역 변수는 함수 내에서 정의하고 가져올 수도 있습니다(로컬). 가변 런타임 환경). 정의 방법은 var 키워드를 사용하지 않고, 전역 변수 내용은 로컬 환경에서 쉽게 얻을 수 있으므로 전역 변수 이름을 사용하여 참조하면 된다. 함수에 전역 변수와 같은 이름의 지역 변수가 정의되어 있으면 함수 본체는 이때 반드시 같은 이름의 전역 변수를 사용해야 하는 경우 자체 지역 변수를 먼저 사용하게 된다는 점에 유의해야 합니다. 창 접두어를 추가하세요. 예:

코드 복사 코드는 다음과 같습니다.

var msg1='This is 메시지 1' ;
var msg3='이것은 메시지 3입니다';
function otherFunction()
{
msg2='이것은 메시지 2입니다'; //실제로는 var 키워드를 사용하지 않는 것입니다. a 전역 변수
var msg3='Message 3';
alert(msg1); //메시지 1입니다. (물론 외부에 정의된 전역 변수는 함수 내부에서 접근 가능합니다. 중첩되어 있으면 올바르게 얻을 수 있습니다. 이 전역 변수는 JavaScript 클로저의 표현 중 하나입니다.
alert(msg3); //메시지 3(로컬 변수 msg3)
alert(window.msg3) //This 메시지 3입니다(창 접두어를 사용하여 동일한 이름의 전역 변수 msg3에 액세스합니다)
alert(this.msg3); //메시지 3입니다(이때 otherFunction()은 전역 환경에 정의되어 있으므로, otherFunction()의 this도 window를 가리키므로 window.msg3은 this.msg3과 같습니다.
}
otherFunction()
//msg1은 otherFunction 함수 외부에 정의되고 msg2는 정의됩니다. 내부에는 여전히 전역 변수가 있습니다.
alert(window .msg1); //이것은 메시지 1입니다.
alert(window.msg2); //이것은 메시지 2입니다.

2.1 var 사용 키워드, 함수 본문에 정의된 변수는 로컬 변수입니다. 이 변수는 모든 명령문 블록({}) 및 그 아래 하위 함수에서 사용할 수 있습니다. 이 변수는 이 함수의 어느 곳에서나 액세스할 수 있지만 이 함수 외부에서 "직접" 액세스할 수는 없습니다(클로저는 간접 액세스 또는 프록시 액세스를 허용합니다. 이 지식 포인트는 이 문서의 범위를 벗어납니다). 예:

코드 복사 코드는 다음과 같습니다.

function showMsg()
{
if (true)
{
var msg='메시지입니다'
}
alert(msg) //메시지입니다
}
showMsg ();
alert(typeof(msg)); //undefiend
//if {} 중괄호 내에 정의된 변수 msg는 if 외부의 showMsg() 내에서도 액세스할 수 있지만 showMsg() 외부에서는 액세스할 수 없습니다.

2.2 상위 함수의 변수는 하위 함수에서 액세스할 수 있지만 하위 함수의 변수는 상위 함수에서 액세스할 수 없습니다. 이는 분명히 우리가 함수 수준 범위와 일치합니다. 서두에 언급했습니다. 아버지는 더 명랑하고 아들은 인색한 것 같습니다. 예:

코드 복사 코드는 다음과 같습니다.

function showMsg()
{
var MsgA='메시지 A'
this.setMsg=function(msg)
{
var MsgB='메시지 B' ;
alert(MsgA); //메시지 A(하위 함수 setMsg()는 상위 함수 showMsg()의 로컬 변수 MsgA에 액세스할 수 있음)
}
alert(MsgB); 정의되지 않았습니다(자식 함수에 정의된 변수 MsgB는 상위 함수에서 액세스할 수 없습니다)
}
var sm=new showMsg()
sm.setMsg('Message string'); 🎜>

3. 주의할 점과 활용 스킬
1. 변수가 혼동되거나 덮어쓰이는 것을 방지하려면 지역 변수 정의에 var 키워드를 추가하는 것을 잊지 마세요. 필요한 경우 사용 후 변수를 적극적으로 해제해야 합니다. 즉, "변수 이름 = null") 각 함수 본문의 시작 부분에 모든 변수를 정의하는 것이 좋습니다. 예:

코드 복사 코드는 다음과 같습니다.

var msg='Message' ;
function showMsg()
{
var msg; //여기서 실수로 전역 변수와 동일한 변수 이름을 사용하더라도 전역 변수를 동일한 이름으로 덮어쓸 염려가 없습니다. 이름
var a;
var b;
var c
for (a=0;a<10;a ){}
this.setMsg=function(){}
}

2. 익명 함수를 능숙하게 사용하여 이름 충돌이나 변수 오염을 줄입니다. 다음 두 코드는 실제로 동일한 함수를 구현하는데, 첫 번째 코드를 작성하는 방식은 익명함수 등에서 사용하고 싶은 변수명을 과감히 사용하면 되고, 굳이 쓰지 않아도 된다는 것입니다. 자신이 정의한 변수가 다른 사람의 정의나 자신의 정의를 덮어쓰는 것에 대해 걱정하세요.

코드 복사 코드는 다음과 같습니다.

//익명 함수를 정의하고 이 익명 함수는 일반적인 JS 프레임워크의 관행인 이름 충돌이나 변수 오염을 효과적으로 줄일 수 있습니다.
(function()
{
var msg='This is message';
alert( msg );
})();
document.write(msg); //msg는 정의되지 않습니다(익명 함수 이외의 메서드는 msg 변수를 호출할 수 없음)
//------ - ----------------------
var msg='메시지입니다'
경고(msg)

3. 인스턴스화가 필요하지 않은 함수에서 전역 변수에 액세스하기 위해 창 대신 이것을 사용하는 것은 권장되지 않습니다. 일반적으로 this 키워드를 사용하는 함수는 JavaScript 클래스로 처리되어야 합니다(저는 클래스 이름 앞에 "cls"라는 접두사를 붙이는 것을 좋아합니다). 다음 함수를 일반 함수로만 호출하는 경우 this 키워드는 일반적으로 전역 변수를 연산하기 위한 것이므로 나타나지 않아야 합니다. 예:

코드 복사 코드는 다음과 같습니다.

function clsMsg()
{
this.msg='기본 메시지입니다';
this.showMsg=function()
{
alert(this.msg)
}
}
sMsg=new clsMsg();
sMsg.msg='새 메시지입니다';
sMsg.showMsg();

4. 관련 지식 포인트
이해 다음 관련 지식은 JavaScript 변수 범위를 더 잘 이해하는 데 도움이 될 것입니다. 이 기사는 지금은 별도의 공간에서 다루지 않으므로 계속 지켜봐 주시기 바랍니다.
(1)
JavaScript "사전 구문 분석" 이해
(2)JavaScript 클로저