JavaScriptにおける変数昇格の例を詳しく解説

次のエディターは、JavaScript の変数プロモーションについて最もわかりやすく詳細に説明します。編集者はこれがとても良いと思ったので、参考として共有します。以下のようにエディターをフォローして見てみましょう

:

a = 'ghostwu';
var a;
console.log( a );

変数プロモーションとは何か、変数プロモーションのルールについて話す前に、または変数プロモーションを学習していない場合は、既存のトピックに従ってください。 JavaScript を理解すると、上記の例では、コードの 3 行目の出力結果は未定義であると考えるかもしれません。2 行目は変数を宣言していますが、値を割り当てていないため、a の値は次のとおりです。未定義ですが、結果は正しいです。理由については、読み続けてください。

console.log( a );
var a = 'ghostwu';

上記のコードの最初の行では、を出力する前にエラーが報告されていると思われるかもしれません。 a 変数は定義されていませんが、正しい結果は It is unknown です。ちょっと説明がつかないようですが、JavaScript はバグが多すぎます

その理由を理解するには、まず次の 2 つの点を明確にする必要があります。 javascript コードは 1 行ずつ実行されません。

javascript の実行は 2 つのステップに分かれています:

コンパイル (字句解釈/事前解釈)

実行

次に、var a = "ghostwu" が発生したとき、実際、js はこの文を 2 段階のものとして扱い、コンパイル段階で var a が発生し、実行段階で a = 'ghostwu' が発生します。すると、var a が前に昇格します。現在のスコープ、および a = 'ghostwu' は実行ステージを待機する位置に留まります。つまり、

a = 'ghostwu';
var a;
console.log( a );

//上面这段代码经过编译之后，变成下面这样

var a; //被提升到当前作用域的最前面
a = 'ghostwu'; //留在原地，等待执行
console.log( a );

console.log( a ); 
var a = 'ghostwu';

//上面这段代码,经过编译之后，变成下面这样

var a;
console.log( a );
a = 'ghostwu';

コンパイルされたコードを読んだ後、理解できましたか?

次に進む前に、まず関数を定義する 2 つの一般的な方法を明確にしましょう:

//函数声明, 形如:
  function show(){
   console.log( '函数声明方式' );
  }

  //函数表达式, 形如:
  var show = function(){
   console.log( '表达式方式' );
  }

なぜなら、式と関数宣言はコンパイル段階で異なる解釈効果を持つからです。

show();
  function show(){
   console.log( a );
   var a = 'ghostwu';
  }

コンパイル段階で上記のコードを説明するにはどうすればよいですか?次の文を覚えておいてください:

関数宣言はプロモートされます

したがって、上記のコードがコンパイルされると、次のようになります:

function show(){ //函数声明被提升到 当前作用域的最前面
   var a; //var声明被提升到当前作用域的最前面, 注意，他不会提升到函数的外面, 因为当前的作用域是在函数中
   console.log( a );
   a = 'ghostwu';
  }
  show();

したがって、上記の結果は未定義です ;

関数の場合次の例を参照してください:

show(); //报错,show is not a function
var show = function(){
 console.log( 'ghostwu' );
}
//对于上面这段表达式代码，经过编译之后:
var show;
show(); //执行之后就是 undefined(), 所以在表达式定义之前，调用函数报错了
show = function(){
 console.log( 'ghostwu' ); 
}

show(); //你好
  var show;
  function show(){
   console.log( '你好' );
  }
  show = function(){
   console.log( 'hello' );
  }

なぜ上記のコードの結果は "Hello" なのでしょうか?

理由: 同じ名前の関数宣言がある場合が表示され、変数が宣言されると、関数宣言が最初にプロモートされ、変数宣言は無視されます。 したがって、コンパイル後は次のようになります:

function show(){
   console.log( '你好' );
  }
  show(); //你好
  show = function(){
   console.log( 'hello' );
  }
  show();//如果这里在调用一次，就是hello, 因为show函数体在执行阶段 被 重新赋值了

以下のように、同じ名前の関数宣言がある場合、後者の関数宣言が前の関数宣言を上書きします:

show(); //how are you
  var show;
  function show(){
   console.log( 'hello' );
  } 
  show = function(){
   console.log( '你好' );
  }
  function show(){
   console.log( 'how are you!' );
  }
//上面的代码经过编译之后，变成如下形式:
  function show(){
   console.log( 'how are you!' );
  }
  show(); //how are you
  show = function(){
   console.log( '你好' );
  }
  show(); //如果在这里再执行一次，结果：你好

//思考题： 请问下面的结果是什么？ 为什么？ 写下你的答案
   show();
   var a = true;
   if( a ){
    function show(){
     console.log( 1 );
    }
   }else {
    function show(){
     console.log( 2 );
   }
   }

以上がJavaScriptにおける変数昇格の例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。