3つの関数の使用コール、適用、およびバインドは、JavaScriptの言語を学習しても克服できない知識ポイントです。それらの3つの使用と共通のアプリケーションシナリオを要約しましょう。
まず、「借用」および「リクエスト」として理解できるコール関数を見てください。次のシナリオを想像してみてください。あなたは一人でさまよい、緊急の問題がある場合は家に電話をかけたいと思っていますが、残念ながら、携帯電話は未払い、またはパワーが崩れているか、ピットに落ちます。要するに、あなたの携帯電話は機能していません。ただし、この電話をかける必要があるため、友人の携帯電話、隣人の携帯電話、または公共電話を借りることができます。このようにして、電話を利用できなくても通話を完了することができます。あなたが使用する電話に関しては、それは問題ではありません。とにかく、それはあなた自身の電話で電話をかけることと同じ効果です。コール関数の元の意図もこれに似ています。コードを使用してアプリケーションシナリオをシミュレートします。
var frog = {name: 'frog'、ea:function(){alert(this.name); }} var rabbit = {name: 'rabbit'} frog.say.call(rubbit)// rabbitRubbitは愚かなオブジェクトですが、彼が彼の名前を言いたいなら、彼自身の能力でそれを達成することは不可能です。幸いなことに、それはカエルという名前の良い友達がいて、それは話すことができます。それで、ルビットはカエルにこの願いを悟るように頼みました。 Frog.say.call()の最初のパラメーターは、リクエストを発行した人に記入する必要があり、弁護士はそれをクライアントと呼ぶのが好きです。これがラビットリクエストカエルの名前を言っているので、ルビットを埋めてください。このようにして、言うとき、カエル名の代わりにルビット名が検索されます。ここでカエルを埋めたらどうなるでしょうか?それは自分自身に何かをするように頼み、自分に塩を与えるようなものです。あなたはそれを試すことができます:
var frog = {name: 'frog'、ea:function(){alert(this.name); }} var rabbit = {name: 'rabbit'} frog.say.call(frog)// frog自分に塩の袋を養うことはあなたの名前でなければなりません、そしてそれは予想外のことではありません。通話の古典的な使用法を見てみましょう。
//パラメーターを実際の配列オブジェクト関数に変換するfrog(){var arr = [] .slice.call(arguments); console.log(arguments.slice、arr.slice)//非定義関数Slice(){[ネイティブコード]}}カエル(1,2,3,4)この呼び出しの後、引数オブジェクトを配列オブジェクトとして使用できます。通話を使用する方法はたくさんあります。 jQueryのソースコードを開くと、それを使用する多くの場所を簡単に見つけることができます。ここにすべてリストしませんが、私たちの前にシーンに戻ります。電話を借りるのは簡単すぎます。電話をかけた後、私は間違いなく何かを取り戻したいと思います。結局のところ、私は長年さまよっていて、高齢者にとっては親切ではなく、地元の専門分野を買って戻ってきました。それは間違いなく素晴らしいです。しかし、外の生活のプレッシャーは非常に大きいため、仕事に加えて毎日残業があります。休暇をとると、給与が控除されるだけでなく、多くの旅費を費やす必要があります。このお金の合計は、おそらく高齢者が家で1年を過ごすのに十分です。それについて考えるのは費用対効果がなかったので、コール機能についてもう一度考えました。助けを求めて、ちなみにそれを取り戻すことは非常に賢明な選択であり、充電せず、量を制限せず、体重を制限せず、あなたが持っているだけをもたらすことができます。コードを使用して再度実証します。
var frog = {name: 'frog'、send:function(money、food、milk、suagate){alert(money+food+milk+suagate); }} var rabbit = {name: 'rabbit'} frog.send.call(rubbit、 'money'、 'food'、 'milk'、 'suagate'))あなたが金持ちで故意であれば、いくつかのiPhone6 Plusまたは何かを返すこともできます。 。^_^。
これについて言えば、電話はもうすぐ終わりました。上記のシーンドラマがあなたに電話が何であるかを理解させるかどうかはわかりません。それがあなたのホームシックを喚起するだけなら、ごめんなさい。
コールには、Applyと呼ばれる半兄弟もあります。通話の使用法を理解している場合、適用は実際に同じものです。唯一の違いは、適用が物事を伝えたくない場合、1つのものをバッグに入れるのは非常に厄介であり、環境に優しいものではないことです。そこで彼は物事のために大きな箱を提供し、それが提供した箱に渡したいものをすべて入れました。この大きな箱は配列です。上記の例がapplyで行われた場合、それは次のようです。
var frog = {name: 'frog'、send:function(money、food、milk、suagate){alert(money+food+milk+suagate); }} var rabbit = {name: 'rabbit'} //パラメーターの違いに注意してくださいfrog.send.apply(rubbit、['money'、 'food'、 'milk'、 'suagate'])))上記は、応募の過去と現在の生活です。しかし、予想外に、応募とコールの父親は数年前に不動産で財産を作りました。彼の2人の兄弟が電話をかけて数年後にデビューしましたが、彼らの能力は過小評価されるべきではありません。しかし、彼のアイデンティティはいくつかの場所では認識されていません。たとえば、IE6。次に、コードを使用して彼のスキルを示します。
var name = 'rubbit'; var frog = {name: 'frog'、ea:function(){setimeout(function(money、milk){alert(this.name+money+milk)} .bind(this、 'money'、 'milk')、1000)}} fulog.say();比較を通じて、bindをfunction(){}に直接接続できることがわかりました。これは、コールを保存して適用し、関数後に渡されるプリンシパルとパラメーターを直接指定することと同等です。シグマを通過するスタイルに関しては、それはより電話のようなものです。
バインドについては、別の古典的な使用法を見てみましょう。
var obj = {name: 'frog'} document.addeventlistener( 'click'、function(){alert(this.name); // frog} .bind(obj)、false);これら3人の兄弟の類似性は次のとおりです。
1.最初のパラメーターは政府の範囲です。つまり、その領土は仕事です。
2.すべてのパラメーターを渡すことができます
違いは次のとおりです。
適用、通話の互換性が向上し、ブラウザのいくつかの低いバージョンがサポートされていません。
Applyで渡されたパラメーターは配列にラップする必要がありますが、コールとバインドは1つずつリストされています。
3つの関数呼び出し、適用、および結合の使用について、より深く理解しましたか?この記事があなたに役立つことを願っています。