JavaScript クロージャーの理解と例_JavaScript スキル-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 18:21:26

オリジナル

1030 人が閲覧しました

ちなみに、注意:
字句スコープ: 変数のスコープは、実行時ではなく定義時に決定されます。つまり、字句スコープはソースコードに依存し、静的を通じて決定できます。したがって、字句スコープは静的スコープとも呼ばれます。 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