Förstå skillnaden mellan samtal och applicering i JavaScript

Använda anrop och tillämpa metoder i JavaScript för funktionsanrop

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

Använder Function.prototype.apply() för flexibel argumentöverföring

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 Exempel Använder ring och applicera

JavaScript Backend Script med 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/');

Kombinera samtal och ansök med en dynamisk funktion

JavaScript Full Stack Script

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

Vanliga frågor om att ringa och ansöka i JavaScript

1. Vad är den största skillnaden mellan call() och apply()?
2. Den största skillnaden är att call() accepterar en lista med argument, medan apply() accepterar en rad argument.
3. När ska du använda apply() över call()?
4. Du bör använda apply() när du har en array av argument eller behöver skicka ett variabelt antal argument till en funktion.
5. Finns det prestandaskillnader mellan call() och apply()?
6. Generellt sett finns det inga signifikanta prestandaskillnader mellan call() och apply(). Eventuella skillnader är vanligtvis försumbara.
7. Burk apply() användas med matematiska metoder?
8. Ja, apply() kan användas för att skicka en rad siffror till matematiska metoder som Math.max() eller Math.min().
9. Vad är Function.prototype.bind()?
10. bind() skapar en ny funktion som, när den anropas, har sin this nyckelordet inställt på det angivna värdet, med en given sekvens av argument före alla angivna när den nya funktionen anropas.
11. Hur kan call() användas för att låna metoder?
12. Du kan använda call() att låna metoder från ett objekt och använda dem på ett annat objekt, vilket möjliggör återanvändning av metoder utan att kopiera funktionen.
13. Är det möjligt att använda call() eller apply() med konstruktörer?
14. Nej, konstruktörer kan inte direkt anropas med call() eller apply(). Istället kan du använda Object.create() för arvsmönster.
15. Vad är arrayliknande objekt och hur gör det call() och apply() jobba med dem?
16. Arrayliknande objekt är objekt som har en length-egenskap och indexerade element. call() och apply() kan användas för att manipulera dessa objekt som om de vore arrayer.

Sammanfattning av användningen av samtal och applicering i JavaScript

I JavaScript, call() och apply() är avgörande för att kontrollera this sammanhang inom funktioner. call() tillåter att enskilda argument skickas, vilket gör det lämpligt för kända och fasta argument. I kontrast, apply() tar en rad argument, vilket ger flexibilitet för listor med variabla argument. Båda metoderna förbättrar kodåteranvändbarhet och dynamisk funktionsanrop, oavsett om det är i frontend-utveckling eller Node.js-miljöer. Att förstå när och hur man använder dessa metoder effektivt är avgörande för att skriva ren, effektiv JavaScript-kod.