JavaScript における call と apply の違いを理解する

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

JavaScript では、関数はさまざまな方法で呼び出すことができます。一般的に使用される 2 つのメソッドは「call」と「apply」です。これらのメソッドを使用すると、関数が実行されるコンテキスト (「this」値) を制御できます。 「call」と「apply」の違いを理解することは、効率的かつ効果的な JavaScript コードを作成するために重要です。

この記事では、関数を呼び出すときの `Function.prototype.call()` と `Function.prototype.apply()` の違いについて説明します。それらの構文、使用例、および潜在的なパフォーマンスの違いを調べます。この記事を読み終えるまでに、いつ「apply」ではなく「call」を使用するべきか、またその逆の場合について明確に理解できるようになります。

指示	説明
Function.prototype.call()	指定された this 値と個別に指定された引数を使用して関数を呼び出します。
Function.prototype.apply()	指定された this 値と配列として指定された引数を使用して関数を呼び出します。
this	関数の呼び出し元のオブジェクトを参照し、動的なコンテキストの割り当てを可能にします。
console.log()	デバッグ目的でメッセージまたは変数をコンソールに出力します。
res.writeHead()	Node.js サーバーに HTTP ステータス コードと応答ヘッダーを設定します。
res.end()	Node.js サーバーの応答プロセスを終了し、すべてのデータが送信されたことを通知します。
http.createServer()	Node.js で HTTP サーバー インスタンスを作成し、受信リクエストをリッスンします。
listen()	HTTP サーバーを起動し、指定されたポートでリッスンできるようにします。

JavaScript での call と apply の使用法を理解する

提供されているスクリプトは、使用方法の違いを示しています。 そして JavaScriptで。どちらのメソッドも、指定された関数を呼び出すために使用されます。 コンテクスト。最初の例では、 call() メソッドを呼び出すために使用されます 異なるオブジェクトに対するメソッド ( そして )、各オブジェクトのプロパティを個別の引数として渡します。このメソッドでは、引数の数が既知で固定されている場合に、簡潔な構文が可能になります。 2 番目の例は、 apply() と同様のメソッド ただし、個々の引数の代わりに引数の配列を取ります。この柔軟性は、引数の数が可変である場合、または配列ソースから取得される場合に特に役立ちます。

Node.js バックエンドの例では、 メソッドは、で作成された HTTP サーバー内で使用されます。 。この例では、 コンテキストをサーバーサイド JavaScript で操作して、HTTP リクエストに動的に応答できます。サーバーは挨拶で応答し、どのように動作するかを示します。 call() メソッドはコンテキストを変更できます 関数。最後に、フロントエンドとバックエンドを組み合わせた例で、両方の機能がどのように機能するかを示します。 そして より動的な関数で使用できます。を使用することで call() 個別の議論と スクリプトは引数の配列を使用してユーザーの詳細を動的に生成し、クライアント側とサーバー側の両方の JavaScript 開発におけるこれらのメソッドの実際のアプリケーションを示します。

// Example 1: Using Function.prototype.call()
const person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};
const person1 = {
    firstName: "John",
    lastName: "Doe"
};
const person2 = {
    firstName: "Jane",
    lastName: "Smith"
};
// Call the fullName method on person1 and person2
console.log(person.fullName.call(person1)); // Output: John Doe
console.log(person.fullName.call(person2)); // Output: Jane Smith

// Example 2: Using Function.prototype.apply()
const person = {
    fullName: function(city, country) {
        return this.firstName + " " + this.lastName + ", " + city + ", " + country;
    }
};
const person1 = {
    firstName: "John",
    lastName: "Doe"
};
const person2 = {
    firstName: "Jane",
    lastName: "Smith"
};
// Apply the fullName method with arguments on person1 and person2
console.log(person.fullName.apply(person1, ["New York", "USA"])); // Output: John Doe, New York, USA
console.log(person.fullName.apply(person2, ["London", "UK"])); // Output: Jane Smith, London, UK

