JavaScriptのコールバック関数の詳細な分析

この記事では、JavaScript に関する関連知識を提供します。主に、コールバック関数とは何か、コールバック関数の特性とは何か、コールバック内のこれなど、コールバック関数の関連内容を紹介します。 function 問題を指摘してみましょう。皆さんのお役に立てれば幸いです。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

1. とはコールバック関数（コールバック）？

関数をパラメータとして別の関数に渡します。この関数を使用する必要がある場合は、この関数をコールバックして run() してください。

コールバック関数は実行可能なコード セグメントです。 パラメータ として他のコードに渡され、その機能は、必要に応じて この (コールバック関数) コードの呼び出しを容易にすることです。 (パラメータとして別の関数に渡されます。パラメータとしての関数はコールバック関数です)

理解: 関数はパラメータとして別の関数に渡すことができます。

    <script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            callback(sum);
        }

        function print(num) {
            console.log(num);
        }

        add(1, 2, print); //3
    </script>

分析: add(1, 2, print); では、関数 print がパラメーターとして add 関数に渡されますが、すぐには機能しませんが、これを実行すると var sum = num1 num2; になります。関数は、合計を出力する必要がある場合にのみ呼び出されます。 (これは別の関数にパラメータとして渡され、パラメータとしての関数がコールバック関数です。

匿名コールバック関数:

    <script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            callback(sum);
        }

        add(1, 2, function (sum) {
            console.log(sum); //=>3
        });
    </script>

2. コールバック関数の特徴は何ですか?

1. すぐには実行されません

コールバック関数がパラメータとして関数に渡される場合、

関数の定義のみが渡され、すぐには実行されません. 通常の関数と同様に、コールバック関数も、実行される前に呼び出し関数の数だけ () 演算子を介して呼び出す必要があります。 ##2. コールバック関数はクロージャです コールバック 関数はクロージャであり、外部定義された変数にアクセスできることを意味します。

3. 実行前の型判定

コールバック関数を実行する前に、それが関数であることを確認するのが最善です。

    <script>
        function add(num1, num2, callback) {
            var sum = num1 + num2;
            //判定callback接收到的数据是一个函数
            if (typeof callback === 'function') {
                //callback是一个函数，才能当回调函数使用
                callback(sum);
            }
        }
    </script>

3. コールバック関数におけるこれの指摘する問題

コールバック関数が呼び出されるときに注意してください。 、この実行コンテキストは、コールバック関数が定義されたときのコンテキストではなく、呼び出されたときの関数が配置されているコンテキストです。

例:

    <script>
        function createData(callback){
            callback();
        }
        var obj ={
            data:100,
            tool:function(){
                createData(function(n){
                    console.log(this,1111);  //window 1111
                })   
            }
        }
        obj.tool();
    </script>

分析: これは、 に最も近い関数/メソッドの呼び出し元、またはネスト レベル にある関数/メソッドの呼び出し元を指します。ここで最も近い関数は

function(n) であり、これは以下に戻ります。上記の callback() このとき呼び出し元は obj ではなく window です

このコールバック関数を解く ポインティングメソッド 1: アロー関数

