コールバック関数の次のコードに出くわしました。コードは理解できましたが、頭を包むことができません。直感に反しているようです。
function greet(name,callback1){
callback1(name)
}
greet("John Cena", function (somerandomName) {
console.log(somerandomName);
return someRandomName;
}); // Output is John Cena and undefined.
これは私がコードから理解したことです:
greet
2つのパラメータname
とをとる関数を定義しますcallback1
。次に、callback1のパラメーターはnameであると言います。greet
関数に何も返さないのはなぜですか?
そして、greet
関数を呼び出すときに、2番目のパラメーターをパラメーターがsomeRandomName
。である無名関数として渡します。次に、console.log(someRandomName)
。戻り値someRandomNameを追加しましたが、この戻り値が機能せず、印刷されたステートメントの後に未定義が続きました
誰かがこれを簡単な言葉で説明してもらえますか、これはとても直感に反しているようです。
したがって、関数自体がパラメーターになる可能性があることを理解することが重要だと思います。
この例では、最初のパラメーターとして文字列を渡し、次にその文字列を2番目のパラメーターとしてパラメーターとして受け取る関数を渡します。
関数は必ずしも何かを返す必要はありません。多くの場合、関数はdomの操作を実行したり、データをフェッチしたり、何かを構成したり、既存の変数を変更したりする場合があります。もちろん、それが必要な場合は、何かを返すことができます。
あなたがしたようにリターンを追加することはあまり効果がありません。実際に名前の値を返すには、このように元の関数を作成する必要があります。
function greet(name,callback1){
return callback1(name)
}
その後、あなたはこのようなことをすることができます
var wrestler = greet("John Cena", function (somerandomName) {
console.log(somerandomName);
return somerandomName;
});
console.log(wrestler) // prints John Cena
それは本当の目的を果たさないので、その一種の奇妙な例です。このようなものは、何が起こっているのかを確認するのに役立つかもしれません。
function greet(name, callback) {
callback(name)
}
greet('John Cena', function(name){
console.log('Hello ' + name) // prints Hello John Cena
})
OR return something and use it to manipulate dom
function greet(name, callback) {
return callback(name)
}
var greeting = greet('John Cena', function(name){
return 'Hello ' + name
})
document.getElementById('message').innerHTML = greeting
// somewhere in HTML...
<h1 id='message'></h1>
いずれにせよ、少なくとも現在、最初のパラメーターに対して何かを行っています。そして、コールバックでできることは無限です。
コールバックはjavascriptの基本的な機能です。これらは、APIやデータベースの呼び出しなど、関数の最初の部分が非同期である場合に多く機能します。この場合、最初の部分はデータベースへの呼び出しであり、最初の呼び出しから値が取得されるまでコールバックは発生しません。最近、このコールバックパターンは、Promisesのためにあまり使用されていませんが、コールバックは依然として有用です。
したがって、フロントエンドからバックエンドへの一般的なAPI呼び出しの例。これは通常、Fetch Apiを使用するか、RequestやAxiosなどのライブラリを使用して実行されます。エンドポイントを呼び出す最初の関数は、実行してデータを取得するのにある程度の時間がかかることを覚えておいてください。そのデータが返されるまで、コールバックは起動しません。もちろん、エラーまたはデータのいずれかをコールバックに送り返す関数がバックエンドにあります。私は物事を過度に複雑にしたくはありません。むしろ、コールバックがよく使用されるものについてのアイデアを与えるだけです。
function getDataFromBackend(endPoint, callback) {
callback(error, data)
}
getDataFromBackend('/api/user', function(error, data) {
if (error) {
// handle error - show user error message in ui, etc
}
// do something with data - such as display welcome message to user, etc
})
練習のためにコールバックを使用することをお勧めします。Nodeを使用する場合、またはフロントエンドとバックエンドを使用してアプリを構築する場合、非同期通信が多数発生するため、コールバックを多く実装していることがわかりました。私があなたの質問に答えたことを望みます。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加