ホームページ > ウェブフロントエンド > jsチュートリアル > Javascript の call、apply、bind メソッド間のソースと連絡先の違いを例とともに詳しく説明します。

Javascript の call、apply、bind メソッド間のソースと連絡先の違いを例とともに詳しく説明します。

伊谢尔伦
リリース: 2017-07-20 14:04:43
オリジナル
1533 人が閲覧しました

call/apply/bind メソッドの由来

まず、call、apply、bind メソッドを使用する場合、これら 3 つのメソッドがどこから来たのかを知る必要があります。なぜこれら 3 つの方法が使用できるのでしょうか?

call、apply、bind の 3 つのメソッドは、実際には Function.prototype から継承され、インスタンス メソッドです。


 console.log(Function.prototype.hasOwnProperty('call')) //true
 console.log(Function.prototype.hasOwnProperty('apply')) //true
 console.log(Function.prototype.hasOwnProperty('bind')) //true
ログイン後にコピー

上記のコードでは true が返され、3 つのメソッドが Function.prototype から継承されていることを示します。もちろん、通常のオブジェクト、関数、配列はすべて Function.prototype オブジェクトの 3 つのメソッドを継承しているため、これら 3 つのメソッドはオブジェクト、配列、関数で使用できます。

コールバック関数にバインドされたオブジェクト

このオブジェクトがコールバック関数で使用される場合、このオブジェクトはボタン オブジェクトである DOM オブジェクトを指します。コールバック関数でこのポインティングの問題を解決したい場合は、次の方法を使用できます。


var o = {
 f: function() {
 console.log(this === o);
 }
 }
 $('#button').on('click', function() {
 o.f.apply(o);
 //或者 o.f.call(o);
 //或者 o.f.bind(o)();
 });
ログイン後にコピー

ボタンをクリックすると、コンソールに true と表示されます。 apply メソッド (または call メソッド) は、関数が実行されるオブジェクトをバインドするだけでなく、関数をすぐに実行するため (bind メソッドはすぐに実行されませんが、違いに注意してください)、バインディング ステートメントは次のように記述する必要があります。関数本体。

call、apply、bindメソッドの接続と違い

実際、これら3つのメソッドは関数内でthisポインタを指定するために使用されます。これらは似ていますが、形式的な違いがあります。読者は、上記の例を 3 つの方法で実装してみることができます。

call、apply、bindメソッドをまとめると、

a:最初のパラメータで関数内のthisのポインタ(関数が実行されるスコープ)を指定し、指定されたスコープに従って関数を呼び出します。 。

b:関数呼び出し時にパラメータを渡すことができます。 call メソッドと binding メソッドは直接渡す必要がありますが、apply メソッドは配列の形式で渡す必要があります。

c: call メソッドと apply メソッドは呼び出し直後に関数を実行しますが、bind メソッドはすぐには実行されず、関数を再度実行する必要があります。ちょっと閉鎖的な匂いがします。

d: このオブジェクトのポインティングの変更には、call、apply、bind メソッドが含まれるだけでなく、that 変数を使用して this のポインティングを修正することもできます。

以上がJavascript の call、apply、bind メソッド間のソースと連絡先の違いを例とともに詳しく説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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