Javascript의 범위 및 블록 수준 범위

小云云
풀어 주다: 2017-12-09 09:01:28
원래의
1636명이 탐색했습니다.

이 글에서는 Javascript의 범위와 블록 수준 범위를 소개합니다. 범위는 변수와 매개변수의 가시성과 수명 주기를 제어하기 때문에 모든 프로그래밍 언어에서 항상 최우선 순위입니다. Javascript의 범위와 블록 수준 범위를 소개하겠습니다. 필요한 친구들이 참고할 수 있습니다.

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

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

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

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

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

자바스크립트의 변수 범위는 일반적으로 사용되는 C 계열 언어와 다릅니다. 예를 들어 C#의 코드:

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

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

여기서 변수의 범위는 중괄호로 제한되므로 블록 수준 범위라고 합니다. 블록 수준의 범위 내에서는 모든 변수가 괄호 안에 정의되어 있습니다.

변수가 동일한 중괄호 안에 정의되어 사용되기 때문에 접근이 가능합니다.

하지만 자바스크립트에는 블록 수준 범위 개념이 없습니다.

2. JavaScript의 범위

1. 함수 제한 변수 범위

JavaScript에서 함수에 정의된 변수는 함수 내부에서 접근할 수 있지만, 함수 외부에서는 접근할 수 없습니다.

if(true)
{
  int number=10;
  Console.WriteLine(number);
}
로그인 후 복사
코드가 실행되면 예외가 발생합니다. 변수 번호가 정의되지 않았습니다. 이는 함수에 정의된 변수를 함수 외부에서 사용할 수 없기 때문입니다. :

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

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

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

이 함수는 함수의 함수는 범위의 하위 도메인입니다. 하위 도메인의 코드는 상위 도메인의 변수에 액세스할 수 있습니다.

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

실행 결과 이 코드는 10이지만 하위 도메인의 상위 도메인에 액세스하는 코드도 조건부입니다

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

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

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

이 코드가 실행되면 20이 출력됩니다. "

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

다음은 JS 범위와 블록 수준 범위에 대한 소개입니다

범위는 변수와 매개변수의 가시성과 수명 주기를 제어하기 때문에 모든 프로그래밍 언어에서 항상 최우선 순위입니다. 말하자면, 먼저 블록 수준 범위와 함수 범위라는 두 가지 개념을 이해하세요.

var num=20"取掉,那么打印的就是10.同样去掉"var num=10

블록 수준 범위란 무엇인가요?

중괄호 쌍({ 및 }) 내의 모든 문 집합은 블록에 속하며, 여기에 정의된 모든 변수는 코드 블록 외부에서 보이지 않습니다.


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

대부분의 C 유사 언어에는 블록 수준 범위가 있지만 JS는 그렇지 않습니다. 아래 데모를 참조하세요.

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

이 코드를 실행하면 "정의되지 않은 변수 사용:j" 오류가 나타납니다. 보시다시피 C 언어에는 블록 수준 범위가 있습니다. j는 if 문 블록에 정의되어 있으므로 블록 외부에서는 액세스할 수 없습니다.

JS는 어떻게 작동하나요? 또 다른 데모를 살펴보겠습니다.

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

이 코드를 실행하면 "3"이 팝업되는 것을 볼 수 있습니다. 블록 외부에서 제가 정의한 변수는 다음과 같습니다. 아직 접근 가능합니다. 즉, 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 (){ 
//内容 
})();
로그인 후 복사

相关推荐:

详解JavaScript作用域和闭包

js的解析顺序作用域严格模式的解析

JavaScript作用域与闭包的分析讲解

위 내용은 Javascript의 범위 및 블록 수준 범위의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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