jsのスコープと事前解析の詳細説明

今回は、js スコープの使用と事前解析について詳しく説明します。js スコープと事前解析の使用に関する 注意事項 は何ですか? ここでは実際のケースを見てみましょう。

私たちの仕事では ES6 がますます広く使用されていますが、多くのプロジェクトではまだ ES5 の記述方法が残っています。そのため、今日は ES5 でのスコープと事前解析メカニズムを再統合することにします。

概念:

範囲: ドメインは、空間、範囲、および領域を指し、その機能は、ドメイン内で読み取りおよび書き込み操作を実行できることを意味します。

変数のスコープは、プログラムのソースコード内で変数が定義されている領域です。

ES5 では、グローバル レベルと関数レベルのスコープしかありませんでした。ES6 では、js の事前解析メカニズムは、事前解析とトップダウン行単位の 2 つのプロセスに大別されます。行解釈

事前解析: js パーサーはまず、var で定義された変数、関数、パラメータ、その他のものをウェアハウス (メモリ) に保存します。変数 var が正式に実行される前に、関数 function が実行される前に、関数ブロック全体が 1 行ずつ解釈されます

式

=, +, -, *, /, + +、-、! 、%....number()、およびパラメータはすべて割り当てることができます

名前が重複している場合は、1つだけが残ります。変数と関数が同じ名前の場合、関数優先度

が高くなります。呼び出し時には、関数

関数のみが残ります（関数はスコープです。スコープに遭遇すると、最初に事前解析し、次に行ごとに解釈するプロセスに従って実行されます）。まず、ローカルでパラメーターを探します。ローカルで見つからない場合は、下から上に探します (スコープ チェーン)。次に、いくつかの小さな栗を与えて、上記の理論と組み合わせて深く理解しましょう。

実践

例 1:

alert(a); //error: a is not defined
a = 3;

分析:

事前解析

前述したように、事前解析中に保存されるのは var、関数、パラメーターなどのみであるため、次のようになります:

Var は見つかりませんスコープ全体で 関数パラメータ

1行ずつ解釈

事前解析後、aはメモリ内に存在し、underfind変数全体に割り当てられるため、プログラムはコード実行中にエラーを直接報告します。

例 2:

alert(a); //undefined
var a = 3;

分析:

事前解析

前述したように、事前解析中に保存されるのは var、関数、パラメータなどだけなので、:

2 行目まで実行すると、 a の値は未定義です。

1行ごとの解釈

最初の行: 事前解析後、aがメモリ内に存在し、アンダーファインで割り当てられる

例3:

alert(a);          // function a (){ alert(4); }
var a = 1;
alert(a);          // 1
function a (){ alert(2); }
alert(a);          // 1
var a = 3;    
alert(a);          // 3
function a (){ alert(4); }
alert(a);          // 3

分析:

ドメイン解析

上記のように、次の場合のみpre-parsing var、function、parameters などを格納しますので、

が 2 行目まで実行されると、a の値は不定になります。

実行が 4 行目に達すると、a の値は関数そのもの、つまり function a(){alert(2);} になります。

実行が 6 行目に達しても、関数の優先順位が変数よりも高いため、a の値は 4 行目、つまり関数 a(){alert(2);} の値のままです。

実行が8行目に達すると、aの値はfunction a(){alert(4);}になります。これは、2つの関数が同じ名前を持つ場合、コードは上から下に実行されるためです。

行ごとの解釈

事前解析が完了すると、コードは行ごとに実行されます

最初の行: function a(){alert(4);} がポップアップします。解析が完了し、メモリに保存されます。 a の値は function a(){alert(4);} です

2 行目: 2 行目に式があります。 a には新しい値 1 が代入されます。変数の値を変更します。式によって、事前解析された値が変更される場合があります。

3 行目: a には値 1 が割り当てられ、すべて 1 がポップアップ表示されます

4 行目: これは単なる関数宣言であり、式は使用されておらず、関数呼び出しもないため、 aは変更されません。

5行目: aの値は変わっていないので、1のままです

6行目: 式が使用され、aに新しい値3が代入されます

7行目: 3がポップアップします

第八行：函数的声明，不会改变a 的值。

第九行：a的值没有改变，所以还是3

通过上面的栗子，相信大家应该对变量作用域的预解析过程有一定的了解了，接下来，咋们再举几个函数作用域的栗子

例4：

var a=1;
function fn1(){
  alert(a); //undefined
  var a = 2;
}
fn1();
alert(a) //1

例5：

var a=1;
function fn1(a){
  alert(a); //1
  var a = 2;
}
fn1(a);
alert(a) //1

例6：

var a=1;
function fn1(a){
  alert(a); //1
  a = 2;
}
fn1(a);
alert(a) //1

例7：

var a=1;
function fn1(){
  alert(a); //1
  a = 2;
}
fn1(a);
alert(a) //2

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

async与await的用法详解

node+express实现聊天室

以上がjsのスコープと事前解析の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。