8.1 Metoda call
Metody call, bind i apply w JavaScript odgrywają kluczową rolę w zarządzaniu
kontekstem wykonywania funkcji, pozwalając ustawić wartość this przy ich wywoływaniu. Te metody są szczególnie
przydatne podczas pracy z obiektami i programowaniem funkcyjnym, oferując potężne narzędzia do elastycznego zarządzania kodem. Spójrzmy na każdą z nich bardziej szczegółowo i przeanalizujmy różne przykłady ich użycia.
Metoda call wywołuje funkcję z określoną wartością this i argumentami przekazanymi przez przecinek.
Dzięki temu możemy jednoznacznie określić kontekst, w którym funkcja powinna być wykonywana.
Składnia:
func.call(thisArg, arg1, arg2 ...);
Przykład:
W tym przykładzie funkcja greet jest wywoływana z kontekstem person, co pozwala jej korzystać
z właściwości name obiektu person.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.call(person, 'Hello', '!'); // Output: Hello, John!
8.2 Metoda apply
Metoda apply jest podobna do call, ale przekazuje argumenty w formie tablicy. Jest to wygodne, gdy mamy
tablicę argumentów, którą chcemy przekazać do funkcji.
Składnia:
func.apply(thisArg, [argsArray]);
Przykład:
Ten przykład jest analogiczny do poprzedniego, ale argumenty są przekazywane w formie tablicy.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.apply(person, ['Hello', '!']); // Output: Hello, John!
8.3 Metoda bind
Metoda bind tworzy nową funkcję, która przy wywołaniu ustala określoną wartość this.
Argumenty przekazane do bind są ustalane w nowej funkcji. To pozwala tworzyć funkcje z stałym kontekstem.
Składnia:
const boundFunc = func.bind(thisArg, arg1, arg2 ...);
Przykład:
W tym przykładzie tworzona jest nowa funkcja boundGreet, która zawsze będzie wykonywana w kontekście obiektu person.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
const boundGreet = greet.bind(person, 'Hello');
boundGreet('!'); // Output: Hello, John!
8.4 Szczegółowa analiza użycia metod
1. Użycie call do dziedziczenia metod:
Metoda call jest często używana do dziedziczenia metod jednego obiektu przez inny. Pozwala to
zapożyczyć metody i właściwości bez potrzeby jawnego dziedziczenia.
W tym przykładzie konstruktor Product jest wywoływany w kontekście obiektu Food, co pozwala
dziedziczyć właściwości name i price.
function Product(name, price) {
this.name = name;
this.price = price;
}
function Food(name, price, category) {
Product.call(this, name, price);
this.category = category;
}
const cheese = new Food('Cheese', 5, 'Dairy');
console.log(cheese); // Output: Food { name: 'Cheese', price: 5, category: 'Dairy' }
2. Użycie apply do przekazywania tablicy argumentów:
Metoda apply jest wygodna, gdy chcemy przekazać tablicę argumentów funkcji, która przyjmuje pojedyncze parametry.
W tym przypadku tablica numbers jest przekazywana do funkcji sum jako oddzielne argumenty.
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // Output: 6
3. Użycie bind do tworzenia funkcji o stałym kontekście:
Metoda bind pozwala tworzyć funkcje z stałym kontekstem, co jest szczególnie przydatne przy pracy z eventami i callbackami.
W tym przykładzie funkcja getX jest powiązana z obiektem module za pomocą bind, co pozwala poprawnie uzyskać wartość x przy wywołaniu funkcji.
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // Output: undefined
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX()); // Output: 42
8.5 Przykłady z życia codziennego
Przykład użycia call do zapożyczania metody tablicy:
W tym przykładzie metoda forEach tablicy jest używana dla obiektu arguments za pomocą call.
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
printArguments(1, 2, 3); // Output: 1, 2, 3
Przykład użycia apply do łączenia tablic:
W tym miejscu metoda push jest używana do łączenia dwóch tablic za pomocą apply.
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
Array.prototype.push.apply(array1, array2);
console.log(array1); // Output: [1, 2, 3, 4, 5, 6]
Przykład użycia bind do tworzenia funkcji częściowej:
Funkcja double jest tworzona z ustalonym pierwszym argumentem 2 za pomocą bind.
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // Output: 10
GO TO FULL VERSION