JavaScriptのcall、apply、bindの使い方を比較分析_基礎知識

call、apply、bind の 3 つの関数の使い方については、JavaScript という言語を学習する上で避けては通れない知識ポイントです。以下に、3 つのそれぞれの使用法と一般的なアプリケーション シナリオをまとめます。

まず、呼び出し関数を見てください。これは「借りる」と「要求する」という意味で理解できます。次のシナリオを想像してください。あなたは一人で外を歩き回っていて、何か緊急のことが起こったら家に電話したいと思っていますが、残念ながら携帯電話の料金が支払われていないか、バッテリーが切れているか、罠にはまっています。あなたの電話は使用できません。ただし、この電話は自分で行う必要があるので、友人の携帯電話や近所の携帯電話、公衆電話などを借りて電話をかけることができます。誰の電話に電話をかけたかは関係ありません。いずれにせよ、効果は自分の携帯電話から電話をかけるのと同じです。呼び出し関数の本来の目的はこれに似ています。以下では、そのアプリケーション シナリオをシミュレートするコードを使用します。

コードをコピーします コードは次のとおりです:

var frog = {
名前 : 'カエル'、
言う: function(){
アラート(this.name);
}
}
var ウサギ = {
名前：「うさぎ」
}
frog.say.call(rubbit) // ウサギ

ラビットは口がきけない存在ですが、自分の能力ではそれを達成することはできません。幸いなことに、カエルは話すことができます。そこでラビットはカエルにこの願いを叶えてほしいとお願いしました。 frog.say.call() の最初のパラメータには、弁護士が依頼者に電話をかけることを好む依頼者を入力する必要があります。ここでは、rubit がカエルにその名前を言うように求めているので、rubit を入力します。このようにすると、カエルの名前ではなく、ルビットの名前が検索されます。ここにカエルを入れたらどうなるでしょうか？これは、自分に塩を与えても大丈夫だと自分に求めるようなものです。試してみることができます:

コードをコピーします コードは次のとおりです:

var frog = {
名前 : 'カエル'、
言う: function(){
アラート(this.name);
}
}
var ウサギ = {
名前：「うさぎ」
}
frog.say.call(frog) // カエル

塩の袋を自分に食べさせながら、あなたは自分の名前を言ったに違いありません。まったく驚くべきことではありません。 call の古典的な使用法を見てみましょう:

コードをコピーします コードは次のとおりです:

//パラメータを実数の配列オブジェクトに変換します
関数カエル(){
var arr = [].slice.call(引数);
console.log(arguments.slice,arr.slice)
// 未定義関数slice() { [ネイティブコード] }
}
カエル(1,2,3,4)

このような呼び出しの後、引数オブジェクトを配列オブジェクトとして使用できます。 jquery のソース コードを開くと、さまざまな用途が簡単に見つかります。ここではすべてを列挙しませんが、前のシーンに戻りましょう。電話をかけた後は、必ず何かを持ち帰ってください。何年もお年寄りにきちんとした敬意を払っていないので、また行って地元の名物を買うのは間違いなく素晴らしいでしょう。しかし、外での生活はプレッシャーが大きく、毎日残業をしなければならず、休暇を申請すると給料が差し引かれるだけでなく、交通費も多額にかかります。総額はおそらく高齢者が1年間自宅で過ごすのに十分な金額だ。それを考えると費用対効果が低いので、この機能に電話して助けを求めることを考えました。しかも、手数料はかかりません。数量と重量に制限がありますので、お好きなだけお持ちいただけます。コードでもう一度デモしてみましょう:

コードをコピー コードは次のとおりです:

var frog = {
名前 : 'カエル'、
送信: function(お金、食べ物、牛乳、スアゲート){
アラート(お金、食べ物、牛乳、砂糖);
}
}
var ウサギ = {
名前：「うさぎ」
}
frog.send.call(rubbit,'money','food','milk','suagate')

お金と意志があれば、iPhone6 plus などを数台送り返すこともできます。 .^_^.

この時点で電話はもうすぐ終わります。上記のメロドラマを見て、あなたがホームシックを引き起こしただけなら、申し訳ありません。

call には apply という兄弟もあります。call の使い方を理解していれば、apply は実際には同じものです。唯一の違いは、apply は物を渡すのが非常に面倒に見えることです。環境に優しい。そのため、物を入れるための大きな箱が用意されており、転送したい物をすべてその箱に入れるだけです。この大きな箱が配列です。上記の例を適用すると、次のようになります:

コードをコピーします コードは次のとおりです:

var frog = {
名前 : 'カエル'、
送信: function(お金、食べ物、牛乳、スアゲート){
アラート(お金、食べ物、牛乳、砂糖);
}
}
var ウサギ = {
名前：「うさぎ」
}
//パラメータの違いに注意してください
frog.send.apply(rubbit,['money','food','milk','suagate'])

上記は、applyとcallの過去と現在の生活です。しかし彼らは、アプライ・アンド・コールの父親が数年前に不動産で富を築き、さらに外にバインドという名前の隠し子もいたとは予想していなかった。彼は2人の兄弟より数年遅れてデビューしましたが、彼の能力を過小評価してはなりません。ただし、一部の場所では彼の身元が認識されていません。 IE6など。以下では、コードを使用して彼のスキルを示します:

コードをコピーします コードは次のとおりです:

var name = 'rubbit';
var frog = {
名前 : 'カエル'、
言う: function(){
setTimeout(function(money,milk){
アラート(this.nameマネーミルク)
}.bind(this,'money','milk'),1000)
}
}
frog.say();

比較により、bind は function(){} の直後に使用できることがわかりました。これは、call と apply を省略し、関数の直後に渡されるクライアントとパラメーターを指定することと同じです。パラメータを渡すスタイルという点では、call に似ています。

バインドに関して、古典的な使用法を見てみましょう:

コードをコピーします コードは次のとおりです:

var obj = {
名前 : 'カエル'
}
document.addEventListener('click',function(){
alert(this.name) // カエル
; }.bind(obj),false);

要約すると、これら 3 人の兄弟、apply、call、bind の類似点は次のとおりです。

1. 最初のパラメータはバインドされたスコープ、つまり作業が行われる領域です。

2. パラメータを渡すことができます

違いは次のとおりです:

apply、call の互換性が向上し、bind は一部の下位バージョンのブラウザではサポートされません。

apply で渡されるパラメータは配列でラップする必要がありますが、call と binding では渡されるパラメータを 1 つずつリストします。

この記事が役に立てば幸いです。call、apply、bind の 3 つの関数の使用法をより深く理解できましたか?