JavaScript スコープに関する質問の分析

プログラムを書いたことがある人なら誰でも、スコープの概念に精通しているでしょう。この記事では、JavaScript のスコープについて説明します。

Javascript では、グローバル環境自体がオブジェクトです。ブラウザ ホストでは、このオブジェクトはウィンドウですが、JavaScript が埋め込み環境などの他の非ブラウザ ホストで使用される場合は、他のオブジェクトになる可能性があります。

ここで概念を修正したいと思います。多くの人は、JavaScript はブラウザーでのみ使用されると考えています。実際、Javascript は Web 以外の多くの状況でも使用できるとのことです。もちろん、私はこれらの伝説しか聞いたことがありません。

さらに近いところでは、var i=1 と書くと、実際にはウィンドウ スコープで変数を宣言していることになります。

そして i=1 と書くと、ウィンドウ属性を宣言します。

 看这样一段代码：
  [code=javascript">
<script type="text/javascript">
var a = "hello";
b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>  
function runCode(id) {
obj = document.getElementById(id); 
var TestWin=open(&#39;&#39;); //打开一个窗口并赋给变量TestWin。 
TestWin.opener = null // 防止代码对论谈页面修改 
TestWin.document.write(obj.value); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。 
TestWin.document.close(); 
} 
var a = "hello";
b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);

このコードの出力結果は、未定義の世界、ようこそ中国、こんにちは中国です。

それぞれ説明しましょう:

上で述べたように、JavaScript がプリコンパイルされると、すべての var はデフォルトの変数作成になります。値が未定義の場合、ここに例を示します:

次のようなコードを書くことができます:

<script type="text/javascript">
alert(a);
alert(b);
var a = "111";
        b = "111";
</script>  [/code]
    alert(a);  
    alert(b);  
    var a = "111";  
        b = "111";

このスクリプトを実行して実行すると、最初に未定義のポップアップが表示され、次にスクリプトのプロンプトが表示されることがわかります。 b が存在しないことを示すエラー。 a はプリコンパイル プロセス中に作成され、未定義に初期化されたことがわかりますが、b は実際の実行時に順次にのみ解釈できます。実際、プリコンパイルされた Javascript コードは次のようにほぼ理解できます:

<script type="text/javascript">
var a = undefined;
alert(a);
alert(b);
a = "111";
b = "111";
</script>

次に、コードが関数に実行されると、JavaScript エンジンは自動的に新しいスコープを作成します。この新しいスコープを現在のスコープの子スコープとして使用し、現在のコード スコープをこの新しいスコープに切り替えます。コードが関数を終了すると、このスコープは破棄され、コード スコープは親スコープに戻ります。

さて、準備はほぼ完了しました。次に、最初の質問である未定義の世界が出力される理由について説明します。

まず、Test メソッドに入るとコードがプリコンパイルされ、新しいスコープが開かれ、グローバル スコープがその親スコープとして使用されます。次に、Test でメソッドをプリコンパイルします。上記のコードと同様、Test メソッドがプリコンパイルされた後のメソッド本体は次のようになります。

function Test() {
    var a = undefined;
    alert(a + " " + b);
    var a = "welcome";
    b = "china";
    alert(a + " " + b);
}

もちろん、 b は現在のスコープ内に見つからないため、 b に移動します。 ="world" は親スコープ、つまりグローバル スコープの下にあります。それでこの結果が生まれました。

ようこそ中国が二度目に現れました。言うことは何もありません。

3 度目に、hello china がポップアップ表示されます。 var a はメソッド Test の単なるローカル変数であり、b は事前に宣言されていないため、対応する定義を見つけるために親スコープに移動することがわかります。

さて、次に、この方法のいくつかのバリエーションを見てみましょう。

<script type="text/javascript">
var a = "hello";
        b = "world";
Test();
function Test() 
{
alert(a + " " + b);
a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>

まず、メソッド本体の var a を a に変更します。 答えを見ずに直接解析してみましょう まず、コンパイル前の段階では、メソッド本体にはほとんど変更がありません。現時点では、a は b と同じです。そのため、最初の結果は hello world になるはずです。2 回目は何も言われません。a と b 以降です。このスコープでは事前に定義されていないため、親スコープの値が変更されるため、welcome china.

が出力されるはずです。 続けてみましょう:

<script type="text/javascript">
var a = "hello";
        b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
var b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>

上記の分析と同じ、未定義、未定義、ようこそ中国、こんにちは。 world.

<script type="text/javascript">
a = "hello";
b = "world";
Test();
function Test() 
{
alert(a + " " + b);
var a = "welcome";
b = "china";
alert(a + " " + b);
}
alert(a + " " + b);
</script>

は、unknown china、welcome china、hello chinaである必要があります。

テスト後、問題はありません。

したがって、各変数が独自の定義を見つけることができない場合、一連のアクションに沿って上向きに検索するため、予期しないエラーが発生する可能性が高く、トラブルシューティングがさらに困難になると結論付けることができます。さらに厄介なのは、親スコープの変数値も変更される可能性があるため、JavaScript では強制されませんが、変数の宣言時に var を追加するように努める必要があります。

以上がJavaScript スコープに関する質問の分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。