Знакомство с 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. Заинтересованы в Взлом роста? Ознакомьтесь с разделом Схема.