Comprendere la differenza tra chiamata e applicazione in JavaScript

Utilizzo di metodi di chiamata e applicazione in JavaScript per l'invocazione di funzioni

Script frontend 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

Applicazione di Function.prototype.apply() per il passaggio flessibile degli argomenti

Script frontend 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

Esempio di backend Node.js Utilizzo di call e apply

Script backend JavaScript con 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/');

Combinazione di chiamata e candidatura con una funzione dinamica

Script JavaScript completo dello stack

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

Domande comuni su chiamata e candidatura in JavaScript

1. Qual è la differenza principale tra call() E apply()?
2. La differenza principale è questa call() accetta un elenco di argomenti, mentre apply() accetta una serie di argomenti.
3. Quando dovresti usarlo apply() Sopra call()?
4. Dovresti usare apply() quando hai un array di argomenti o devi passare un numero variabile di argomenti a una funzione.
5. Ci sono differenze di prestazioni tra call() E apply()?
6. In generale, non ci sono differenze significative tra le prestazioni call() E apply(). Eventuali differenze sono generalmente trascurabili.
7. Potere apply() essere utilizzato con i metodi matematici?
8. SÌ, apply() può essere utilizzato per passare una serie di numeri a metodi matematici come Math.max() O Math.min().
9. Cosa è Function.prototype.bind()?
10. bind() crea una nuova funzione che, quando chiamata, ha il suo this parola chiave impostata sul valore fornito, con una determinata sequenza di argomenti che precedono quelli forniti quando viene chiamata la nuova funzione.
11. Come può call() essere utilizzato per prendere in prestito metodi?
12. Puoi usare call() prendere in prestito metodi da un oggetto e usarli su un altro oggetto, consentendo il riutilizzo del metodo senza copiare la funzione.
13. È possibile utilizzare call() O apply() con i costruttori?
14. No, i costruttori non possono essere chiamati direttamente con call() O apply(). Invece, puoi usare Object.create() per i modelli di ereditarietà.
15. Cosa sono gli oggetti simili ad array e come farlo call() E apply() lavorare con loro?
16. Gli oggetti simili ad array sono oggetti che hanno una proprietà length ed elementi indicizzati. call() E apply() può essere utilizzato per manipolare questi oggetti come se fossero array.

Riepilogo dell'utilizzo di chiamata e applicazione in JavaScript

In JavaScript, call() E apply() sono essenziali per il controllo della this contesto all'interno delle funzioni. call() consente di passare argomenti individuali, rendendolo adatto ad argomenti noti e fissi. In contrasto, apply() accetta una serie di argomenti, fornendo flessibilità per elenchi di argomenti variabili. Entrambi i metodi migliorano la riusabilità del codice e l'invocazione di funzioni dinamiche, sia nello sviluppo frontend che negli ambienti Node.js. Comprendere quando e come utilizzare questi metodi in modo efficace è fondamentale per scrivere codice JavaScript pulito ed efficiente.