jsでの変数宣言と関数宣言のプロモーションの詳細な分析（例付き）

この記事では、js での変数宣言と関数宣言の改善について詳しく説明します (例付き)。必要な方は参考にしていただければ幸いです。

変数宣言の改善
1. 変数定義
変数に値が割り当てられていない場合、変数の初期値は未定義になります。

2. 変数スコープ
変数スコープとは、変数が機能するスコープを指します。変数はグローバル変数とローカル変数に分けられます。グローバル変数はグローバルに定義されますが、ローカル変数は関数内でのみ有効です。
関数本体では、同じ名前のローカル変数またはパラメータがグローバル変数よりも優先されます。つまり、関数内にグローバル変数と同じ名前のローカル変数またはパラメーターが存在する場合、グローバル変数はローカル変数によって上書きされます。
varなしで定義された変数はすべてグローバル変数とみなされます

3. 関数のスコープと事前宣言
JavaScriptの関数効果とは、関数内で宣言されたすべての変数が常に関数本体で定義されることを意味します。変数は、宣言される前に使用できます。この機能は宣言ホイスティングと呼ばれます。つまり、JavaScript 関数内のすべての宣言 (宣言のみで代入は含まれません) が関数本体の先頭に進みますが、変数代入操作は関数本体の先頭に残ります。関数本体の位置。次の例のようになります。
注: 事前の宣言は、コードの実行が開始される前に、JavaScript エンジンのプリコンパイル中に実行されます。

var scope = 'global';function f(){
    console.log(scope);    
    var scope = 'local';
    console.log(scope);
}

関数内の宣言プロモーションにより、上記のコードは実際には次のようになります

var scope = 'global';function f(){
    var scope;    //变量声明提升到函数顶部
    console.log(scope);
    scope = 'local';    //变量初始化依然保留在原来的位置
    console.log(scope);
}

このような変換の後、答えは非常に明白です。最初の console.log(scope) ステートメントの前にスコープが定義されていますが、値が割り当てられていないため、この時点では 2 番目の console.log(scope) ステートメントの前にスコープ参照が定義されていません。値が「local」であるため、出力結果はローカルになります。

関数宣言の改善
関数宣言構文

f('superman');function f(name){
    console.log(name);
}

関数式構文

f('superman');var f= function(name){
    console.log(name);
}

上記のコードを実行すると、Uncaught ReferenceError: f is not generated(…)というエラーが報告され、fが定義されていないことがエラーメッセージに表示されます。定義されています。
同じコード内の関数宣言と関数式に違いがあるのはなぜですか?
これは、関数宣言には関数宣言ホイスティングという非常に重要な機能があるためです。関数宣言ステートメントは外部スクリプトまたは外部関数スコープの先頭にホイスティングされます (変数ホイスティングとよく似ています)。この機能により、関数宣言をそれを呼び出すステートメントの後に配置できます。以下の例のように、最終出力はどうなるでしょうか? :

var getName = function(){
    console.log(2);
}function getName (){
    console.log(1);
}
getName();

最終的な出力結果が1だと思う人もいるかもしれません。この例には、変数宣言のプロモーションと関数宣言のプロモーションが含まれています。関数宣言の昇格で前述したように、関数宣言関数 getName(){} が先頭に進みます。関数式 var getName = function(){} は、変数宣言の昇格を示します。したがって、この場合、getName も変数であるため、この変数の宣言も最後に移動しますが、変数の割り当ては元の位置に残ります。関数が優先されることに注意してください。関数宣言と変数宣言の両方がプロモートされますが、関数が最初にプロモートされ、次に変数がプロモートされます。したがって、上記の関数は次のように変換できます:

function getName(){    //函数声明提升到顶部
    console.log(1);
}
var getName;    //变量声明提升
getName = function(){    //变量赋值依然保留在原来的位置
    console.log(2);
}
getName();    // 最终输出：2

したがって、最終的な出力は次のようになります: 2.元の例では、関数宣言が関数式の後にありますが、関数宣言が先頭に昇格しているため、その後の関数式の代入演算でgetNameが上書きされ、2が出力されます。

関連するおすすめ:

以上がjsでの変数宣言と関数宣言のプロモーションの詳細な分析（例付き）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。