В этой статье мы более подробно рассмотрим ключевое слово this
в JavaScript. Это одно из тех ключевых слов, которое сбивает с толку многих разработчиков. Честно говоря, я лично долгое время не мог понять ключевое слово this
. Я подумал, что должен написать на this
и сделать так, чтобы другим было комфортно. Поэтому я собираюсь сделать это очень простым для вас, чтобы вы даже могли легко объяснить это любому.
Что это это?
this
ссылается на объект, выполняющий текущую функцию.
Приведем несколько простых правил.
- Если функция является методом объекта,
this
ссылается на сам объект. - В противном случае, если функция является обычной функцией, что означает, что она не является частью объекта,
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
с помощью приведенных ниже пунктов.
- По умолчанию
this
ссылается на глобальный объект. В случае браузера это относится к объекту окна, а в случае среды Node.js — к глобальному. - Если метод объявлен в объекте и вызывается, то
this
относится к этому объекту. - Если функция объявлена как функция-конструктор и вызывается с использованием ключевого слова
new
, тоthis
будет ссылаться на{}
пустой объект. - Если
this
используется внутри функции обратного вызова, то по умолчаниюthis
будет ссылаться на глобальный объект. Вы должны ссылатьсяthis
явно на текущий объект.
Я надеюсь, что приведенные выше пункты помогут вам понять this
.
Быть в курсе! Спасибо.