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

JavaScript の call メソッドと apply メソッドを関数呼び出しに利用する

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

Function.prototype.apply() を適用して柔軟な引数を渡す

JavaScript フロントエンド スクリプト

// 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

call と apply を使用した Node.js バックエンドの例

Node.js を使用した JavaScript バックエンド スクリプト

// 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/');

呼び出しと適用を動的関数と組み合わせる

JavaScript フルスタック スクリプト

// 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 での電話と申し込みに関するよくある質問

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

JavaScriptでのcallとapplyの使い方のまとめ

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