> 웹 프론트엔드 > JS 튜토리얼 > JavaScript 변수 범위 분류 및 사용 기술을 예제와 함께 자세히 설명합니다.

JavaScript 변수 범위 분류 및 사용 기술을 예제와 함께 자세히 설명합니다.

伊谢尔伦
풀어 주다: 2017-07-18 10:23:51
원래의
1271명이 탐색했습니다.

가변 범위는 모든 프로그래밍 언어가 다루는 주제이자, 프로그래머가 숙지해야 할 지식 포인트이기도 합니다.

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

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

var msg1='This is message 1'; 
msg2='This is message 2'; 
alert(window.msg1); //This is message 1 使用window关键字进行访问 
alert(window.msg2); //This is message 2 
alert(msg1); //This is message 1 省略window关键字的访问方式 
alert(msg2); //This is message 2 
function otherFunction(){} //其它一些函数或对象声明代码 
var otherObject={};
로그인 후 복사


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

var msg1='This is message 1'; 
var msg3='This is message 3'; 
function otherFunction() 
{ 
msg2='This is message 2'; //不使用var关键字,其实也是定义一个全局变量 
var msg3='Message 3'; 
alert(msg1); //This is message 1 (函数内当然可以访问到外面定义的全局变量,再深的函数嵌套一样能正确获到这个全局变量,这是JavaScript闭包的其中一种体现) 
alert(msg3); //Message 3 (局部变量msg3) 
alert(window.msg3); //This is message 3 (使用window前缀访问同名的全局变量msg3) 
alert(this.msg3); //This is message 3 (因为otherFunction ()定义在一个全局的环境中,此时otherFunction ()的this也是指向window,所有你看到window. msg3是等于this. msg3的) 
} 
otherFunction(); 
//otherFunction函数外面定义的msg1和里面定义的msg2依然是全局变量 
alert(window.msg1); //This is message 1 
alert(window.msg2); //This is message 2
로그인 후 복사


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

function showMsg() 
{ 
if (true) 
{ 
var msg='This is message'; 
} 
alert(msg); //This is message 
} 
showMsg(); 
alert(typeof(msg)); //undefiend 
//这里在if {}大括号内定义的变量msg还能在if外showMsg()内访问到,但在showMsg()外则是无法访问的
로그인 후 복사


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

function showMsg() 
{ 
var MsgA='Message A'; 
this.setMsg=function(msg) 
{ 
var MsgB='Message B'; 
alert(MsgA); //Message A (子函数setMsg()可以访问父函数showMsg()的局部变量MsgA) 
} 
alert(MsgB); //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=&#39;This is message&#39;; 
alert(msg); 
})(); 
document.write(msg); //msg未定义 (匿名函数外的其它方法已无法调用msg这个变量) 
//----------------------------- 
var msg=&#39;This is message&#39;; 
alert(msg);
로그인 후 복사


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

function clsMsg() 
{ 
this.msg=&#39;This is default message&#39;; 
this.showMsg=function() 
{ 
alert(this.msg); 
} 
} 
sMsg=new clsMsg(); 
sMsg.msg=&#39;This is new message&#39;; 
sMsg.showMsg();
로그인 후 복사

위 내용은 JavaScript 변수 범위 분류 및 사용 기술을 예제와 함께 자세히 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