Ключевое слово this является своеобразным и сбивает с толку многих разработчиков.

Этот урок также доступен на YouTube:

Таким образом, ключевое слово this представляет контекст вызова. И что я имею в виду? Это означает, что вызывающий контекст — это объект, который вызывает функцию. Давайте рассмотрим несколько примеров. Обещаю, после прочтения этой статьи все станет ясно.

Примеры

Сценарий 1: ключевое слово this в методе объекта.

const car = {
    colour: "red",
    brand: "abc",
    drive: function(){
        console.log(this);
    }
}
car.drive(); // expect the car object.

Наш объект car имеет метод drive. Все, что он делает, это распечатывает this.

Теперь мы вызываем функцию drive из car. Это означает, что наш контекст вызова — car. Другими словами, ключевое слово this при запуске drive() будет ссылаться на car.

Сценарий 2: ключевое слово this в обычном вызове функции.

Как насчет вызова функции без контекста?

function heya(){
    console.log(this); // expect the 'window' object
}
heya();

Здесь мы вызываем heya() самостоятельно. Если это произойдет, по умолчанию JavaScript установит контекст как глобальный контекст, т.е. объект window. Итак, this будет глобальным объектом window.

Сценарий 3: ключевое слово this во внутренней функции.

Давайте немного изменим наш автомобильный объект.

const car = {
    colour: "red",
    brand: "abc",
    drive: function(){
        function inner(){
            console.log(this);
        }
        inner();
    }
}
car.drive(); // expect the 'window' object

Теперь вам может быть интересно, почему мы видим объект «окно»?? Как и в сценарии 2, мы вызываем функцию inner() самостоятельно. Следовательно, JavaScript устанавливает контекст как глобальный контекст, и мы видим this как глобальный объект window.

Сценарий 4: Извлечение метода объекта

const car = {
    colour: "red",
    brand: "abc",
    drive: function(){
        console.log(this);
    }
}
const boom = car.drive;
boom(); // expect the 'window' object

Ок, успокойся. Теперь в этом сценарии мы переназначаем свойство привода новой переменной boom. Затем мы вызываем boom самостоятельно. Как и в сценариях 2 и 3, JavaScript установит контекст как глобальный. Поэтому мы видим объект window.

В итоге:

Вот несколько быстрых советов, как быстро узнать, к чему относится ключевое слово this:

  1. Спросите себя, что вызывает функцию.
  2. Если функция вызывается объектом, то ключевое слово this будет ссылаться на объект.
  3. Если мы вызовем функцию отдельно, JavaScript установит контекст как глобальный контекст, который в браузере является объектом window.

Связующий контекст.

Иногда может быть полезно вручную определить контекст вызова функции. JavaScript позволяет нам сделать это, используя метод bind() для функции. Вот пример:

const fruit = {
    name: "apple",
    colour: "red",
}
const heya = function(){
    console.log(this);
}
const bound = heya.bind(fruit);
bound(); // expect 'fruit' object

Метод bind вернет нам модифицированную версию исходной функции, в которой контекст был вручную установлен на некоторое предопределенное значение. Здесь мы привязываем контекст heya к fruit. Таким образом, когда мы запускаем bound(), ключевое слово this будет ссылаться на fruit.

Нет ограничений на то, что мы можем привязать к функции. Мы можем связать любой тип данных, string, number, array, object или boolean.

// ...
const bound2 = heya.bind("abc");
bound2();  // expect the string "abc"