> 웹 프론트엔드 > JS 튜토리얼 > js의 범위 사용법에 대한 자세한 설명

js의 범위 사용법에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-04-14 15:09:31
원래의
1317명이 탐색했습니다.

이번에는 js 스코프 사용에 대한 자세한 설명을 가져오겠습니다. js 스코프 사용 시 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

JavaScript는 현재 많은 사람들이 사용하고 있습니다. JavaScript 사용과 관련하여 많은 사람들이 범위 및 블록 수준 범위에 대해 자세히 설명하지 못할 수 있습니다. 보세요.

1. 블록 수준 범위에 대한 설명

JavaScript 변수 범위를 배우기 전에 몇 가지 사항을 명확히 해야 합니다.

a. JavaScript의 변수 범위는 고유한 범위 체인을 기반으로 합니다.

b. JavaScript에는 블록 수준 범위가 없습니다.

c. 함수에 선언된 변수는 함수 전반에 걸쳐 정의됩니다.

javascript의 변수 범위는 C#의 코드와 같이 일반적으로 사용되는 C 유사 언어와 다릅니다.

static void Main(string[] args)
{
   if(true)
   {
    int number=10;
   }
  Console.WriteLine(number);
}
로그인 후 복사

"현재 컨텍스트에 숫자가 존재하지 않습니다." 때문에 이 코드를 컴파일할 수 없습니다.

여기서 변수의 범위는 중괄호로 제한되므로 블록 수준 범위라고 합니다.

블록 수준 범위에서 모든 변수는 정의의 중괄호 안에 있습니다. 정의의 시작부터 중괄호의 끝까지의 범위에서 사용할 수 있습니다. 이 범위 밖에서는 액세스할 수 없습니다. 즉,

if(true)
{
  int number=10;
  Console.WriteLine(number);
}
로그인 후 복사
입니다. 변수가 동일한 중괄호 내에서 정의되고 사용되기 때문에 액세스할 수 있습니다.

그러나 JavaScript에는 블록 수준 범위 개념이 없습니다.

2. 자바스크립트의 범위

1. 함수는 변수 범위를 제한합니다

JavaScript에서 함수에 정의된 변수는 함수 내부에서 액세스할 수 있지만 함수 외부에서는 액세스할 수 없습니다. 코드가 실행 중일 때 예외가 발생합니다. 이는 함수에 정의된 변수를 함수 외부에서 사용할 수 없기 때문입니다. 할당 전에도 마찬가지입니다.

이 코드를 실행한 후에는 오류가 발생하지 않습니다. 즉, 정의되지 않음 및 10

이 나타납니다. 2. 하위 도메인은 상위 도메인에 액세스합니다

함수는 변수의 범위를 제한할 수 있으며, 함수의 함수는 범위의 하위 도메인이 됩니다. 코드는 다음과 같습니다.

<script type="text/javascript">
  var num=function()
  {
   var number=10;
  };
  try{
    alert(number);
  }catch(e)
  {
    alert(e);
  } 
</script>
로그인 후 복사

이 코드를 실행한 결과는 10인데, 하위 도메인에서 상위 도메인의 코드에 접근하는 것도 조건부입니다

<script type="text/javascript">
 var num=function(){
    alert(number);
    var number=10;
    alert(number);
 };
 try{
   num();
 }catch(e){
  alert(e);
 }
</script>
로그인 후 복사

이 코드는 이전 코드보다 "var num=20;"이 하나 더 있어서 하위 도메인에 접근하는 상황이 바뀌었습니다. 이때, 이 코드로 출력되는 결과는 20입니다. 하위 도메인 액세스된 수는 상위 도메인이 아닌 하위 도메인의 변수입니다. JavaScript에서 변수를 사용할 때 JavaScript 인터프리터는 먼저 현재 범위에서 변수의 정의를 검색하는 경우 이 변수를 사용하는 것을 볼 수 있습니다. 상위 도메인 등이 여전히 최상위 범위를 찾을 수 없을 때까지 "변수가 정의되지 않았습니다"라는 예외가 발생합니다.

<script type="text/javascript">
 var func=function(){
    var number=10;
    var sub_func=function(){
      alert(num);
    };
   sub_func();
};
func();
</script>
로그인 후 복사

이 코드를 실행하면 20이 출력됩니다. "

"을 사용하면 정의되지 않은 오류가 발생합니다.

JS 범위와 블록 수준 범위를 소개하겠습니다

var num=20"取掉,那么打印的就是10.同样去掉"var num=10 범위는 변수와 매개변수의 가시성과

수명주기

를 제어하기 때문에 모든

프로그래밍 언어

에서 항상 가장 중요한 것입니다. 말하자면, 먼저 블록 수준 범위와 함수 범위라는 두 가지 개념을 이해하세요. 블록 수준 범위란 무엇입니까? 한 쌍의 중괄호({ 및 }) 안에 있는 모든 명령문 세트는 블록에 속하며, 여기에 정의된 모든 변수는 코드 블록 외부에서 보이지 않습니다.

함수 범위는 이해하기 쉽습니다(*^^*). 함수에 정의된 매개변수와 변수는 함수 외부에서 보이지 않습니다.

대부분의 C 계열 언어에는 블록 수준 범위가 있지만 JS는 그렇지 않습니다. 아래 데모를 확인하세요:

//C语言 
#include <stdio.h> 
void main() 
{ 
  int i=2; 
  i--; 
  if(i) 
  { 
    int j=3; 
  } 
  printf("%d/n",j); 
}
로그인 후 복사

运行这段代码,会出现“use an undefined variable:j”的错误。可以看到,C语言拥有块级作用域,因为j是在if的语句块中定义的,因此,它在块外是无法访问的。 

而JS是如何表现的呢,再看另一个demo:

functin test(){ 
 for(var i=0;i<3;i++){   
 } 
 alert(i); 
} 
test();
로그인 후 복사

运行这段代码,弹出"3",可见,在块外,块中定义的变量i仍然是可以访问的。也就是说,JS并不支持块级作用域,它只支持函数作用域,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。

那么我们该如何使JS拥有块级作用域呢?是否还记得,在一个函数中定义的变量,当这个函数调用完后,变量会被销毁,我们是否可以用这个特性来模拟出JS的块级作用域呢?看下面这个DEMO:

  function test(){ 
 (function (){ 
 for(var i=0;i<4;i++){ 
 } 
 })(); 
 alert(i); 
} 
test();
로그인 후 복사

这时候再次运行,会弹出"i"未定义的错误,哈哈,实现了吧~~~这里,我们把for语句块放到了一个闭包之中,然后调用这个函数,当函数调用完毕,变量i自动销毁,因此,我们在块外便无法访问了。

JS的闭包特性is the most important feature((*^^*) 大家懂的)。在JS中,为了防止命名冲突,我们应该尽量避免使用全局变量和全局函数。那么,该如何避免呢?不错,正如上文demo所示,我们可以把要定义的所有内容放入到一个

(function (){ 
//内容 
})();
로그인 후 복사

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

JS+canvas做出围绕旋转动画

JS实现五子棋小游戏

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

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