Знакомство с Call и Apply в JavaScript

Введение

Когда мы используем вызов и применение, мы обычно работаем с объектами. Используя эти методы, мы можем наследовать методы объекта от одного объекта к другому. Так, например, если метод был определен для первого объекта, он может быть вызван вторым объектом.

Хотя концепции, лежащие в основе call и apply, схожи, важно отметить, что при использовании call вы передаете параметры явно, тогда как при применении вы передаете второй аргумент в виде массива. Давайте посмотрим на пример, чтобы прояснить это. Начнем с рассмотрения метода call.

Вызов

const person = {
  details: function() {
    return `My name is ${this.name}`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob));
//Returns ---> My name is Bob

В приведенном выше примере мы создаем объект person. Затем внутри объекта мы создаем метод с именем details. Этот метод возвращает литерал шаблона с именем человека. Затем мы создаем еще один объект с именем bob, bob имеет свойство name и набор значений. Наконец, в журнале консоли мы возвращаем результат вызова метода details с помощью метода call() и передаем bob в качестве параметра. Если бы мы не использовали здесь метод call, то получили бы следующий результат.

console.log(person.details)
'My name is undefined'

Таким образом, с помощью вызова мы можем использовать метод details, определенный для объекта person, но для нашего отдельного объекта bob. this относится к тому, что вы передаете в качестве параметра для вызова. Если мы зарегистрируем в консоли значение this внутри метода details, мы можем быть в этом уверены.

const person = {
  details: function() {
    console.log(this)
    //returns ---> {name: 'Bob'}
    return `My name is ${this.name}`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob));
//Returns ---> My name is Bob

Применять

Apply очень похож на call, за исключением того, что мы должны передать массив в качестве второго параметра. Давайте начнем с добавления параметра в наш первоначальный пример, в котором использовался call.

const person = {
  details: function(age) {
    return `My name is ${this.name} and I am ${age} years old.`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.call(bob, 12));
//Returns ---> My name is Bob and I am 12 years old.

В приведенном выше примере мы теперь устанавливаем параметр для age в методе details, который используется в литерале шаблона. Когда мы используем метод вызова, мы передаем значение этого аргумента после передачи объекта bob. Если бы мы использовали apply, нам нужно было бы использовать здесь массив. Это показано в примере ниже.

const person = {
  details: function(age) {
    return `My name is ${this.name} and I am ${age} years old.`
  }
}
const bob = {
  name: "Bob"
}
console.log(person.details.apply(bob, [12]));
//Returns ---> My name is Bob and I am 12 years old.

Если бы мы не передали массив при использовании применения, мы получили бы следующую ошибку.

Uncaught TypeError: CreateListFromArrayLike called on non-object
    at <anonymous>:9:28

Надеюсь, вам понравилась эта статья. Пожалуйста, не стесняйтесь публиковать любые комментарии, вопросы или отзывы и подписывайтесь на меня, чтобы получать больше контента!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.