A „call” és az „apply” közötti különbség megértése a JavaScriptben

Funkcióhívási módszerek JavaScriptben

A JavaScript számos módot kínál a függvények meghívására, amelyek közül kettő a "Function.prototype.call()" és a "Function.prototype.apply()". Mindkét módszer meghatározott "this" értékkel és argumentumokkal rendelkező függvények meghívására szolgál, de különböznek az argumentumok átadási módjában.

Ennek a cikknek az a célja, hogy feltárja a „hívás” és az „alkalmaz” kifejezések közötti különbségeket, azok teljesítményre gyakorolt ​​hatásait, valamint azokat a forgatókönyveket, amelyekben az egyiket előnyben részesítik a másikkal szemben. A végére tisztábban fogja tudni, mikor kell használni a "hívás" vagy az "alkalmaz" szót a JavaScript-kódban.

A „call” és az „apply” közötti különbségek felfedezése a JavaScriptben

JavaScript Frontend példa

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

A "hívás" és az "alkalmaz" teljesítményének megértése a JavaScriptben

JavaScript Frontend példa

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

A "call" és az "apply" összehasonlítása a függvényhíváshoz JavaScriptben

Node.js háttérprogram példa

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

Választás a "hívás" és az "alkalmaz" között a JavaScript-fejlesztésben

JavaScript teljesítményelemzés

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

Mélyebb betekintés a JavaScript-módszerek hívásába és alkalmazásába

Az alapvető használatukon túl Function.prototype.call() és Function.prototype.apply() számos speciális használati esettel rendelkezik, amelyek javíthatják JavaScript programozását. Az egyik ilyen használati eset a metóduskölcsönzés, amikor az egyik objektum metódusait egy másik objektum kölcsönzi. Ez különösen akkor hasznos, ha olyan objektummal rendelkezik, amelynek egy másik objektumból származó metódust kell használnia öröklődés nélkül. Használata call() és apply(), ideiglenesen kölcsönözhet metódusokat és végrehajthatja azokat különböző objektumok kontextusában, ezáltal javítva a kód újrafelhasználhatóságát és csökkentve a redundanciát.

Egy másik fontos szempont a felhasználás apply() variadic függvényekhez – változó számú argumentumot elfogadó függvényekhez. Ha van egy argumentumtömbje, és át kell adnia azokat egy olyan függvénynek, amely nem fogad el tömböt, apply() rendkívül praktikussá válik. Másrészről, call() hasznos lehet olyan forgatókönyvekben, ahol a teljesítmény kritikus, és az argumentumok száma ismert és rögzített. Ezen árnyalatok megértésével a fejlesztők megalapozottabb döntéseket hozhatnak a használat időpontjáról call() ellen apply(), optimalizálva a kódjukat az olvashatóság és a teljesítmény szempontjából.

Gyakran Ismételt Kérdések a JavaScript-hívással és -jelentkezéssel kapcsolatban

1. Mi az elsődleges különbség a között call() és apply()?
2. call() érveket egyénileg fogad el, míg apply() tömbként fogadja el az argumentumokat.
3. Tud call() és apply() felcserélhetően használható?
4. Igen, ugyanazt az eredményt érhetik el, de a választás az érvek felépítésétől függ.
5. Mikor érdemes inkább apply() felett call()?
6. Használat apply() ha argumentumtömbje vagy változó számú argumentuma van.
7. Van teljesítménybeli különbség a között call() és apply()?
8. A teljesítménybeli különbségek a legtöbb esetben elhanyagolhatóak, de call() fix számú argumentummal valamivel gyorsabb lehet.
9. Hogyan call() és apply() kezelni a this kontextus?
10. Mindkét módszer kifejezetten beállítja a this kontextus a függvényhíváshoz.
11. Használhatom call() és apply() konstruktor függvényekkel?
12. Nem, nem alkalmasak konstruktor függvényekre, mivel nem hoznak létre új példányokat.
13. Mire jó néhány speciális használati eset call() és apply()?
14. Hasznosak a metódusok kölcsönzéséhez és a variadic függvények kezeléséhez.
15. Hogyan működik call() javítja a kód olvashatóságát?
16. call() világosabbá teszi a függvényhívást, ha az argumentumok száma ismert és rögzített.
17. Tud apply() ismeretlen számú argumentumot kezelni?
18. Igen, apply() ideális olyan függvényekhez, amelyeknek változó számú argumentumot kell kezelniük.

Utolsó gondolatok a függvényhívási módszerekről

Befejezésül mindkettő call és apply A metódusok hatékony eszközei a JavaScriptben a megadott függvények meghívására this érték. A köztük lévő választás nagymértékben attól függ, hogy hogyan kíván argumentumokat adni a függvénynek. Míg call a legjobb, ha rögzített számú érvvel foglalkozik, apply tömbök vagy ismeretlen számú argumentum kezelésekor világít. Ezen árnyalatok megértése segít hatékonyabb és olvashatóbb kód írásában, ami végső soron jobb JavaScript programozási gyakorlatokhoz vezet.