js のスコープと事前解析メカニズム (詳細なチュートリアル)

この記事では主に、js の範囲、事前解析メカニズム、および関連するコード分析について詳しく説明します。これに興味がある人は、そこから学ぶことができます。

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

概念:

範囲: ドメインは、空間、範囲、および領域を指し、その機能は、ドメイン内で読み取りおよび書き込み操作を実行できることを意味します。変数のスコープは、プログラムのソース コード内で変数が定義されている領域です。

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

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

式 =、+、-、*、/、++、 ――、！ 、%....number()、パラメータはすべて割り当てることができます

同じ名前を持つ変数と関数は 1 つだけ残り、関数は変数よりも優先されます。 left.

関数呼び出し (関数はスコープです。スコープに遭遇すると、まず事前解析してから行ごとに解釈するプロセスに従って実行されます)。ローカルでは見つからないので、下から上に探してください (スコープチェーン)

このコンセプトはばかばかしいもので、初心者はまだ少しめまいを感じると思われるため、経験豊富なドライバーはすぐにバスを降りることができます。次に、小さな栗をいくつか挙げて、上記の理論と組み合わせて深く理解してみましょう。

実践

例 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の値は関数そのもの、つまり関数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がポップアップします

8行目行: 関数の宣言は a の値を変更しません。

9行目: 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

上記は私が皆さんのためにまとめたものです。将来的には誰にとっても役立ちます。

関連記事:

jqueryでスタイルを使用してHTMLタグ要素を動的に追加する方法

node.jsでfsファイルシステムのディレクトリ操作とファイル情報操作を実装するには?

jQueryでliタグを動的に追加し、属性を追加し、イベントメソッドをバインドする方法

以上がjs のスコープと事前解析メカニズム (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。