Что такое THIS в JavaScript? Как работает call, apply, bind?

Кто мы такие❓

Elbrus Coding Bootcamp - это первая и самая крупная в России школа программирования в формате интенсивного обучения. Студенты 12 недель оффлайн или 15 недель онлайн практикуются на реальных проектах и кодят с утра до вечера. Обучение проходит по направлениям JavaScript и Data Science.

В буткемпе студенты решают задачи от реальных работодателей, что особенно важно в постоянно развивающейся сфере IT. 3 месяца оффлайн / 4 месяца онлайн обучения с 9:00 до 19:00 5 дней в неделю, ежедневная работа с кодом, плюс два проекта, командный и персональный, которые студенты защищают на второй и третьей, заключительной, фазе обучения — и вот на выходе уже есть полноценное портфолио, которое можно показать при устройстве на работу.

По окончании обучения всех ждет карьерная неделя, где карьерный коуч помогает подготовиться к собеседованию, подтянуть софт-скиллы и собрать резюме, с которыми 93% студентов находят работу в течение трех месяцев после окончания буткемпа. Также после завершения Elbrus Bootcamp есть возможность получить диплом ДПО.

Приходите на день открытых дверей в онлайне и познакомьтесь с форматом буткемп. Это лучший способ научиться программировать, сменить работу и увеличить свой доход.

Напишите или позвоните нам, чтобы узнать, как поступить в ближайшую группу:

☎️ [phone]

Использовалось в видео (музыка/видео):

[АндрейЛ-дт]

всего 9 минут, а стало понятнее, чем от кучи роликов по часу

[Zikyzi]

О, никогда не видел более понятного объяснения, чем в этом видео. Спасибо!

[demimurych]

00:00:15 *this это ссылка на контекст*
Открываем официальную спецификацию языка JavaScript:

*1) Читаем - Глава 9.4 Execution Context*
Которая содержит определение того, что такое контекст в JavaScript
Понимаем, что *this в JS никогда и не при каких обстоятельства не ссылается на контекст*

*2) Читаем - Глава 13.2.1 The this keyword*
Которая содержит определение того, что такое this в JavaScript и какие данные с ним связываются.
Еще раз убеждаемся, что this в JavaScript не ссылается на контекст. И никогда не ссылался.
Понимаем что this - это идентификатор, который присутствует во всех функциях, выполнение которых приводит к созданию Environment, свойство [[ThisBindingStatus]] которых не lexical.

То есть в настоящее время, идентификатор this, всегда присутствует во всех функциях, кроме тех которые заданы как Arrow Function.

Идентификатор - это сущность которая определяется при помощи var/let/const.

Если перевести все это с официального языка, на язык которым говорит автора видео - this это обычная const переменная, которая *всегда присутствует в любой функции кроме arrow function*

То есть, если происходит выполнения кода внутри функции, заданной как function, то у Вас ВСЕГДА есть заранее предопределенный идентификатор const this = ...


*Правила связывания this с данными*
1. Использование new expression с функцией конструктором приводит к тому, что внутри этой функции this будет связан с пустым обьектом. Например:
function doThing() {
[...]
}
new doThing();
приведет к тому, что внутри doThing, идентификатор this будет связан с пустым обьектом

2. Использование методов call apply bind приводит к тому, что this будет связан с тем что заявлено в этих методах

3. Использование dot нотации, this будет связан с тем что идет перед dot. Например:
var theObj = {
name: "demimurych",
sayName: function() {
console.log('this: ', this);
}
}
theObj.sayName(); // Вызов в дот нотации. this будет связан с theObj
var doThing = theObj.sayName;
doThing(); // Вызов НЕ в дот нотации, this будет связан, в зависимости от strict, либо с глобальным обьектом либо с undefined



*Вместо ИГОГО*
1) Контекст в JavaScript ни при каких обстоятельствах не может быть связан с this.
*this это не контекст*

2) this это идентификатор, который всегда задан на момент выполнения Normal Function

3) То с чем связан this, зависит от того, КАК вызвана normal function

4) Всем рекомендуется хотя бы раз в жизни прочесть спецификацию

[ЮрийПлисковский-щщ]

После такого классного видео, вопросов про то как работает this быть не должно. Лайк.

[-Vladimir--]

Лучшее объяснение, очень просто и доступно без всякой мути. Лайк 100%.

[maksims.]

Класс, очень понятно) Если что в VSC: schift+alt+{стрелка вниз} - скопировать текущую строку вниз; ctrl+/ -

[ThomasBlack]

Очень понятное объяснение.
После просмотра множества роликов, у меня всё больше складывается ощущение, что сложность освоения программирования - это сложность объяснений. Почти везде объясняют или сложно или путанно.

Я уверен, всё можно объяснить на пальцах и с простыми примерами. А когда человек поймёт суть, тогда уже можно углубляться. А не сразу наваливать всё, что известно по теме на три часа.

[Vse-po-Faktu]

Посмотрел раз 5, повторил, создал сам аналогичные объекты и пришло понимание! Спасибо!

[НайтиСебя-ущ]

Спасибо! Вы отличный учитель! Все понятно.

[asifabbasov]

По больше таких подробных разборов пожалуйста 🙏
Спасибо за разбор this

[maksymkostiv]

Очень круто объяснили спасибо. Но со звуком какая-то беда .

[РоманНекрасов-ым]

четко пояснил, даже я понял)
спасибо!

[stan]

Поймал разработчик золотую рыбку:
Рыбка:"У тебя есть 3 желания".
Программист:"Хочу дракона".
Рыбка:"О, пожалуйста, будь реалистом".
Программист:"Тогда я гочу понимать ключевое слово this в JS".
Рыбка:"Дракона какого цвета ты хочешь?"

[hsha]

Очень понятно и просто, но о многом он не рассказал, к примеру что в node и браузере разные глобальные области видимости

[bjol_Dg]

ужасно когда звук - моно... спасибо за ролик, круто объяснил

[Евгения-зсц]

Супердоступно и понятно, спасибо большое!

[Antioss_A]

Самое понятное объяснение! Спасибо большое

[greatfellowdmc]

Эльбрус. Совы. 2020. Нужно было сделать доклад на 1 минуту, потом питчить его перед одногруппниками. Один из саааамых лютейших фэйлов в моей жизни в плане выступления перед публикой)) Жутко волновался, на половине доклада впал в дичайшую панику, сказад "извините, что-то я себя плохо чувствую" и тупо ушёл))) Когда пришёл в себя, только Тарас мне написал, спросил как я, рассказал подобную историю из своей жизни, поговорил со мнрй) Поддержал, одним словом) Не хочу сказать, что все остальные преподаватели и персонал в Эльбрусе плохие, ни в коем случае! В Эльбрусе все офигенные) Но в тот момент Тарас был сууупер офигенным!)
P.S.: следующий доклад на 15 минут запитчил хорошо))

[ИльфатГ]

Привет, Тарас! А где применяется эти перемены?)

[jerzymatusewizc]

а я не допер про bind но call и apply стали понятнее