序文記事の冒頭で、いくつかの概念を学びましょう。
静的スコープと動的スコープJavaScript は静的スコープを使用し、関数定義の場所によって関数のスコープが決まります。 静的スコープと動的スコープの違いを理解するために例を見てみましょう。 var val = 1; 関数テスト() { コンソールログ(val); } 関数バー() { var val = 2; テスト(); } バー(); // 消す? ? ? 上記のコードでは:
静的スコープ実行プロセステスト関数を実行するときは、まずテスト関数内に変数 val があるかどうかを確認します。ない場合は、関数が定義されている場所に沿って検索し、前のレイヤーのコード内を検索して、値が 1 であるグローバル変数 val を見つけます。 スコープの検索は、実行時に常に最も内側のスコープから開始され、最初に一致する識別子が見つかるまで外側に移動します。 関数が呼び出される場所や呼び出される方法に関係なく、そのスコープは関数が定義されている場所によってのみ決定されます。 動的スコープ実行プロセスtest関数が実行されると、まず関数内からval変数が検索されます。見つからない場合は、呼び出し関数のスコープ、つまりbar関数のスコープからval変数が検索されます。そのため、印刷結果は2になります。 エクササイズ静的スコープを理解し、消化するための 3 つの演習を見てみましょう。スコープは関数が定義されている場所によって決まります。 練習1変数a = 1 関数fn1(){ 関数fn3(){ 変数a = 4 fn2() } 変数a = 2 fn3を返す } 関数fn2(){ コンソールログ(a) } var fn = fn1() 関数() 上記のコードでは:
質問を行う前に、静的スコープの概念を理解する必要があります。この問題では、fn2 はグローバルに定義されています。変数 a が fn2 で見つからない場合、fn1 および fn3 とは関係なくグローバルに検索され、1 が出力されます。 練習2変数a = 1 関数fn1(){ 関数fn2(){ コンソールログ(a) } 関数fn3(){ 変数a = 4 fn2() } 変数a = 2 fn3を返す } var fn = fn1() 関数() fn2 は関数 fn1 内で定義されているため、fn2 内に変数 a がない場合、関数 fn3 とは関係のない fn1 内で検索されます。fn1 内で見つからない場合は、最初に一致する識別子が見つかるまで、fn1 が定義されている前のレベル (グローバル) 内で検索されます。この問題では、fn1で変数aを見つけて2を出力します。 練習3var a = 1; 関数fn1(){ 関数fn3(){ 関数fn2(){ コンソールログ(a) } var a; fn2() = 4 } 変数a = 2 fn3を返す } var fn = fn1() 関数() この問題では、fn2 は関数 fn3 で定義されています。変数 a が fn2 で見つからない場合、まず fn3 を検索します。それでも見つからない場合は、fn1 を検索します。この問題では、変数 a は fn3 にありますが、fn2() の実行時に a に値が割り当てられていないため、undefined が出力されます。 要約するJavaScript の静的スコープに関しては、関数定義の場所によって関数のスコープが決まるという 1 つの文だけを覚えておく必要があります。疑問に遭遇したときは、他のコードに惑わされないでください。 JavaScript の静的スコープと動的スコープに関するこの記事はこれで終わりです。より関連性の高い JS の静的スコープと動的スコープのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Tomcat を使用して IntelliJ IDEA によってデプロイされたプロジェクトの場所はどこですか?
この記事では、Web デザインの達人がよく使用するレスポンシブ フレームワーク (概要) を紹介し、...
この記事では、マルチカラムレイアウトドラッグを実装するためのVueの具体的なコードを参考までに共有し...
原因かつて私は Vultr に WordPress を設定しましたが、よく知られている理由により、こ...
この記事の例では、マウスに従ってボールを動かすjsの具体的なコードを参考までに共有しています。具体的...
目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...
<br />このページはUTF8エンコードを使用しており、ヘッダーとフッターはテンプレー...
すべてがファイルです! UNIX はすでにそれを言っています。エリック・レイモンドはこう言いました。...
古いバージョンをアンインストールする以前に古いバージョンをインストールしたことがある場合は、まずそれ...
注: 親コンテナーに高さと :data='Array' および overfolw:h...
最近Ubuntu 20.04をインストールしましたが、Wi-Fiに接続できず、Wi-Fiアイコンも表...
Linux サーバーのホスト ファイルの構成hosts ファイルは、Linux システム内の IP ...
docker-compose.ymlを作成し、次の内容を入力します。 バージョン: '3...
目次序文参考比較手動比較浅い比較徹底比較要約する序文JavaScript でプリミティブ値を比較する...
遅いログクエリ機能スロー ログ クエリの主な機能は、設定された時間しきい値を超える SQL ステート...
目次標準的な実行プロセス最適化並べ替えを削除並べ替え成し遂げる要約する標準の Group by ステ...