Определите «это»

Проще говоря, «this» - это ключевое слово JavaScript, которое всегда относится к объекту, объект может варьироваться в зависимости от того, как объект вызывает функцию. «This» всегда будет ссылаться на объект, и если он вызывается функцией, содержащейся в глобальной области видимости, то значением этой ссылки будет объект «w indow».

function print() {
    console.log(this)
}
print() // Window {window: Window, self: Window, document: document, name: "", location: Location, …}

Простая функция, регистрирующая «это». После вызова foo () this смотрит на владельца функции и сохраняет этот объект как значение, в данном случае это глобальный объект.

window.print()

Если бы мы вызывали эту функцию с объектом окна, мы бы зарегистрировали аналогичные результаты. Итак, давайте рассмотрим несколько примеров того, как мы можем использовать «это» и как это может принести нам пользу.

В вызове метода «this» будет установлено для объекта, которому принадлежит метод, как и раньше, однако, если мы создадим объект и поместим «this» внутри этого объекта, мы сможем получить доступ к объекту, аналогичному атрибут.

let apple = {
  color: 'red',
  getColor: function() {
      return this.color
  }
}
console.log(apple.getColor()) // red

Это также известно как неявное связывание, потому что мы явно не сообщаем JavaScript, что такое «это», вместо этого движок знает, что нужно захватить объект, вызывающий метод.

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

И call, и apply похожи и принимают то, на что this указывает, в качестве своего первого аргумента, а затем передает дополнительные аргументы (call использует запятые для разделения каждого аргумента и apply использует массив аргументов)

function student() {
  console.log(this.name)
}
let newStudent = {
   name: 'Brain',
   grade: 10,
}
student.call(newStudent) // Brian

Теперь bind полезен, потому что он создает новую функцию, которая постоянно присваивает this значение при первом вызове. Мы можем установить для этой новой функции значение, вызвать это значение и получить «this», которое использовалось для создания newStudent в этом случае.

function student() {
  console.log(this.name)
}
let newStudent = {
   name: 'Brain',
   grade: 10,
}
student = student.bind(newStudent)
student() // Brian

Использование подобного «этого» может сделать создание новых объектов очень простым и быстрым. «New», которое является другим ключевым словом JavaScript, будет создавать новые объекты, когда функция-конструктор вызывается таким образом, «this» будет указывать на этот новый объект.

Обратите внимание, когда мы используем функции-конструкторы, имя функции пишется с заглавной буквы.

function Pizza(topping) {
   this.topping = topping
}
let pineapples = new Pizza('Pineapples')
let mushrooms = new Pizza('Mushrooms')
console.log(pineapples.topping) // Pineapples
console.log(mushrooms.topping) // Mushrooms

В заключение, использование this, а также методов функции call (), apply () и bind () может быть мощным инструментом для изучения и использования в любом проекте JavaScript. У них есть собственный набор правил, и понимание их функциональности может значительно улучшить ваши навыки работы с JavaScript. Красота JavaScript заключается в том, что он предлагает множество способов решения проблем, а также возможность использовать новые подходы и продолжать находить в них пользу.