Den Unterschied zwischen Aufruf und Anwenden in JavaScript verstehen

Verwendung von Call- und Apply-Methoden in JavaScript für den Funktionsaufruf

JavaScript-Frontend-Skript

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

Anwenden von Function.prototype.apply() für die flexible Argumentübergabe

JavaScript-Frontend-Skript

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

Node.js-Backend-Beispiel mit Call und Apply

JavaScript-Backend-Skript mit Node.js

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

Kombinieren von Anrufen und Anwenden mit einer dynamischen Funktion

JavaScript-Full-Stack-Skript

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

Häufige Fragen zum Aufrufen und Anwenden in JavaScript

1. Was ist der Hauptunterschied zwischen call() Und apply()?
2. Der Hauptunterschied besteht darin call() akzeptiert eine Liste von Argumenten, while apply() akzeptiert eine Reihe von Argumenten.
3. Wann sollten Sie es verwenden? apply() über call()?
4. Du solltest benutzen apply() wenn Sie über ein Array von Argumenten verfügen oder eine variable Anzahl von Argumenten an eine Funktion übergeben müssen.
5. Gibt es Leistungsunterschiede zwischen? call() Und apply()?
6. Im Allgemeinen gibt es keine signifikanten Leistungsunterschiede zwischen call() Und apply(). Etwaige Unterschiede sind in der Regel vernachlässigbar.
7. Kann apply() mit mathematischen Methoden verwendet werden?
8. Ja, apply() kann verwendet werden, um ein Array von Zahlen an mathematische Methoden wie zu übergeben Math.max() oder Math.min().
9. Was ist Function.prototype.bind()?
10. bind() Erstellt eine neue Funktion, die beim Aufruf ihre Funktion hat this Das Schlüsselwort wird auf den bereitgestellten Wert gesetzt, wobei eine bestimmte Folge von Argumenten vor allen angegebenen Argumenten steht, wenn die neue Funktion aufgerufen wird.
11. Wie kann call() zum Ausleihen von Methoden verwendet werden?
12. Sie können verwenden call() um Methoden von einem Objekt auszuleihen und sie auf einem anderen Objekt zu verwenden, was die Wiederverwendung von Methoden ermöglicht, ohne die Funktion zu kopieren.
13. Ist die Nutzung möglich? call() oder apply() mit Konstrukteuren?
14. Nein, Konstruktoren können nicht direkt mit aufgerufen werden call() oder apply(). Stattdessen können Sie verwenden Object.create() für Vererbungsmuster.
15. Was sind Array-ähnliche Objekte und wie funktionieren sie? call() Und apply() mit ihnen arbeiten?
16. Array-ähnliche Objekte sind Objekte, die über eine Längeneigenschaft und indizierte Elemente verfügen. call() Und apply() kann verwendet werden, um diese Objekte so zu manipulieren, als wären sie Arrays.

Zusammenfassung der Verwendung von „call“ und „apply“ in JavaScript

In JavaScript, call() Und apply() sind für die Steuerung von entscheidender Bedeutung this Kontext innerhalb von Funktionen. call() ermöglicht die Übergabe einzelner Argumente und eignet sich daher für bekannte und feste Argumente. Im Gegensatz, apply() akzeptiert ein Array von Argumenten und bietet so Flexibilität für variable Argumentlisten. Beide Methoden verbessern die Wiederverwendbarkeit von Code und den dynamischen Funktionsaufruf, sei es in der Frontend-Entwicklung oder in Node.js-Umgebungen. Um sauberen und effizienten JavaScript-Code zu schreiben, ist es wichtig zu verstehen, wann und wie diese Methoden effektiv eingesetzt werden.