JavaScript の「call」と「apply」の違いを理解する

Arthur Petit

2024年7月3日水曜日 3:42:42

JavaScript の関数呼び出しメソッド

JavaScript では関数を呼び出す方法がいくつか提供されており、そのうちの 2 つは `Function.prototype.call()` と `Function.prototype.apply()` です。どちらのメソッドも、指定された「this」値と引数を使用して関数を呼び出す役割を果たしますが、これらの引数がどのように渡されるかが異なります。

この記事は、「call」と「apply」の違い、それらのパフォーマンスへの影響、および一方が他方よりも優先されるシナリオを探ることを目的としています。最終的には、JavaScript コードで「call」または「apply」をいつ使用するかをより明確に理解できるようになります。

JavaScript の「call」と「apply」の違いを調べる

JavaScript フロントエンドの例

// Example of Function.prototype.call()
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

const person1 = {
  firstName: "John",
  lastName: "Doe"
};

console.log(person.fullName.call(person1)); // John Doe

JavaScript の「call」と「apply」のパフォーマンスを理解する

JavaScript フロントエンドの例

// Example of Function.prototype.apply()
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};

const person2 = {
  firstName: "Jane",
  lastName: "Doe"
};

console.log(person.fullName.apply(person2, ["Oslo", "Norway"])); // Jane Doe, Oslo, Norway

JavaScript での関数呼び出しの「call」と「apply」の比較

Node.js バックエンドの例

const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};

const person3 = {
  firstName: "Alice",
  lastName: "Smith"
};

function printName(method) {
  if (method === 'call') {
    console.log(person.fullName.call(person3, 'Paris', 'France'));
  } else if (method === 'apply') {
    console.log(person.fullName.apply(person3, ['Paris', 'France']));
  }
}

printName('call');  // Alice Smith, Paris, France
printName('apply'); // Alice Smith, Paris, France

JavaScript 開発における「call」と「apply」の選択

JavaScript パフォーマンス分析

const iterations = 1000000;
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};
const person4 = {
  firstName: "Bob",
  lastName: "Brown"
};

console.time('call');
for (let i = 0; i < iterations; i++) {
  person.fullName.call(person4, 'Berlin', 'Germany');
}
console.timeEnd('call');

console.time('apply');
for (let i = 0; i < iterations; i++) {
  person.fullName.apply(person4, ['Berlin', 'Germany']);
}
console.timeEnd('apply');

JavaScript でのメソッドの呼び出しと適用についての深い洞察

基本的な使い方に加えて、 Function.prototype.call() そして Function.prototype.apply() JavaScript プログラミングを強化できる高度な使用例がいくつかあります。そのような使用例の 1 つは、あるオブジェクトのメソッドが別のオブジェクトから借用されるメソッド借用です。これは、継承せずに別のオブジェクトのメソッドを使用する必要があるオブジェクトがある場合に特に便利です。使用する call() そして apply()を使用すると、メソッドを一時的に借用して、別のオブジェクトのコンテキストで実行できるため、コードの再利用性が向上し、冗長性が軽減されます。

考慮すべきもう 1 つの重要な側面は、 apply() 可変引数関数の場合 - 可変数の引数を受け入れる関数。引数の配列があり、それを配列を受け入れない関数に渡す必要がある場合、 apply() 非常に便利になります。一方で、 call() は、パフォーマンスが重要であり、引数の数が既知で固定されているシナリオで役立ちます。これらのニュアンスを理解することで、開発者はいつ使用するかについて、より多くの情報に基づいた決定を下すことができます。 call() 対 apply()、読みやすさとパフォーマンスの両方のためにコードを最適化します。

JavaScript での電話および申し込みに関するよくある質問

の主な違いは何ですか call() そして apply()?
call() 引数を個別に受け入れますが、 apply() 引数を配列として受け取ります。
できる call() そして apply() 互換的に使用されますか？
はい、同じ結果を得ることができますが、選択は引数の構造によって異なります。
いつを優先すればよいですか apply() 以上 call()?
使用 apply() 引数の配列または可変数の引数がある場合。
性能に違いはありますか call() そして apply()?
ほとんどの場合、パフォーマンスの差は無視できますが、 call() 固定数の引数を使用すると、わずかに高速になる可能性があります。
どうやって call() そして apply() を処理する this コンテクスト？
どちらのメソッドも明示的に設定します。 this 関数呼び出しのコンテキスト。
使ってもいいですか call() そして apply() コンストラクター関数で?
いいえ、新しいインスタンスを作成しないため、コンストラクター関数には適していません。
高度な使用例にはどのようなものがありますか call() そして apply()?
これらは、メソッドの借用や可変個引数関数の処理に役立ちます。
どうやって call() コードの可読性を向上させるには？
call() 引数の数がわかっていて固定されている場合、関数の呼び出しがより明確になります。
できる apply() 未知の数の引数を処理しますか?
はい、 apply() 可変数の引数を処理する必要がある関数に最適です。

関数呼び出しメソッドに関する最終的な考え方

結論から言うと、どちらも call そして apply メソッドは、指定された関数を呼び出すための JavaScript の強力なツールです。 this 価値。どちらを選択するかは、関数に引数をどのように渡すかによって大きく異なります。その間 call 固定数の引数を扱う場合に最適です。 apply 配列または不明な数の引数を処理するときに点灯します。これらのニュアンスを理解することは、より効率的で読みやすいコードを作成するのに役立ち、最終的には JavaScript プログラミングの実践につながります。