ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript での呼び出し、適用、バインドは何をするのでしょうか?なぜそれらを使用するのでしょうか?

JavaScript での呼び出し、適用、バインドは何をするのでしょうか?なぜそれらを使用するのでしょうか?

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

呼び出し、適用、バインドは何をするのですか?なぜこれを学ぶ必要があるのでしょうか?

は通常、これの環境を指定するために使用されます。


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
b(); //undefined
ログイン後にコピー

オブジェクト a のユーザーを出力したいのですが、unknown と出力されるのはなぜでしょうか。 a.fn() を直接実行しても問題ありません。


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
a.fn(); //追梦子
ログイン後にコピー

これは関数 a を指しているのでここに出力できます。では、なぜ上記は a を指していないのでしょうか? this のポインティングの問題を理解する必要がある場合は、js での this のポインティングの完全な理解を参照してください

このメソッドで目的は達成できますが、場合によっては、このオブジェクトを別の変数に保存する必要がある場合があります。その場合、次のメソッドを使用できます。利用される。

1. call()


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
b.call(a);
ログイン後にコピー

簡単に言えば、呼び出しメソッドの最初のパラメータに b を追加する環境を追加することで、これはそのオブジェクトを指します。
最初のパラメータに加えて、call メソッドは次のように複数のパラメータを追加することもできます:


var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //3
  }
}
var b = a.fn;
b.call(a,1,2);
ログイン後にコピー

2、apply()

apply メソッドは call メソッドと多少似ていますが、これを変更することもできます


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
b.apply(a);
ログイン後にコピー

を指すこともできます 同様に apply にも複数のパラメータを指定できますが、異なる点は、次のように 2 番目のパラメータが配列である必要があることです:


var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //11
  }
}
var b = a.fn;
b.apply(a,[10,1]);
ログイン後にコピー

または


var a = {
  user:"追梦子",
  fn:function(e,ee){
    console.log(this.user); //追梦子
    console.log(e+ee); //520
  }
}
var b = a.fn;
var arr = [500,20];
b.apply(a,arr);


//注意如果call和apply的第一个参数写的是null,那么this指向的是window对象
ログイン後にコピー


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this); //Window {external: Object, chrome: Object, document: document, a: Object, speechSynthesis: SpeechSynthesis…}
  }
}
var b = a.fn;
b.apply(null);
ログイン後にコピー

3.bind()

bind メソッドは call メソッドや apply メソッドとは若干異なりますが、いずれの場合も方向を変更するために使用できます。

まず、それらの違いについて話しましょう。


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
b.bind(a);
ログイン後にコピー

はい、これがバインド メソッドと呼び出しメソッドと適用メソッドの違いです。実際、バインド メソッドは変更された関数を返します。


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user);
  }
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }
ログイン後にコピー

次に、関数 c を実行して、オブジェクト a のユーザーを出力できるかどうかを確認してみましょう


var a = {
  user:"追梦子",
  fn:function(){
    console.log(this.user); //追梦子
  }
}
var b = a.fn;
var c = b.bind(a);
c();
ログイン後にコピー

同様に、bind には複数のパラメーターを指定することもでき、パラメーターは必要に応じて再度追加できます。を実行することもできますが、パラメータは仮パラメータの順序であることに注意してください。


var a = {
  user:"追梦子",
  fn:function(e,d,f){
    console.log(this.user); //追梦子
    console.log(e,d,f); //10 1 2
  }
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);
ログイン後にコピー

概要: call と apply の両方でコンテキスト内でこれを変更し、関数をすぐに実行できます。bind メソッドを使用すると、必要なときにいつでも対応する関数を呼び出すことができ、実行中にパラメーターを渡すことができます。これは違いです。実際の状況に応じて使用を選択してください。

以上がJavaScript での呼び出し、適用、バインドは何をするのでしょうか?なぜそれらを使用するのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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