jsのコールバック関数を徹底分析(詳細解説共有)

奋力向前
リリース: 2021-09-17 10:53:09
転載
2221 人が閲覧しました

前回の記事「 jsのthisポインティング問題を解説した記事(コード付き) 」では、jsのthisポインティング問題について紹介しました。次の記事では、js のコールバック関数について詳しく説明します。ぜひご覧ください。

jsのコールバック関数を徹底分析(詳細解説共有)

JS コールバック関数の詳しい説明

JS コールバック関数

コールバック関数とは, 公式説明: プログラムの実行中、通常の状況では、アプリケーション プログラムは API を介してライブラリ内に事前に用意された関数を呼び出すことがよくあります。ただし、一部のライブラリ関数では、ターゲット タスクを完了する適切なタイミングで呼び出すことができるように、最初にアプリケーションに関数を渡す必要があります。渡されて後で呼び出される関数は、コールバック関数と呼ばれます。

通常は、関数 B を別の関数 A に渡し、必要に応じて関数 A を呼び出します。

端的に言うと、コールバックはバックトラックです。まず使用する関数本体を定義し、使用後にこの関数を呼び出します。通常、最初に定義した関数に callback をパラメータとして渡します。 関数。まず jquery コードの一部を見てみましょう:

$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
ログイン後にコピー

上記の jquery はコールバック関数です。まず、hide エフェクトを実行した後、関数 コールバック。

コールバック関数がどのように実装されているかを確認するために、もう一度 JS コードを見てみましょう:

function Buy(name,goods1,callback) {
    alert(name+' buy '+goods1);
    if(callback&&typeof(callback)==="function")
        callback();
}
Buy('xiaoming','apple',function(){
    alert("shopping finish");
});
ログイン後にコピー

非常に単純なコードです。最初は何を買いたいのかわかりません。何かを買うときは、すぐに前のものを入れます。 定義された関数が呼び出されたときは、前提として callback が関数である必要があるため、判定ルールを追加するのが最善です。出力結果は次のとおりです。

xiaoming buy apple
shopping finish
ログイン後にコピー

クロージャーとコールバック

クロージャーの質問を見てみましょう。最初と 4 番目のノードをそれぞれクリックします。実行結果は次のとおりです:

var nodes = document.getElementsByTagName('button');
for (var i = 0; i < nodes.length; i++) {
    nodes[i].addEventListener(&#39;click&#39;, function() {
        console.log(&#39;You clicked element #&#39; + i);
   });
}
ログイン後にコピー

ここでのメイン テストはクロージャです。addEventListener はクロージャ、匿名関数はコールバック関数です。i はクロージャ内の変数です。 addEventListener のコールバックが実行されるとループが終了し、このとき変数 i には値 node.lengthnode.length が代入されます。ノードの総数です。したがって、結果は

You clicked element # node.length
ログイン後にコピー

になります。変更方法は、i 変数の値が解放されるため、その戻り値を関数に変更します。次に、i を導入します。各ループの値 すべてをメモリに保存するだけです:

var nodes = document.getElementsByTagName(&#39;button&#39;);
for (var i = 0; i < nodes.length; i++) {
(function(i) {
    nodes[i].addEventListener(&#39;click&#39;, function () {
        console.log(&#39;You clicked element #&#39; + i);
        })
       })(i);
}
ログイン後にコピー

PHP コールバック関数

PHP でコールバック関数を実装する方法について簡単に説明します (結果は 1、2、3、4 になります) ):

<?php
    $array=array(1,2,3,4);
    array_walk($array,function($value){
        echo $value;});
?>
ログイン後にコピー

php は、受信する配列要素ごとにコールバック処理を実行します。PHP のクロージャーを見てみましょう。スコープ外の変数を継承するには、use キーワードを使用します:

<?php
    function getcouter(){
        $i=0
        return function() use($i)(
            echo $i;
        )};
    }
    $counter=getcounter();
    echo $counter();
    echo $counter();
?>
ログイン後にコピー

返される結果は次のとおりです:

1,1
ログイン後にコピー

公式の PHP 使用方法

class hello {
function callback($a,$b) {
echo "$a,$b";
}
static function callback($c,$d){
echo "$c,$d";        
}
}
//将类名作为参数
call_user_func(array(&#39;hello&#39;,&#39;callback&#39;),"hello","world");
//输出 hello,world
//将对象作为参数
call_user_func(array(new hello(),&#39;callback&#39;),"hello","world");
//将静态方法作为参数
call_user_func(hello::callback,"hello","world");
//输出 hello,world
ログイン後にコピー

実際、JS と PHP は原理的には似ており、どちらも最初に関数を定義し、必要に応じて呼び出します。

推奨学習: JS ビデオ チュートリアル

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

関連ラベル:
js
ソース:juejin.im
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート