JavaScript のスコープとブロックレベルのスコープ-jsチュートリアル-php.cn

JavaScript のスコープとブロックレベルのスコープ

小云云

リリース： 2017-12-09 09:01:28

オリジナル

1672 人が閲覧しました

この記事では、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);
}

ログイン後にコピー

このコードは、「現在のコンテキストに数値が存在しない」ためコンパイルできません。

ここでの変数のスコープは中括弧によって制限されるため、ブロックレベルのスコープと呼ばれます。ブロックレベルのスコープでは、定義から括弧の終わりまで、すべての変数が括弧内に定義されており、この範囲で使用できます。これは、変数が同じ中括弧内で定義および使用されているため、アクセス可能です。

しかし、JavaScriptにはブロックレベルのスコープという概念がありません。

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>

ログイン後にコピー

このコードが実行されると、エラーは 2 回表示されます。つまり、未定義と 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>

ログイン後にコピー

このコードは、前のコードよりも 1 つ多くの「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 スコープとブロックレベルのスコープの紹介です

スコープは、変数とパラメーターの可視性とライフサイクルを制御するため、どのプログラミング言語でも常に最優先されます。そういえば、まずブロックレベルスコープと関数スコープという 2 つの概念を理解してください。

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); 
}

ログイン後にコピー

このコードを実行すると、ブロックの外側に、ブロック内で定義した変数が表示されることがわかります。まだアクセス可能です。つまり、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 (){ 
//内容 
})();

ログイン後にコピー