JavaScript クロージャーの理解と例_JavaScript スキル

ちなみに、注意:
字句スコープ: 変数のスコープは、実行時ではなく定義時に決定されます。つまり、字句スコープはソース コードに依存し、静的を通じて決定できます。したがって、字句スコープは静的スコープとも呼ばれます。 withとevalを除けば、JSのスコープ機構は字句スコープ(Lexicalscope)に非常に近いとしか言​​えません。

次に、グローバル変数を使用した簡単なクロージャーの例を示します。

コードをコピーします コードは次のとおりです。

var sWord="こんにちは。Web フロントエンド開発エンジニアのブログへようこそ。アドバイスをお願いします。
function disWord(){
alert(sWord) ;
}
disWord();

分析: スクリプトがメモリにロードされるとき、disWord は sWord の値を計算しませんが、関数の実行時に sWord の計算を実行します。 disWordと呼ばれます。

次に、別の関数を定義する関数内のクロージャの例を示します。

コードをコピーしますコードは次のとおりです:

var iNum=10;
function add(num1,num2){
function doAdd(){return num1 num2 iNum;}
return doAdd( );
}

分析: 内部関数 doAdd は、受信パラメーター num1、num2 の値を取得しますが、グローバル変数 iNum はパラメーターを受け入れません。追加の最後のステップでは doAdd を呼び出します。2 つのパラメータとグローバル変数 iNum を取得して、doAdd で使用される値が実行環境で取得されることがわかります。


以下は、字句範囲とクロージャーを理解した、インターネット上にあるいくつかの例です

コードをコピー コードは次のとおりです:

、ケース 1
/*グローバル (ウィンドウ) ドメイン下のコード*/
function a(i) {
var i ;
alert(i);
a(10);

質問: 上記のコードは何を出力しますか?
答え: 10.
具体的な実行プロセス
a 関数には仮引数 i があり、a 関数を呼び出す際に実引数 10 が渡され、仮引数 i=10 となります。
次に、ローカル変数 i を定義します。同じ名前で値が割り当てられていません
alert 出力 10
考察: ローカル変数 i と仮パラメータ i は同じ記憶領域ですか?
、ケース 2

コードをコピー コードは次のとおりです:

1 /*グローバル (window) ドメインの下のコード */
2 function a(i) {
3 alter(i); //arguments[0];仮パラメータ i
5 var i = 2;
7 alter(arguments[0]);
9 a(10); ;


質問: 上記のコードは何を出力しますか?
答え: 10,10,2,2
具体的な実行プロセス

関数には仮パラメータ i があり、関数の呼び出し時に実際の値が渡されます。 パラメータ 10、仮パラメータ i=10
最初のアラートは、仮パラメータ i の値 10 を出力します。
2 番目のアラートは、arguments[0] を出力します。これも i である必要があります
次にローカル変数 i を定義し、代入される値は 2 です。このとき、ローカル変数 i=2
3 番目のアラートはローカル変数 i の値 2 を出力します。
4 番目のアラートは引数 a[ 0] もう一度
考え: これで局所変数 i と仮パラメータ i の値は同じですか?

、ケース 3




コードをコピー

コードは次のとおりです: /*グローバル (ウィンドウ) ドメインの下のコード*/ function a(i) {

var i = i;

a( 10)


質問: 上記のコードは何を出力しますか?
答え: 10
具体的な実行プロセス
最初の文は、仮パラメータ i と同じ名前のローカル変数 i を宣言しています。結果によれば、後の i は
を指していることがわかります。仮パラメータ i なので、ここでは、仮パラメータ i の値 10 をローカル変数 i に代入するのと同じです

2 番目のアラートは当然 10 を出力します
考え方: ケース 2 と組み合わせると、これは基本的に、ローカル変数 i と仮パラメータ i は同じストア アドレスを指しています。
、ケース 4




コードをコピーします

コードは次のとおりです: /*Global (ウィンドウ) ドメインの下のコード*/ var i=10; function a() { var i = 2; );

};

質問: 上記のコードは何を出力しますか?
答え: 未定義、2
特定の実行プロセス
最初のアラートは未定義を出力
2 番目のアラートは 2 を出力
考え: 何が起こっているのでしょうか?
上記の例を見て、どのように実装すればよいか疑問に思うかもしれません。実装の詳細は何ですか? JSエンジンはどのように動作するのでしょうか?
解析プロセス
、実行シーケンス
コンパイル言語。コンパイル手順は、字句解析、構文解析、意味チェック、コードの最適化、バイト生成に分かれています。
インタープリタ型言語では、字句解析と構文解析を通じて構文解析ツリーを取得した後、解釈と実行を開始できます。ここでは、解析プロセスに関する簡単かつ独自の原理を示します。詳細な解析プロセス (さまざまな JS エンジンが異なります) については、さらなる検討が必要です。
ドキュメント ストリームに複数のスクリプト コードが含まれている場合。
ステップ 1. 最初のコードセグメントを読み取ります (JS 実行エンジンはプログラムを 1 行ずつ実行しませんが、解析されて実行されます)。
ステップ 2. 字句解析と構文解析を実行します。エラーがある場合は、構文エラー (括弧の不一致など) が報告され、ステップ 5 に進みます。
ステップ 3. 修正します。 [var ]変数と[function]定義は「事前解析」されます (正しい宣言のみが解析されるため、エラーは報告されません)
ステップ 4. コードセグメントを実行します。コードセグメントがあればエラーが報告されます。エラー (変数が未定義など)
ステップ 5. 別のコード セグメントがある場合は、次のコード セグメントを読み取り、ステップ 2 を繰り返します
ステップ 6. 終了
、特別な命令
すべての JSグローバル ドメイン (ウィンドウ) ドメイン内のコードを表示できます。これは自動的に実行される「匿名メソッド」ですが、この「匿名メソッド」内の他のメソッドは明示的に
と呼ばれた場合にのみ実行されます。主要な手順
上記のプロセスは、主に 2 つの段階に分かれています。
解析: 構文解析と事前解析を通じて、正当な構文解析ツリーを構築します。
実行: 特定の関数を実行します。JS エンジンが各関数インスタンスを実行すると、実行環境 (ExecutionContext) とアクティブ オブジェクト (activeObject) が作成されます (これらはホスト オブジェクトに属し、オブジェクトのライフ サイクルと一致します)。関数インスタンス) )
より詳細な分析資料の例は次のとおりです: http://www.jb51.net/article/24547.htm