ホームページ >ウェブフロントエンド >jsチュートリアル >jsでのスコープの使い方を詳しく解説

jsでのスコープの使い方を詳しく解説

php中世界最好的语言オリジナル: 2018-04-14 15:09:311301ブラウズ

今回は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);
}

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

ここでの変数のスコープは中括弧によって制限されているため、ブロックレベルのスコープと呼ばれます。

ブロックレベルのスコープでは、すべての変数は定義の中括弧内にあり、定義の先頭から中括弧の終わりまでの範囲で使用できます。つまり、この範囲外ではアクセスできません。

変数が同じ中括弧内で定義および使用されているため、これにアクセスできます。

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

2. JavaScript でのスコープ

1. 変数のスコープを制限する関数

JavaScript では、関数内で定義された変数には関数内でアクセスできますが、関数外からはアクセスできません。コード:

if（true）
{
  int number=10;
  Console.WriteLine(number);
}

コードの実行中に、変数番号が定義されていないため、関数内で定義された変数は、代入前でも関数内で任意に使用できます。

このコードを実行すると、エラーは 2 回表示されます (未定義と 10

)。 2. サブドメインが親ドメインにアクセスします

関数は変数のスコープを制限でき、その関数内の関数はスコープのサブドメインになります。コードは次のとおりです。このコードの実行結果は 10 ですが、サブドメイン内の親ドメインのコードへのアクセスも条件付きです

<script type="text/javascript">
  var num=function()
  {
   var number=10;
  };
  try{
    alert(number);
  }catch(e)
  {
    alert(e);
  } 
</script>

このコードは、前のコードよりも「var num=20;」が 1 つ増えています。このコードはサブドメイン内にあるため、このコードによって出力される結果は 20 になります。サブドメインアクセスされる数値は、親ドメインではなく、子ドメインの変数です。 JavaScript で変数を使用する場合、JavaScript インタプリタはまず現在のスコープで変数の定義を検索します。そうでない場合は、この変数を使用します。親ドメインなど、トップレベルのスコープが見つからなくなるまで、「変数が定義されていません」という例外がスローされます。コードは次のとおりです。このコードを実行すると、20 が出力されます。「

」を使用すると、未定義のエラーが発生します。

JSスコープとブロックレベルスコープを導入しましょう

スコープは、変数とパラメーターの可視性と

ライフサイクル

を制御するため、どのvar num=20"取掉，那么打印的就是10.同样去掉"var num=10プログラミング言語

においても常に最も重要なものです。そういえば、まずブロックレベルのスコープと

関数スコープ

という 2 つの概念を理解してください。

ブロックレベルのスコープとは何ですか? 中括弧 ({ と }) のペア内のステートメントのセットはブロックに属し、ブロック内で定義されているすべての変数はコードブロックの外では見えません。これをブロックレベルスコープと呼びます。関数のスコープがわかりやすいです(*^^*) 関数内で定義したパラメータや変数は関数の外からは見えません。

ほとんどの 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でのスコープの使い方を詳しく解説

関連記事