JS：なぜ可変配置が自分のコードを破るのですか？

Question

ボタンをクリックするとactive状態に変わるシステムを試しています。次に、画面上の他のボタンをクリックすると、「アクティブ」の場合、通常のイベントではなく別のイベントが発生します。

私は動作するようになったが、何かについて混乱している。これは、作業コードです：

dom.el("skill").onclick = active; 

function active(){ 
    active = true; 
} 

var active = false; 

問題を修正し、リストの一番下にグローバル変数activeを置くが、私は、最初は動作しませんでした非常にトップ、でそれを持っていました。

var active = false; 

dom.el("skill").onclick = active; 

function active(){ 
    active = true; 
} 

なぜこれは機能しませんか？私にとっては、彼らは事実上同じで、ちょうど異なる順序であります。

Answer 1

「ホイスト」という用語をチェックしてください。これは、関数宣言が呼び出されているために、関数宣言が上に移動しているためです。初期化は行われないので、var active = falseは置いた場所にとどまります。

最初のケースでは、関数宣言が最初に行われ、次に関数をonclickハンドラに設定します。

2番目のケースでは、ハンドラにfalseを設定します。

変数と関数に異なる名前を付けることをお勧めします。

Answer 2

var active = false; dom.el("skill").onclick = function(){ active = true; } 

これはどのように行うべきかです。関数とブール値に同じ変数を使用すると、いくつかのケースでうまくいくかもしれませんが、良いスタイルではありません。ただそれをしないでください。