JavaScript — это объектно-ориентированный язык программирования, который имеет множество встроенных методов для работы с объектами. Среди этих методов есть методы call(), apply() и bind(), которые позволяют нам заимствовать и манипулировать методами от одного объекта к другому или управлять ключевым словом this при вызове функции. В этой статье мы подробно рассмотрим эти три метода и предоставим фрагменты кода, иллюстрирующие их работу.
call() Метод
Метод call() используется для вызова функции с заданным значением this и аргументами, предоставленными индивидуально. Это позволяет нам вызывать функцию, как если бы она была методом объекта, даже если она не принадлежит этому объекту. Вот пример:
const grettings = {
firstName: "John",
lastName: "Doe",
hello: function () {
console.log(`Hello ${this.firstName} ${this.lastName}, how you doin!`);
},
};
const person1 = {
firstName: "Priyam",
lastName: "Mondal",
};
const person2 = {
firstName: "Bishnu",
lastName: "Gorai",
};
grettings.hello(); //Hello John Doe, how you doin!
grettings.hello.call(person1); //Hello Priyam Mondal, how you doin!
grettings.hello.call(person2); //Hello Bishnu Gorai, how you doin!
В данном коде greetings — это объект со свойствами firstName, lastName и методом hello. Метод hello использует ключевое слово this для ссылки на свойства объекта greetings для создания и регистрации приветственного сообщения на консоли.
Метод call() используется для вызова метода hello() объекта greetings с контекстом person1 и person2. При вызове greetings.hello.call(person1) ключевое слово this в методе hello() теперь будет относиться к объекту person1, а не к объекту greetings, в результате чего появится приветственное сообщение «Привет, Приям Мондал, как дела!» регистрируется в консоли. Точно так же при вызове greetings.hello.call(person2) ключевое слово this в методе hello() теперь будет относиться к объекту person2, а не к объекту greetings, что приведет к появлению приветственного сообщения «Привет, Бишну Горай, как дела!» регистрируется в консоли.
Таким образом, метод call() позволяет вам явно установить значение this при вызове метода, что может быть полезно для повторного использования методов с разными объектами или контекстами.
apply() Метод
Метод apply() подобен методу call(), но принимает аргументы в виде массива. Этот метод полезен, когда у вас есть переменное количество аргументов, которые вы хотите передать функции. Вот пример:
const numbers = [1, 2, 3, 4, 5];
const sum = function() {
return Array.from(arguments).reduce((acc, curr) => acc + curr);
}
console.log(sum.apply(null, numbers)); // Output: 15
В приведенном выше примере у нас есть массив чисел и функция sum(), которая принимает переменное количество аргументов и возвращает их сумму. Мы можем использовать метод apply() для передачи элементов массива numbers в качестве аргументов функции sum. Метод apply() принимает два аргумента: первый аргумент — это контекст, используемый как this внутри функции (в данном случае мы передаем null, потому что нам не нужно использовать какой-либо конкретный контекст), а второй аргумент — это массив аргументов. перейти к функции. Наконец, функция sum возвращает сумму чисел.
bind() Метод
Метод bind() используется для создания новой функции с тем же телом, что и исходная функция, но с фиксированным значением this. Это позволяет нам установить значение this функции, независимо от того, как она вызывается. Вот пример:
const person = {
name: "John",
age: 30,
greet: function () {
console.log(`Hello, my name is ${this.name}, and I am ${this.age} years old.`);
},
};
const greetWithNewContext = person.greet.bind({ name: "Jane", age: 25 });
person.greet(); // Output: "Hello, my name is John, and I am 30 years old."
greetWithNewContext(); // Output: "Hello, my name is Jane, and I am 25 years old."
В этом примере у нас есть объект с именем person с тремя свойствами: name, age и greet, который представляет собой метод, который записывает приветственное сообщение в консоль, используя свойства name и age объекта.
Затем мы создаем новую функцию с именем greetWithNewContext, используя метод bind(), который фиксирует контекст метода greet для нового объекта с другим именем и возрастом.
Когда мы вызываем исходный метод greet с использованием объекта person, он регистрирует приветственное сообщение с исходными значениями name и age. Однако когда мы вызываем функцию greetWithNewContext, она регистрирует приветственное сообщение с новыми значениями name и age, которые мы установили с помощью метода bind().
Хорошо! поначалу это может показаться ошеломляющим и запутанным, поскольку все эти три метода делают одно и то же, устанавливая контекст ключевого слова this внутри функции, но различаются тем, как они выполняют эту задачу и как их можно использовать.
Вот краткий обзор различий между тремя методами:
call(): методcall()используется для вызова функции с заданным значениемthisи аргументами, предоставленными как отдельные аргументы. Первый аргумент методаcall()— это объект, который будет использоваться в качестве значенияthisвнутри функции, а любые дополнительные аргументы передаются функции как отдельные аргументы.apply(): методapply()похож на методcall(), но принимает аргументы в виде массива, а не отдельных аргументов. Первый аргумент методаapply()— это объект, который будет использоваться в качестве значенияthisвнутри функции, а второй аргумент — это массив аргументов, которые необходимо передать функции.bind(): методbind()создает новую функцию с тем же телом, что и исходная функция, но с фиксированным значениемthis. Методbind()возвращает новую функцию, которую можно вызвать позже с теми же аргументами, что и исходная функция, но с фиксированным значениемthis. Первый аргумент методаbind()— это объект, который будет использоваться в качестве значенияthisвнутри функции.
Таким образом, основное различие между методами call(), apply() и bind() заключается в том, как они передают аргументы функции и как они устанавливают значение this внутри функции. call() и apply() используются для немедленного вызова функции с заданным значением this и аргументами, а bind() используется для создания новой функции с фиксированным значением this, которую можно вызвать позже.
