8.1 Метод call
Методи call, bind та apply в JavaScript відіграють ключову роль у керуванні контекстом виконання функцій, дозволяючи задавати значення this під час виклику функцій. Ці методи особливо корисні при роботі з об'єктами та функціональним програмуванням, надаючи потужні інструменти для гнучкого керування кодом. Давай розглянемо кожен із них докладніше та розберемо різні приклади їх використання.
Метод call викликає функцію із заданим значенням this і аргументами, переданими через кому. Це дозволяє нам явно вказувати контекст, у якому має виконуватися функція.
Синтаксис:
func.call(thisArg, arg1, arg2 ...);
Приклад:
У цьому прикладі функція greet викликається з контекстом person, що дозволяє їй використовувати властивість name об'єкта person.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.call(person, 'Привіт', '!'); // Output: Привіт, John!
8.2 Метод apply
Метод apply схожий із call, але передає аргументи у вигляді масиву. Це зручно, коли у нас є масив аргументів, який ми хочемо передати функції.
Синтаксис:
func.apply(thisArg, [argsArray]);
Приклад:
Цей приклад аналогічний попередньому, але аргументи передаються у вигляді масиву.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
greet.apply(person, ['Привіт', '!']); // Output: Привіт, John!
8.3 Метод bind
Метод bind створює нову функцію, яка при виклику встановлює задане значення this. Аргументи, передані у bind, фіксуються в новій функції. Це дозволяє створювати функції з постійним контекстом.
Синтаксис:
const boundFunc = func.bind(thisArg, arg1, arg2 ...);
Приклад:
У цьому прикладі створюється нова функція boundGreet, яка завжди виконуватиметься в контексті об'єкта person.
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'John' };
const boundGreet = greet.bind(person, 'Привіт');
boundGreet('!'); // Output: Привіт, John!
8.4 Детальний розбір використання методів
1. Використання call для успадкування методів:
Метод call часто використовується для успадкування методів одного об'єкта іншим. Це дозволяє запозичувати методи та властивості без необхідності явного успадкування.
У цьому прикладі конструктор Product викликається в контексті об'єкта Food, що дозволяє успадкувати властивості name та 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('Сир', 5, 'Молочні продукти');
console.log(cheese); // Output: Food { name: 'Сир', price: 5, category: 'Молочні продукти' }
2. Використання apply для передачі масиву аргументів:
Метод apply зручний, коли ми хочемо передати масив аргументів функції, яка приймає окремі параметри.
У цьому прикладі масив numbers передається функції sum як окремі аргументи.
function sum(a, b, c) {
return a + b + c;
}
const numbers = [1, 2, 3];
console.log(sum.apply(null, numbers)); // Output: 6
3. Використання bind для створення функції з фіксованим контекстом:
Метод bind дозволяє створювати функції з постійним контекстом, що особливо корисно при роботі з подіями та callback-функціями.
Тут функція getX прив'язується до об'єкта module за допомогою bind, що дозволяє коректно отримувати значення x при виклику функції.
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 Приклади з реального життя
Приклад використання call для запозичення методу масиву:
У цьому прикладі метод forEach масиву використовується для об'єкта arguments за допомогою call.
function printArguments() {
Array.prototype.forEach.call(arguments, function(item) {
console.log(item);
});
}
printArguments(1, 2, 3); // Output: 1, 2, 3
Приклад використання apply для об'єднання масивів:
Тут метод push використовується для об'єднання двох масивів за допомогою 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]
Приклад використання bind для створення часткової функції:
Функція double створюється з фіксованим першим аргументом 2 за допомогою bind.
function multiply(a, b) {
return a * b;
}
const double = multiply.bind(null, 2);
console.log(double(5)); // Output: 10
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