Forstå forskjellen mellom kall og bruk i JavaScript

Arthur Petit

Onsdag 26. juni 2024 16:02:57

Funksjonsanropsmetoder i JavaScript
I JavaScript kan funksjoner startes på forskjellige måter, og to vanlige metoder er "ringe" og "bruk". Disse metodene lar deg kontrollere konteksten ('denne' verdien) som funksjonen utføres i. Å forstå forskjellen mellom 'ringe' og 'søke' er avgjørende for å skrive effektiv og effektiv JavaScript-kode.
Denne artikkelen utforsker forskjellene mellom `Function.prototype.call()` og `Function.prototype.apply()` når du starter en funksjon. Vi vil undersøke deres syntaks, brukstilfeller og potensielle ytelsesforskjeller. Mot slutten av denne artikkelen vil du ha en klar forståelse av når du skal bruke "ringe" fremfor "søk" og omvendt.

Kommando Beskrivelse

Function.prototype.call() Kaller en funksjon med en gitt denne verdien og argumenter gitt individuelt.

Function.prototype.apply() Kaller en funksjon med en gitt denne verdien, og argumenter oppgitt som en matrise.

this Refererer til objektet som funksjonen ble kalt fra, noe som tillater dynamisk konteksttilordning.

console.log() Skriver ut meldinger eller variabler til konsollen for feilsøkingsformål.

res.writeHead() Angir HTTP-statuskoden og svarhodene i en Node.js-server.

res.end() Avslutter svarprosessen i en Node.js-server, og signaliserer at alle data er sendt.

http.createServer() Oppretter en HTTP-serverforekomst i Node.js, og lytter etter innkommende forespørsler.

listen() Starter HTTP-serveren, slik at den kan lytte på en spesifisert port.

Kommando	Beskrivelse
Function.prototype.call()	Kaller en funksjon med en gitt denne verdien og argumenter gitt individuelt.
Function.prototype.apply()	Kaller en funksjon med en gitt denne verdien, og argumenter oppgitt som en matrise.
this	Refererer til objektet som funksjonen ble kalt fra, noe som tillater dynamisk konteksttilordning.
console.log()	Skriver ut meldinger eller variabler til konsollen for feilsøkingsformål.
res.writeHead()	Angir HTTP-statuskoden og svarhodene i en Node.js-server.
res.end()	Avslutter svarprosessen i en Node.js-server, og signaliserer at alle data er sendt.
http.createServer()	Oppretter en HTTP-serverforekomst i Node.js, og lytter etter innkommende forespørsler.
listen()	Starter HTTP-serveren, slik at den kan lytte på en spesifisert port.

Forstå bruken av samtale og bruk i JavaScript

Skriptene som følger med illustrerer forskjellene mellom bruk og i JavaScript. Begge metodene brukes til å starte funksjoner med en spesifisert kontekst. I det første eksempelet call() metoden brukes til å påkalle metode på forskjellige objekter ( og ), og sender egenskapene til hvert objekt som individuelle argumenter. Denne metoden tillater en kortfattet syntaks når antallet argumenter er kjent og fast. Det andre eksemplet viser bruken av apply() metode, som ligner på men tar en rekke argumenter i stedet for individuelle. Denne fleksibiliteten er spesielt nyttig når antallet argumenter er variabelt eller kommer fra en matrisekilde.

I Node.js-backend-eksemplet er det metoden brukes i en HTTP-server opprettet med . Dette eksemplet fremhever hvordan kontekst kan manipuleres i JavaScript på serversiden for å svare dynamisk på HTTP-forespørsler. Serveren svarer med en hilsen, og demonstrerer hvordan call() metoden kan endre konteksten til funksjon. Til slutt viser det kombinerte frontend- og backendeksemplet hvordan begge deler og kan brukes i en mer dynamisk funksjon. Ved bruk av call() med individuelle argumenter og med en rekke argumenter genererer skriptet dynamisk brukerdetaljer, og illustrerer de praktiske anvendelsene av disse metodene i JavaScript-utvikling på både klientsiden og serversiden.

Bruke kalle og bruke metoder i JavaScript for funksjonsanrop

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

Bruker Function.prototype.apply() for fleksibel argumentoverfø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 Eksempel Bruk av ring og søk

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

Kombiner samtale og søknad med en dynamisk funksjon

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.

Utforske kontekstmanipulasjon i JavaScript

Utover den grunnleggende bruken av og , kan disse metodene kombineres med andre JavaScript-funksjoner for å lage mer kompleks og kraftig kode. For eksempel brukes de ofte sammen med , som returnerer en ny funksjon med en spesifisert this verdi. I motsetning til og , som umiddelbart påkaller funksjonen, kan brukes til å lage en bundet funksjon som kan kalles senere med en konsistent kontekst. Dette er spesielt nyttig i hendelseshåndtering, der du kanskje ønsker å sikre at en funksjon beholder konteksten til et bestemt objekt selv når den kjøres i forskjellige miljøer.

Et annet avansert bruksområde innebærer å låne metoder fra ett objekt for bruk med et annet. Dette kan oppnås ved å bruke eller å binde en metode midlertidig til et annet objekt. For eksempel array-metoder som eller push() kan lånes og brukes på array-lignende objekter som arguments-objektet i funksjoner. Denne teknikken gir større fleksibilitet og gjenbrukbarhet av kode, da den gjør det mulig å dele metoder på tvers av forskjellige objekter uten duplisering.

Hva er hovedforskjellen mellom og ?
Hovedforskjellen er det godtar en liste med argumenter, mens aksepterer en rekke argumenter.
Når bør du bruke over ?
Du bør bruke når du har en rekke argumenter eller trenger å sende et variabelt antall argumenter til en funksjon.
Er det ytelsesforskjeller mellom og ?
Generelt er det ingen signifikante ytelsesforskjeller mellom og . Eventuelle forskjeller er vanligvis ubetydelige.
Kan brukes med matematiske metoder?
Ja, kan brukes til å sende en rekke tall til matematiske metoder som eller .
Hva er ?
oppretter en ny funksjon som, når den kalles, har sin nøkkelord satt til den angitte verdien, med en gitt sekvens av argumenter foran alle gitte når den nye funksjonen kalles.
Hvordan kan brukes til å låne metoder?
Du kan bruke å låne metoder fra ett objekt og bruke dem på et annet objekt, noe som gir mulighet for gjenbruk av metode uten å kopiere funksjonen.
Er det mulig å bruke eller med konstruktører?
Nei, konstruktører kan ikke kalles direkte med eller . I stedet kan du bruke for arvemønstre.
Hva er array-lignende objekter, og hvordan og jobbe med dem?
Array-lignende objekter er objekter som har en lengdeegenskap og indekserte elementer. og kan brukes til å manipulere disse objektene som om de var arrays.

I JavaScript, og er avgjørende for å kontrollere kontekst innenfor funksjoner. call() lar individuelle argumenter sendes, noe som gjør den egnet for kjente og faste argumenter. I motsetning, tar en rekke argumenter, og gir fleksibilitet for variable argumentlister. Begge metodene forbedrer kodegjenbrukbarhet og dynamisk funksjonsanrop, enten det er i frontend-utvikling eller Node.js-miljøer. Å forstå når og hvordan du bruker disse metodene effektivt er avgjørende for å skrive ren, effektiv JavaScript-kode.