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

Что это это?

thisссылается на объект, выполняющий текущую функцию.

Приведем несколько простых правил.

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

Давайте посмотрим на пример.

const song = {
    title: 'abc',
    play() {
        console.log(this);
    }
}

Здесь я создал объект песни со свойством title и методом воспроизведения. И зарегистрируйте thisв методе воспроизведения. Давайте вызовем этот метод.

song.play();

Вот результат; наш объект песни находится на консоли.

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

song.pause = function() {
    console.log(this);
}
song.pause();

Мы снова увидим объект песни на консоли, потому что снова this ссылается на объект песни в методе паузы. Поскольку пауза является частью объекта. Это пример первого правила.

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

// Define a regular function;
function playSong(){
    console.log(this);
}
// Call playSong function
playSong();

когда мы регистрируем this в playSong(); функция на консоли; мы увидим this как глобальный объект в Node.js и объект окна в консоли браузера.

Теперь, что произойдет, если мы используем функцию-конструктор. Мы вызываем функцию конструктора, используя ключевое слово new. Итак, давайте изменим функцию playSong на функцию-конструктор.

Вместо объекта окна this ссылается на новый объект Song. Когда мы используем новый оператор, он создает пустой объект {} и в функции конструктора this указывает на этот пустой объект {}. Итак, давайте повторим, когда вы используете обычную функцию, this по умолчанию будет ссылаться на глобальный объект. Это может быть либо объект окна в браузере, либо глобальный объект в Node.js.

Возьмем еще один интересный пример:

В приведенном выше коде я добавил свойство певцов к методу showSingers(). После вызова showSingers() он печатает имя певца в консоли. Но что, если я хочу отобразить название для каждого певца. Мы можем изменить код этой строкой console.log(this.title, singer)

Теперь, если вы посмотрите на результат, this.title будет undefined.

Отлаживаем, выводим только this . ВОЗ; this ссылается на объект окна. Но в идеале мы находимся внутри объекта song, поэтому this должно быть ссылкой на объект song. К сожалению, это не так. Что происходит внутри метода?

Причина в том, что мы используем this внутри функции обратного вызова, и это обычная функция, переданная в цикл forEach. У нас есть только два (showSingers, play) метода с объектом song. Итак, поскольку функция, переданная в цикл forEach, является обычной функцией, this ссылается на глобальный объект.

Давайте посмотрим, как решить эту проблему. У нас есть несколько различных решений этой проблемы. В данном конкретном случае метод forEach имеет два параметра. Первая — это функция обратного вызова, а вторая — thisArg. Это означает, что мы можем передать объект в качестве второго параметра, и this будет ссылаться на этот объект внутри функции обратного вызова. Итак, вот окончательный код.

Но не все методы JavaScript позволяют нам передавать аргумент this. Есть и другие решения таких проблем. Это другая тема для обсуждения. Скоро напишу на эту тему.

Вывод

Итак, теперь, я надеюсь, вы понимаете, как ссылки на this меняются в другом контексте. Вы можете запомнить концепцию this с помощью приведенных ниже пунктов.

  1. По умолчанию this ссылается на глобальный объект. В случае браузера это относится к объекту окна, а в случае среды Node.js — к глобальному.
  2. Если метод объявлен в объекте и вызывается, то this относится к этому объекту.
  3. Если функция объявлена ​​как функция-конструктор и вызывается с использованием ключевого слова new, то this будет ссылаться на {} пустой объект.
  4. Если this используется внутри функции обратного вызова, то по умолчанию this будет ссылаться на глобальный объект. Вы должны ссылаться this явно на текущий объект.

Я надеюсь, что приведенные выше пункты помогут вам понять this.

Быть в курсе! Спасибо.