Web面接におけるJS事前解析と変数プロモーションの違い

事前分析とは何ですか?

コンセプト：

JS コードが上から下まで実行される前に、ブラウザはまずすべての変数宣言を解析します。この段階は事前解析と呼ばれます。

詳しい説明

スコープ内で var および関数宣言を探し (匿名関数には関数宣言がないため、ホイストされません)、それらを事前に宣言し、代入操作をそのままにして、コードを上から下へ実行します。これは事前分析プロセスです。

変数と関数の準備の違い

事前解析中に、 varで宣言されたすべての変数とfunctionで宣言された関数がスコープの先頭に昇格されます。

varで宣言された変数は事前解析中にのみ事前に宣言され、代入ステートメントはそのまま残ります。

functionで宣言された関数は、事前解析時に事前に宣言および定義されます。関数が実行されると、関数内で事前解析が行われます。

注意: 匿名関数には関数宣言がないため、昇格されません。

var 変数の繰り返し宣言

var が繰り返し宣言された場合: すでに存在する場合、コンパイラはvar無視してコンパイルを続行します。

存在しない場合は、アプリケーション ドメイン チェーンに沿って上方向に検索します。

見つからない場合、変数はこのスコープ内で宣言されます。

変数と関数の昇格の優先順位

要約:

関数の昇格は変数の昇格よりも優先順位が高く、同じ名前の変数が宣言されたときには上書きされませんが、変数に値が割り当てられた後は上書きされます。

以下のコンテンツは以下から転載したものです:

https://blog.csdn.net/caoyafeicyf/article/details/53172532

関数の優先度が変数の優先度よりも高い理由を詳しく見る

ブラウザの事前解析プロセス

小さな質問から始めましょう。

var foo;
関数 foo(){}
コンソールにログ出力します。

結果は関数本体のfunction foo(){}になります。
次に次の質問です。

 function foo(){ }var foo;console.log(foo);

結果は関数本体でもある

関数 foo(){}

関数宣言の優先度は変数宣言の優先度よりも高いと言う人が多いです。

それで、なぜでしょうか?これはブラウザの事前解析から始まります。

事前分析プロセス

事前に解析されたキーワードを検索する

varキーワードを探す

関数キーワードを見つける

事前解析を実行する

まず、var キーワードを使用して識別子を宣言し、これらの識別子を定義します。識別子が定義された後は、この識別子を使用するときにエラーは報告されません。ただし、値が割り当てられていないため、その値は未定義です。

これまでのところ、識別子は関数への参照を保持しています。

注目すべきいくつかの詳細

• 同じ識別子に対して var キーワードを繰り返し使用した場合、最初の使用以外はすべて無視されます。
• 事前解析時には、変数宣言が最初に処理され、関数宣言が 2 番目に処理されます。
• どちらが優先されるかを心配する必要はありません。これらは単なる表面的な現象です。
• 事前分析プロセスを理解してください。すべては過ぎ去る雲に過ぎません

事前解析の原則を読んだ後、この記事の冒頭の 2 つの質問に戻り、事前解析プロセスを分析し、関数の優先度が変数の優先度よりも高い理由を詳しく理解しましょう。私に従ってください

まずは最初のものを見てみましょう

var foo;
関数 foo(){}
コンソールにログ出力します。

事前分析プロセスは次のとおりです。

var foo;<---- 変数宣言内のvar
var foo;<----関数宣言から抽出されたvar
foo = function () {} <----関数宣言の抽出された割り当て console.log(foo);

2番目を見てみましょう

関数 foo(){}
var foo;
コンソールにログ出力します。

事前分析プロセスは次のとおりです。

var foo;<---- 変数宣言内のvar
var foo;<----関数宣言から抽出されたvar
foo = function () {} <----関数宣言の抽出された割り当て console.log(foo)

2つを比べてみて、何に気づきましたか?事前解析プロセスは同じであることが判明しており、これが関数が変数よりも優先される理由です。

上記の内容を理解したら、次に別の質問があります。

var a = 1;
関数a(){}
コンソールにログ出力します。

ブラウザはどのように解析するのでしょうか?私の考えの流れを追ってみましょう:

1. パーサーは最初に var キーワードを検索し、最初の行でそれを見つけて先頭に抽出します。
2. パーサーは function キーワードを検索し、2 行目に見つけます。最初に var + 関数名を分離し、最初のステップと同じであることがわかったので、処理しません。次に、関数の割り当て、つまりa=function (){}分離を開始します。ここで、a は関数本体です。
3. 次にパーサーは変数割り当てa=1を処理し、前のステップの関数本体が上書きされ、この時点で a=1 になります。
4. 最後に、 console.log(a)を処理し、結果は当然 1 になります。

パーサーによって処理されるコード プロセスは次のとおりです。

var a;<---- 変数宣言内のvar
var a;<----関数宣言から抽出されたvar
a=function (){<----関数宣言は代入 a=1; を抽出します。
コンソールにログ出力します。

以上が、Web面接におけるJS事前解析と変数プロモーションの違いについての詳しい内容です。JS事前解析と変数プロモーションの詳細については、123WORDPRESS.COMの他の関連記事に注目してください。