Вызов функции Javascript и применение методов

В Javascript даже функции считаются объектами, хотя это немного странно, а объекты могут иметь некоторые методы, поэтому функции также имеют методы.
У функций есть 3 интересных метода: вызов, применение и связывание.
Поэтому в этом посте я объясню их и расскажу о разнице между ними.

Напоминание: Ключевое слово this внутри функции

Я хотел напомнить вам, что специальное ключевое слово this внутри функций или методов относится к их владельцу.
Например, если у нас есть класс с методом и экземпляр этого класса, то когда мы вызываем метод, ключевое слово this будет относиться к этому экземпляру, потому что он является его владельцем в данный момент.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  speak(words) {
    console.log(`${this.name} says ${words}`);
  }
}

const person = new Person("John", 30);

person.speak("Hello"); // John says Hello

this здесь относится к объекту person, потому что в данном случае это владелец, поэтому this.name будет John.

Метод вызова

Давайте сначала поговорим о методе call, проще говоря, он позволяет вам изменить значение ключевого слова this внутри той функции, в которой вы вызвали метод.

пример

Давайте создадим отдельную функцию speak, которая будет делать то же самое, что и метод внутри класса

function speak(words) {
  console.log(`${this.name} says ${words}`);
}

По умолчанию ключевым словом this внутри отдельной функции будет объект window в среде браузера или объект gloabl в среде nodejs.
Теперь давайте вручную установим его на объект person, чтобы он мог правильно регистрировать имя пользователя

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

function speak(words) {
  console.log(`${this.name} says: ${words}`);
}

const person = new Person("John", 30);

speak.call(person, "Hello"); // John says: Hello

теперь, когда мы использовали метод call, this будет ссылаться на объект person, переданный в метод call (любые args, которые принимает функция, могут быть переданы после значения this).

Метод apply

метод apply делает то же самое, что и call, с той лишь разницей, что args функции будут передаваться в виде массива, а не отдельных args методу apply

пример

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

function speak(word1, word2) {
  console.log(`${this.name} says: ${word1} ${word2}`);
}

const person = new Person("John", 30);

speak.apply(person, ["Hello", "World"]); // John says: Hello World

Метод bind

bind также позволяет сделать то же самое, но он не вызывает функцию, а возвращает новую функцию, которая использует указанное ключевое слово this.

Пример

const johnSpeak = speak.bind(person, "Hello World"); // John says: Hello World

johnSpeak(); // John says: Hello World