Какой будет контекст у функции созданной через function declaration

1️⃣ Как кратко ответить

Контекст функции, созданной через function declaration, определяется в момент вызова функции. По умолчанию, в строгом режиме (strict mode), контекстом будет undefined, а в нестрогом — глобальный объект (window в браузере). Контекст можно изменить с помощью методов call, apply или bind.

2️⃣ Подробное объяснение темы

Контекст в JavaScript — это значение this внутри функции. Он определяет, к какому объекту функция имеет доступ через this. Контекст функции, созданной через function declaration, зависит от того, как и где эта функция вызывается.

Function Declaration

Function declaration — это способ объявления функции, который начинается с ключевого слова function, за которым следует имя функции, список параметров в круглых скобках и тело функции в фигурных скобках.

function greet() {
    console.log(this);
}

Контекст по умолчанию

1. В нестрогом режиме (non-strict mode): Если функция вызывается без явного указания контекста, this будет ссылаться на глобальный объект. В браузере это объект window.

   function showContext() {
       console.log(this);
   }
   ​
   showContext(); // В нестрогом режиме выведет объект window
   

2. В строгом режиме (strict mode): Если функция вызывается без явного указания контекста, this будет undefined.

   'use strict';
   ​
   function showContext() {
       console.log(this);
   }
   ​
   showContext(); // В строгом режиме выведет undefined
   

Изменение контекста

Контекст функции можно изменить с помощью методов call, apply и bind.

• call и apply: Эти методы вызывают функцию с указанным значением this.

  function showContext() {
      console.log(this);
  }
  ​
  const obj = { name: 'Frontend' };
  ​
  showContext.call(obj); // Выведет объект obj
  showContext.apply(obj); // Выведет объект obj
  

• bind: Этот метод возвращает новую функцию, у которой this привязан к указанному значению.

  function showContext() {
      console.log(this);
  }
  ​
  const obj = { name: 'Frontend' };
  ​
  const boundFunction = showContext.bind(obj);
  boundFunction(); // Выведет объект obj
  

Применение

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

const button = document.querySelector('button');
​
button.addEventListener('click', function() {
    console.log(this); // Выведет элемент button
});

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