Zrozumienie różnicy między „call” i „apply” w JavaScript

Metody wywoływania funkcji w JavaScript

JavaScript oferuje kilka sposobów wywoływania funkcji, z których dwa to `Function.prototype.call()` i `Function.prototype.apply()`. Obie metody służą do wywoływania funkcji z określoną wartością „this” i argumentami, różnią się jednak sposobem przekazywania tych argumentów.

Celem tego artykułu jest zbadanie różnic między „zadzwoń” i „zastosuj”, ich wpływu na wydajność oraz scenariuszy, w których jedno może być preferowane nad drugim. Na koniec będziesz lepiej wiedział, kiedy używać „call” lub „apply” w kodzie JavaScript.

Odkrywanie różnic między „call” i „apply” w JavaScript

Przykład frontendu JavaScript

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

Zrozumienie wydajności „call” i „apply” w JavaScript

Przykład frontendu JavaScript

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

Porównanie „call” i „apply” w celu wywołania funkcji w JavaScript

Przykład backendu Node.js

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

Wybieranie pomiędzy „zadzwoń” i „zastosuj” w rozwoju JavaScript

Analiza wydajności JavaScript

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

Głębszy wgląd w wywoływanie i stosowanie metod w JavaScript

Oprócz podstawowego zastosowania, Function.prototype.call() I Function.prototype.apply() masz kilka zaawansowanych przypadków użycia, które mogą ulepszyć twoje programowanie JavaScript. Jednym z takich przypadków użycia jest zapożyczanie metod, gdy metody z jednego obiektu są zapożyczane przez inny. Jest to szczególnie przydatne, gdy masz obiekt, który musi użyć metody z innego obiektu bez dziedziczenia. Za pomocą call() I apply(), możesz tymczasowo wypożyczać metody i wykonywać je w kontekście różnych obiektów, zwiększając w ten sposób możliwość ponownego wykorzystania kodu i zmniejszając redundancję.

Kolejnym ważnym aspektem, który należy wziąć pod uwagę, jest użycie apply() w przypadku funkcji variadic — funkcje akceptujące zmienną liczbę argumentów. Kiedy masz tablicę argumentów i musisz przekazać je do funkcji, która nie akceptuje tablicy, apply() staje się niezwykle przydatny. Z drugiej strony, call() może być przydatny w scenariuszach, w których wydajność jest krytyczna, a liczba argumentów jest znana i stała. Rozumiejąc te niuanse, programiści mogą podejmować bardziej świadome decyzje dotyczące tego, kiedy używać call() przeciw apply(), optymalizując swój kod zarówno pod kątem czytelności, jak i wydajności.

Często zadawane pytania dotyczące dzwonienia i aplikowania w JavaScript

1. Jaka jest podstawowa różnica pomiędzy call() I apply()?
2. call() przyjmuje argumenty indywidualnie, natomiast apply() akceptuje argumenty jako tablicę.
3. Móc call() I apply() być używane zamiennie?
4. Tak, mogą osiągnąć ten sam wynik, ale wybór zależy od struktury argumentów.
5. Kiedy powinienem preferować apply() nad call()?
6. Używać apply() gdy masz tablicę argumentów lub zmienną liczbę argumentów.
7. Czy jest różnica w wydajności pomiędzy call() I apply()?
8. Różnice w wydajności są w większości przypadków znikome, ale call() może być nieco szybsze ze stałą liczbą argumentów.
9. Jak to zrobić? call() I apply() zająć się this kontekst?
10. Obie metody jawnie ustawiają this kontekst wywołania funkcji.
11. Mogę uzyć call() I apply() z funkcjami konstruktora?
12. Nie, nie nadają się do funkcji konstruktora, ponieważ nie tworzą nowych instancji.
13. Do czego służą zaawansowane przypadki użycia call() I apply()?
14. Są przydatne do zapożyczania metod i obsługi funkcji wariadycznych.
15. Jak call() poprawić czytelność kodu?
16. call() sprawia, że ​​wywołanie funkcji jest jaśniejsze, gdy liczba argumentów jest znana i stała.
17. Móc apply() obsługiwać nieznaną liczbę argumentów?
18. Tak, apply() jest idealny dla funkcji, które muszą obsługiwać zmienną liczbę argumentów.

Końcowe przemyślenia na temat metod wywoływania funkcji

Podsumowując, jedno i drugie call I apply Metody to potężne narzędzia JavaScript służące do wywoływania funkcji z określonym this wartość. Wybór między nimi zależy w dużej mierze od tego, w jaki sposób chcesz przekazać argumenty do funkcji. Chwila call jest najlepszy, gdy mamy do czynienia ze stałą liczbą argumentów, apply świeci podczas obsługi tablic lub nieznanej liczby argumentów. Zrozumienie tych niuansów pomaga w pisaniu bardziej wydajnego i czytelnego kodu, co ostatecznie prowadzi do lepszych praktyk programowania JavaScript.