"Soita" ja "apply" eron ymmärtäminen JavaScriptissä

Funktioiden kutsumismenetelmät JavaScriptissä

JavaScript tarjoaa useita tapoja kutsua toimintoja, joista kaksi ovat "Function.prototype.call()" ja "Function.prototype.apply()". Molemmat menetelmät kutsuvat toimintoja tietyllä "this"-arvolla ja argumenteilla, mutta ne eroavat toisistaan ​​siinä, miten nämä argumentit välitetään.

Tämän artikkelin tarkoituksena on tutkia "soita" ja "käytä" eroja, niiden tehokkuusvaikutuksia ja skenaarioita, joissa toinen saattaisi olla parempi kuin toinen. Loppujen lopuksi ymmärrät paremmin, milloin JavaScript-koodissa tulee käyttää "soita" tai "apply".

Selvitä eroja "soita" ja "apply" välillä JavaScriptissä

Esimerkki JavaScript-käyttöliittymästä

// Example of Function.prototype.call()
const person = {
  fullName: function() {
    return this.firstName + " " + this.lastName;
  }
};

const person1 = {
  firstName: "John",
  lastName: "Doe"
};

console.log(person.fullName.call(person1)); // John Doe

JavaScriptin "soita" vs "apply" tehokkuuden ymmärtäminen

Esimerkki JavaScript-käyttöliittymästä

// Example of Function.prototype.apply()
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};

const person2 = {
  firstName: "Jane",
  lastName: "Doe"
};

console.log(person.fullName.apply(person2, ["Oslo", "Norway"])); // Jane Doe, Oslo, Norway

"Soita" ja "hae" vertaamalla funktion kutsua JavaScriptissä

Node.js-taustaohjelmaesimerkki

const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};

const person3 = {
  firstName: "Alice",
  lastName: "Smith"
};

function printName(method) {
  if (method === 'call') {
    console.log(person.fullName.call(person3, 'Paris', 'France'));
  } else if (method === 'apply') {
    console.log(person.fullName.apply(person3, ['Paris', 'France']));
  }
}

printName('call');  // Alice Smith, Paris, France
printName('apply'); // Alice Smith, Paris, France

Valitse "soita" ja "käytä" JavaScript-kehityksessä

JavaScriptin suorituskykyanalyysi

const iterations = 1000000;
const person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + ", " + city + ", " + country;
  }
};
const person4 = {
  firstName: "Bob",
  lastName: "Brown"
};

console.time('call');
for (let i = 0; i < iterations; i++) {
  person.fullName.call(person4, 'Berlin', 'Germany');
}
console.timeEnd('call');

console.time('apply');
for (let i = 0; i < iterations; i++) {
  person.fullName.apply(person4, ['Berlin', 'Germany']);
}
console.timeEnd('apply');

Syvempi näkemys JavaScriptin kutsumisesta ja menetelmien soveltamisesta

Peruskäyttönsä lisäksi Function.prototype.call() ja Function.prototype.apply() sisältää useita edistyneitä käyttötapauksia, jotka voivat parantaa JavaScript-ohjelmointiasi. Yksi tällainen käyttötapaus on menetelmälainaus, jossa menetelmiä yhdestä objektista lainaa toinen. Tämä on erityisen hyödyllistä, kun sinulla on objekti, jonka on käytettävä menetelmää toisesta objektista ilman periytymistä. Käyttämällä call() ja apply(), voit lainata väliaikaisesti menetelmiä ja suorittaa niitä eri objektien yhteydessä, mikä parantaa koodin uudelleenkäytettävyyttä ja vähentää redundanssia.

Toinen tärkeä huomioitava näkökohta on käyttö apply() variadic-funktioille – funktioille, jotka hyväksyvät vaihtelevan määrän argumentteja. Kun sinulla on joukko argumentteja ja sinun on välitettävä ne funktiolle, joka ei hyväksy taulukkoa, apply() tulee erittäin kätevä. Toisaalta, call() voi olla hyödyllinen skenaarioissa, joissa suorituskyky on kriittinen ja argumenttien määrä on tiedossa ja kiinteä. Ymmärtämällä nämä vivahteet kehittäjät voivat tehdä tietoisempia päätöksiä käyttöajasta call() vastaan apply(), optimoivat koodinsa luettavuuden ja suorituskyvyn kannalta.

Usein kysyttyjä kysymyksiä soittamisesta ja hakemisesta JavaScriptissä

1. Mikä on ensisijainen ero call() ja apply()?
2. call() hyväksyy argumentit yksilöllisesti, vaikka apply() hyväksyy argumentit taulukkona.
3. Voi call() ja apply() käytetään vaihtokelpoisesti?
4. Kyllä, he voivat saavuttaa saman tuloksen, mutta valinta riippuu argumenttien rakenteesta.
5. Milloin minun pitäisi mieluummin apply() yli call()?
6. Käyttää apply() kun sinulla on joukko argumentteja tai muuttuva määrä argumentteja.
7. Onko suorituskyvyssä eroa call() ja apply()?
8. Suorituskykyerot ovat useimmissa tapauksissa mitättömiä, mutta call() voi olla hieman nopeampi kiinteällä määrällä argumentteja.
9. Kuinka tehdä call() ja apply() hoitaa this konteksti?
10. Molemmat menetelmät asettavat nimenomaisesti this funktion kutsun konteksti.
11. Voinko käyttää call() ja apply() konstruktorifunktioilla?
12. Ei, ne eivät sovellu rakentajafunktioille, koska ne eivät luo uusia ilmentymiä.
13. Mihin jotkin edistyneet käyttötapaukset ovat call() ja apply()?
14. Ne ovat hyödyllisiä menetelmän lainaamiseen ja variadic-funktioiden käsittelyyn.
15. Kuinka call() parantaa koodin luettavuutta?
16. call() tekee funktion kutsusta selkeämmän, kun argumenttien määrä on tiedossa ja kiinteä.
17. Voi apply() käsittelemään tuntemattoman määrän argumentteja?
18. Joo, apply() on ihanteellinen funktioille, jotka tarvitsevat vaihtelevan määrän argumentteja.

Viimeisiä ajatuksia funktioiden kutsumismenetelmistä

Lopuksi molemmat call ja apply menetelmät ovat tehokkaita työkaluja JavaScriptissä funktioiden kutsumiseen määritetyllä tavalla this arvo. Valinta niiden välillä riippuu suurelta osin siitä, kuinka haluat välittää argumentit funktiolle. Sillä aikaa call on paras, kun käsitellään kiinteää määrää argumentteja, apply loistaa käsiteltäessä taulukoita tai tuntematonta määrää argumentteja. Näiden vivahteiden ymmärtäminen auttaa kirjoittamaan tehokkaampaa ja luettavampaa koodia, mikä johtaa viime kädessä parempiin JavaScript-ohjelmointikäytäntöihin.