// Load the required modules
const http = require('http');
// Create a server object
http.createServer((req, res) => {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    // Example using call()
    function greet() {
        return 'Hello ' + this.name;
    }
    const user = { name: 'Alice' };
    res.write(greet.call(user)); // Output: Hello Alice
    res.end();
}).listen(3000);
console.log('Server running at http://localhost:3000/');

// Define a function to display user details
function displayDetails(age, profession) {
    return this.name + " is " + age + " years old and works as a " + profession + ".";
}
// User objects
const user1 = { name: 'Bob' };
const user2 = { name: 'Alice' };
// Use call to invoke displayDetails
console.log(displayDetails.call(user1, 30, 'Engineer')); // Output: Bob is 30 years old and works as a Engineer.
// Use apply to invoke displayDetails
console.log(displayDetails.apply(user2, [28, 'Doctor'])); // Output: Alice is 28 years old and works as a Doctor.

JavaScript でのコンテキスト操作の探索

基本的な使い方を超えて、 そして 、これらのメソッドを他の JavaScript 機能と組み合わせて、より複雑で強力なコードを作成できます。たとえば、以下と組み合わせて使用​​されることがよくあります。 、指定された値を持つ新しい関数を返します。 this 価値。とは異なり そして 、関数をすぐに呼び出します。 を使用して、後で一貫したコンテキストで呼び出すことができるバインドされた関数を作成できます。これは、関数が異なる環境で実行される場合でも、特定のオブジェクトのコンテキストを確実に保持する必要があるイベント処理で特に役立ちます。

もう 1 つの高度な使用例には、あるオブジェクトからメソッドを借用して別のオブジェクトで使用することが含まれます。これは、次を使用して実現できます。 または メソッドを別のオブジェクトに一時的にバインドします。たとえば、次のような配列メソッド または push() 借用して、関数の引数オブ​​ジェクトなどの配列のようなオブジェクトに適用できます。この手法により、メソッドを重複することなくさまざまなオブジェクト間で共有できるため、コードの柔軟性と再利用性が向上します。

1. の主な違いは何ですか そして ?
2. 主な違いは、 引数のリストを受け入れますが、 引数の配列を受け入れます。
3. いつ使用するべきですか 以上 ?
4. 使用する必要があります 引数の配列がある場合、または可変数の引数を関数に渡す必要がある場合。
5. 間にパフォーマンスの違いはありますか そして ?
6. 一般に、両者の間に大きなパフォーマンスの違いはありません。 そして 。通常、違いは無視できる程度です。
7. できる 数学メソッドで使用できますか?
8. はい、 数値の配列を次のような Math メソッドに渡すために使用できます。 または 。
9. とは ?
10. 新しい関数を作成します。呼び出されると、その関数は キーワードは指定された値に設定され、新しい関数が呼び出されるときに、指定された一連の引数が指定された引数の前に置かれます。
11. どのようにすることができます メソッドを借用するために使用されますか?
12. 使用できます あるオブジェクトからメソッドを借用し、別のオブジェクトで使用することで、関数をコピーせずにメソッドを再利用できます。
13. 使用できますか または コンストラクターでは？
14. いいえ、コンストラクターを直接呼び出すことはできません。 または 。代わりに、次を使用できます。 継承パターンの場合。
15. 配列のようなオブジェクトとは何か、またその方法 そして 彼らと一緒に仕事をしますか？
16. 配列のようなオブジェクトは、長さのプロパティとインデックス付きの要素を持つオブジェクトです。 そして を使用すると、これらのオブジェクトを配列であるかのように操作できます。

JavaScriptでは、 そして を制御するために不可欠です 関数内のコンテキスト。 call() 個々の引数を渡すことができるため、既知の固定引数に適しています。対照的に、 は引数の配列を受け取り、可変引数リストに柔軟性を提供します。どちらの方法も、フロントエンド開発環境でも Node.js 環境でも、コードの再利用性と動的な関数呼び出しを強化します。これらのメソッドをいつどのように効果的に使用するかを理解することは、クリーンで効率的な JavaScript コードを作成するために重要です。