ホームページ > 記事 > ウェブフロントエンド > JavaScriptのコールバック関数の詳細な分析
JavaScriptのコールバック関数の詳細な分析
- WBOY転載
- 2022-11-23 16:42:302859ブラウズ
この記事では、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.4. コールバック関数はなぜ使用されるのですか?非常に重要な理由があります -
<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>
JavaScript はイベント駆動型言語
これは、JavaScript は応答を待っているため現在の操作を停止せず、他の続行実行をリッスンすることを意味します
イベントが発生したとき 基本的な例を見てみましょう: <script>
function first() {
console.log(1);
}
function second() {
console.log(2);
}
first();
second();
</script>
分析: ご想像のとおり、first 関数が最初に実行され、次に second が実行されます。実行 - コンソール出力: 1 2しかし、関数 first にすぐに実行できないコード
setTimeout を使用します。 API リクエストをシミュレートするために関数を 500 ミリ秒遅延させます。新しいコードは次のようになります: <pre class="brush:php;toolbar:false"> <script>
function first() {
// 模拟代码延迟
setTimeout(function () { //所以function(){console.log(1)}是回调函数
console.log(1);
}, 500);
}
function second() {
console.log(2);
}
first();
second();
</script></pre> 分析: ここでは、 function(){console.log(1)} 関数がパラメーターとしてsetTimeout 関数。setTimeout は公式関数であり、多くの複雑なビジネス プログラムが含まれているため、関数 function(){console.log(1)} が渡された後、すぐには実行されない可能性があります。setTimeout を実行するには、それを実行する必要があります。 to function(){console. function パラメーターは log(1)} の場合にのみ実行されます。つまり、プログラム全体が setTimeout が実行されるのを待つだけという意味ですか?いいえ！ ！ ！
プログラム全体の実行結果は、元の 1 2 ではなく 2 1 です。 最初に first() 関数を呼び出したとしても、記録した出力結果は ## にあります。関数の後の #秒( )。
JavaScript が実行を続行するまで待機していないという問題です second() first( ) は の質問に答えます。 コールバックは、あるコードが実行される前に別のコードが実行されることを保証する方法です。
コールバック関数と非同期操作の間には何の関係もありません定義: コールバック 関数は 高レベル関数 とみなされ、パラメーター として渡されます。 別の関数の高レベル関数。コールバック関数の本質はパターン (一般的な問題を解決するためのパターン) であるため、コールバック関数は コールバック パターン とも呼ばれます。
つまり、関数は別の関数内で呼び出されます。また、他の関数にパラメータとして渡すこともできます。つまり:
! ！ ！ では、なぜ多くの非同期操作にバックフィル関数があるのでしょうか? ?
Q: あなたが知っている非同期操作はコールバックの機能ですか? ? ?あまり。
コールバック: ビジネス ロジックの一種として理解できます。非同期プログラミング: JS コードの実行シーケンス。
簡単な理解:
コールバックは、名前が示すように、次のことを意味します。例 1: テイクアウトを注文しましたが、たまたま食べたかった食べ物がなくなっていたため、店のオーナーに電話番号を残しました。数日後、店はそれを受け取りましたと店員さんがあなたの番号に電話して、あなたは電話を受けて店に走って買いに行きました。この例では、あなたの電話番号をコールバック関数と呼びます。店員に電話番号を残す場合、登録コールバック関数と呼ばれます。後で店舗に商品が入荷したとき、コールバックに関連付けられたイベントと呼ばれます。店員から電話がかかることをコールバック関数といい、商品を取りに店舗に行くとき、コールバックイベントに応答することをコールバック関数といいます。
例 2: 別の例として、axios リクエストを送信すると、リクエストが成功すると成功コールバック関数がトリガーされ、リクエストが失敗すると失敗コールバック関数がトリガーされます。ここでのコールバック関数はツールに似ており、バックグラウンドでこのツールを使用して、成功したか失敗したかを通知します。
ここでのすべての非同期操作はコールバックとは何の関係もありません。実際の非同期操作は then メソッドです。[関連する推奨事項:
JavaScript ビデオ チュートリアル、Web フロントエンド ]
以上がJavaScriptのコールバック関数の詳細な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。