コールバック関数 (

コールバック関数が通常の関数の場合

) パラメータを別の関数に渡す場合、内部でコールバック関数を呼び出す方法が分からないと、コールバック関数内の this が不明瞭になるという問題が発生します (例えば、上記の例では、obj ではなく window を指しているため、コールバック関数として

アロー関数を使用し、別のパラメータをパラメータとして渡します。 function

.

    <script>
        function createData(callback){
            callback();
        }
        var obj ={
            data:100,
            tool:function(){
                createData((n)=>{
                    this.data = n;
                })   
            }
        }
        obj.tool();
        console.log(obj.data); 
    </script>

分析: コールバック関数がアロー関数で記述された後、このポインティングは、コールバック関数またはネスト レベルに最も近いものであることが非常に明確になります。 関数/メソッドの呼び出し元, so here is obj. これが指すコールバック関数を解決する方法 2: var self = this;

    <script>
        function createData(callback){
            callback(999);
        }
        var obj ={
            data:100,
            tool:function(){
                var self = this;   //这里的this指向obj，然后当一个变量取用
                createData(function(n){
                    self.data = n;
                })   
            }
        }
        obj.tool();
        console.log(obj.data);
    </script>

4. コールバック関数はなぜ使用されるのですか?

非常に重要な理由があります -

JavaScript はイベント駆動型言語

これは、

JavaScript は応答を待っているため現在の操作を停止せず、他の続行実行をリッスンすることを意味します

イベントが発生したとき 基本的な例を見てみましょう:

    <script>
        function first() {
            console.log(1);
        }

        function second() {
            console.log(2);
        }

        first();
        second();
    </script>

分析: ご想像のとおり、first 関数が最初に実行され、次に second が実行されます。実行 - コンソール出力: 1 2

しかし、関数 first にすぐに実行できないコード

が含まれている場合はどうなるのでしょうか?たとえば、リクエストを送信してから応答を待つ必要がある API リクエストですか?この状況をシミュレートするには、一定期間後に関数を呼び出す JavaScript 関数である

setTimeout を使用します。 API リクエストをシミュレートするために関数を 500 ミリ秒遅延させます。新しいコードは次のようになります: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">    &lt;script&gt;         function first() {             // 模拟代码延迟             setTimeout(function () {  //所以function(){console.log(1)}是回调函数                 console.log(1);             }, 500);         }         function second() {             console.log(2);         }         first();         second();     &lt;/script&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> 分析: ここでは、 function(){console.log(1)} 関数がパラメーターとしてsetTimeout 関数。setTimeout は公式関数であり、多くの複雑なビジネス プログラムが含まれているため、関数 function(){console.log(1)} が渡された後、すぐには実行されない可能性があります。setTimeout を実行するには、それを実行する必要があります。 to function(){console. function パラメーターは log(1)} の場合にのみ実行されます。つまり、プログラム全体が setTimeout が実行されるのを待つだけという意味ですか?いいえ！ ！ ！

プログラム全体の実行結果は、元の 1 2 ではなく 2 1 です。 最初に first() 関数を呼び出したとしても、記録した出力結果は ## にあります。関数の後の #秒( )。

これは、JavaScript が必要な順序で関数を実行しないという問題ではなく、

JavaScript が実行を続行するまで待機していないという問題です second() first( ) は の質問に答えます。 コールバックは、あるコードが実行される前に別のコードが実行されることを保証する方法です。

5. コールバック関数と非同期操作との関係は何ですか?コールバック関数は非同期ですか?

定義: コールバック 関数は 高レベル関数 とみなされ、パラメーター として渡されます。 別の関数の高レベル関数。コールバック関数の本質はパターン (一般的な問題を解決するためのパターン) であるため、コールバック関数は コールバック パターン とも呼ばれます。

つまり、関数は別の関数内で呼び出されます。また、他の関数にパラメータとして渡すこともできます。

つまり:

コールバック関数と非同期操作の間には何の関係もありません

! ！ ！ では、なぜ多くの非同期操作にバックフィル関数があるのでしょうか? ?

Q: あなたが知っている非同期操作はコールバックの機能ですか? ? ?あまり。

コールバック: ビジネス ロジックの一種として理解できます。非同期プログラミング: JS コードの実行シーケンス。

簡単な理解:

コールバックは、名前が示すように、次のことを意味します。

例 1: テイクアウトを注文しましたが、たまたま食べたかった食べ物がなくなっていたため、店のオーナーに電話番号を残しました。数日後、店はそれを受け取りましたと店員さんがあなたの番号に電話して、あなたは電話を受けて店に走って買いに行きました。この例では、あなたの電話番号をコールバック関数と呼びます。店員に電話番号を残す場合、登録コールバック関数と呼ばれます。後で店舗に商品が入荷したとき、コールバックに関連付けられたイベントと呼ばれます。店員から電話がかかることをコールバック関数といい、商品を取りに店舗に行くとき、コールバックイベントに応答することをコールバック関数といいます。

例 2: 別の例として、axios リクエストを送信すると、リクエストが成功すると成功コールバック関数がトリガーされ、リクエストが失敗すると失敗コールバック関数がトリガーされます。ここでのコールバック関数はツールに似ており、バックグラウンドでこのツールを使用して、成功したか失敗したかを通知します。

ここでのすべての非同期操作はコールバックとは何の関係もありません。実際の非同期操作は then メソッドです。

[関連する推奨事項:

JavaScript ビデオ チュートリアル

、Web フロントエンド ]

以上がJavaScriptのコールバック関数の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。