JSでコードの実行順序を操作する方法

今回は、JSでコードの実行順序を操作する方法と、JSのコード実行順序の注意点について説明します。以下は実践的なケースですので、見てみましょう。

1. js--->シングルスレッド

厳密に言えば、javascriptには複数のスレッドという概念はなく、全てのプログラムは単一のスレッドによって順次実行されます。

1. シングルスレッドとは何ですか?

より簡単に言うと、コードの実行中に別のコードを実行したい場合は、現在のコードの実行が完了するまで待たなければなりません。コードの一部を取り上げて説明しましょう

 for(var i=1;i<=3;i++){
   setTimeout(function(){
     console.log(i); //输出：4,4,4
   },0)
 }

上記のコードを見てみましょう。遅延時間が 0 に設定されているため、ループは 1 回実行され、i がすぐに出力されるはずですが、最終的な出力結果は 4, 4, 4 になります。上記の結果が発生する理由は、まさに js コードがシングルスレッド アプリケーションであるためです。

実行プロセス中に、最初に for ループ が発生し、for ループが最初にスレッドに入ります。 i=1 の場合、ループが setTimeOut に達した後、for ループの実行はまだ完了していないため、setTimeOut は実行を待機する場所 (スレッド プール) に置かれます。この時点で、for ループは実行を続けます。i=2 の場合、この時点では setTimeOut は実行を待機しているスレッド プールに置かれます。 for ループが 3 回完了すると、for ループの実行が完了すると、スレッド プールで実行を待機している setTimeOut が実行され、i が 4 になります。 , したがって、4 が 3 つ出力されます。

2. 上記の状況を変更したい場合は、次のコードを使用できます

//将var变为let
for(let i=1; i<=3; i++){
  setTimeOut(function(){
    console.log(i); //输出的结果为1，2，3
  },0);
}
//用自执行函数进行包裹
for(var i=1; i<=3; i++){
  !function(i){
    setTimeOut(function(){
      console.log(i); //输出的结果为1，2，3
    },0);
  }(i)
}

2. 関数スコープとjsでのコード実行

>>>関数スコープ

まず次の概念を理解しましょう:

1. js言語にはc言語のようなブロックレベルのスコープがありません。

2. js言語の最上位スコープはウィンドウオブジェクトのスコープ内にあり、これをグローバルスコープと呼びます グローバルスコープ内で宣言された変数がグローバル変数です。

3. js 関数のスコープ内の変数は関数内でのみ使用でき、関数外では使用できません。

4. JS 関数は入れ子にすることができます。複数の関数の入れ子は、スコープの階層ごとの入れ子を構成します。これは、JS ではスコープ チェーンと呼ばれます。

5. JSスコープチェーン変数アクセスルール：

(1) アクセス対象の変数がカレントスコープ内に存在する場合、カレントスコープ内の変数が使用されます。

(2) アクセス対象の変数が現在のスコープに存在しない場合は、グローバルスコープまでの上位スコープで検索されます。

>>>実行命令

JS コードの実行は 2 つの部分に分かれています:

1. コードのチェックとロードのフェーズ (プリコンパイルのフェーズ) このフェーズでは、変数と関数が宣言されますが、変数のデフォルト値は未定義です。

2. コードの実行フェーズ このフェーズでは、変数に値が代入され、関数が宣言されます。

上記の具体的な概念をいくつか見た後、コードの一部を取り上げて説明しましょう:

var a=1; //声明了一个全局变量
function func(){
  console.log(a); //输出：undefined。打印a，而在func这个作用域中已经声明了a变量，按照js的执行顺序，此时的a并未被赋值。
  var a=1;
  console.log(a); //输出：1。
}
func();

上記のコードを見てください。最初の a は unknown を出力します。理由：jsスコープチェーンのアクセスルールにより、アクセス対象の変数aはカレントスコープに存在するため、カレントスコープの変数が使用されます。 jsコードの実行順序により、この時点ではaは宣言されているだけで代入されていないため、デフォルトではunknownが出力されます。

そして2番目のaは1を出​​力します。このときaは宣言されて値が代入されているからこそ、aは1を出​​力します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

vue.js を使用した書籍管理プラットフォームの構築に関する技術的な回答

vue.jsの共通手順の概要と概要

JSボタンの無効化と有効化の詳細な説明

以上がJSでコードの実行順序を操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。