JavaScriptのapplyとcall、callとbindの違いの使用例を詳しく解説

apply と call の違い

ECMAScript 仕様では、すべての関数に対して call メソッドと apply メソッドが定義されており、それらは広く使用されており、それらの機能はパラメーターを渡す形式が異なるだけです。

apply( )

apply メソッドは 2 つのパラメーターを渡します。1 つは関数コンテキストとしてのオブジェクト、もう 1 つは関数パラメーターで構成される配列です。

var obj = {
 name : 'linxin'
}
function func(firstName, lastName){
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.apply(obj, ['A', 'B']); // A linxin B

obj が関数コンテキストとして使用されるオブジェクトであり、関数 func 内の this がオブジェクト obj を指していることがわかります。パラメータ A と B は、それぞれ func パラメータのリスト要素に対応して、配列に配置され、func 関数に渡されます。

call( )

call メソッドの最初のパラメータも関数コンテキストのオブジェクトですが、後で渡されるのは単一の配列ではなくパラメータ リストです。

var obj = {
 name: 'linxin'
}
function func(firstName, lastName) {
 console.log(firstName + ' ' + this.name + ' ' + lastName);
}
func.call(obj, 'C', 'D');  // C linxin D

apply を比較すると、C と D が配列に配置されるのではなく、個別のパラメーターとして func 関数に渡されることがわかります。

実際、いつどの方法を使用するかを心配する必要はありません。パラメータがすでに配列に存在する場合は、当然 apply を使用します。パラメータが分散していて相互に相関がない場合は、call を使用します。

apply と call の使用法

1. これを

var obj = {
 name: 'linxin'
}
function func() {
 console.log(this.name);
}
func.call(obj);  // linxin

を指すように変更します。call メソッドの最初のパラメーターが関数コンテキストとしてのオブジェクトであることがわかります。ここでは obj が次のように渡されます。パラメータ func。関数内の this は obj オブジェクトを指します。ここでの func 関数は実際には

function func() {
 console.log(obj.name);
}

2 と同等です。 他のオブジェクトからメソッドを借用します

まず例を見てみましょう

var Person1 = function () {
 this.name = 'linxin';
}
var Person2 = function () {
 this.getname = function () {
  console.log(this.name);
 }
 Person1.call(this);
}
var person = new Person2();
person.getname();  // linxin

上記から、オブジェクト person がインスタンス化したことがわかります。 by Person2 Person1 の名前は getname メソッドを通じて取得されます。 PERSON2 では、PERSON1.call(this) の機能は this オブジェクトの代わりに PERSON1 オブジェクトを使用することであるため、PERSON2 は PERSON1 のすべてのプロパティとメソッドを持ち、これは PERSON2 が PERSON1 のプロパティとメソッドを継承するのと同等です。

3. 関数

apply メソッドと call メソッドを呼び出すと、関数がすぐに実行されるため、関数の呼び出しにも使用できます。

function func() {
 console.log('linxin');
}
func.call();   // linxin

callとbindの違い

EcmaScript5ではbindというメソッドが拡張されており、以前のバージョンのIEとは互換性がありません。これは call と非常に似ており、最初のパラメーターは関数コンテキストとしてのオブジェクトを受け取り、パラメーターの 2 番目の部分は複数のパラメーターを受け取ることができます。

両者の違いは以下の2点です。

1.bind は関数を返します

var obj = {
 name: 'linxin'
}
function func() {
 console.log(this.name);
}
var func1 = func.bind(obj);
func1();      // linxin

bind メソッドはすぐには実行されませんが、コンテキストを変更する関数を返します。ただし、元の関数 func の this は変更されておらず、依然としてグローバル オブジェクト ウィンドウを指しています。

2. パラメータの使用

function func(a, b, c) {
 console.log(a, b, c);
}
var func1 = func.bind(null,'linxin');
func('A', 'B', 'C');   // A B C
func1('A', 'B', 'C');   // linxin A B
func1('B', 'C');    // linxin B C
func.call(null, 'linxin');  // linxin undefined undefined

callは、2番目以降のパラメータをfuncメソッドの実パラメータとして渡すことであり、func1メソッドの実パラメータがパラメータの基礎となります。バインド 上に行ったり戻ったりします。

以前のバージョンのブラウザにはバインド メソッドがありません。自分で実装することもできます。

りー

以上がJavaScriptのapplyとcall、callとbindの違いの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。