JavaScript и это

JavaScript был выпущен в 1995 году, то есть на момент написания этой статьи ему исполнилось 24 года. Он прошел путь от маленького игрушечного языка до языка, используемого почти во всех областях ИТ. Мы используем его в веб-приложениях, мобильных приложениях, микроконтроллерах и многих других. Но в JavaScript все еще есть некоторые основные функции, с которыми многие до сих пор борются. Одним из них является то, что это такое, к чему относится это ключевое слово в JavaScript и как оно себя ведет? Вот почему я попытаюсь объяснить это в этом посте.

Введение

Если бы мы посмотрели на другие языки, такие как Java, объяснение того, что это такое, было бы намного проще. Можно сказать, что это просто ссылка на текущий объект. JavaScript немного сложнее и зависит от того, кто его использует, где и каким образом. Я мог бы дать другое объяснение, как и почему. Но я хочу, чтобы все было просто. Что я сделаю в этом посте, так это покажу пару примеров различных ситуаций, которые, я надеюсь, сделают все яснее.

Глобальный охват

Во-первых, начнем с самого простого. Что произойдет, если вы зарегистрируете это где-нибудь в глобальном масштабе? Что там? В общем, это глобальный контекст вашего окружения. В браузере это объект окна.

консоль.log(this); // объект окна

Функции как метод объекта

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

const obj = {
    num: 1,
    whatIsThis: function() {
        console.log(this); // obj {num: 1, whatIsThis: ƒ}
    }
};
obj.whatIsThis();

Глобальная функция

Хорошо, если у нас есть функция, принадлежащая объекту, это и есть этот объект. Но что, если функция не принадлежит объекту, а определена в глобальной области видимости. Ну, он все еще принадлежит какому-то объекту. Глобальный. А в случае браузера это объект окна.

function globalFunction() {
    console.log(this); // window
}
globalFunction();

Глобальная функция как новый экземпляр

Одна вещь, которую мы можем сделать с функциями JavaScript, — это использовать для них ключевое слово new. Это будет рассматривать их как конструктор для нового объекта и возвращать новый экземпляр. В этом случае, если бы мы вывели этот новый экземпляр для this. Это то, что широко использовалось до ES6, потому что оно дало разработчикам более объектно-ориентированный способ структурирования кода.

function FunctionObject() {
    console.log(this); // FunctionObject {}
}
new FunctionObject();

Функция стрелки как метод

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

const obj = {
    num: 1,
    whatIsThis: () => {
        console.log(this); // window, not obj
    }
};
obj.whatIsThis();

Заключение

Это был очень короткий пост о некоторых примерах, что это такое в каком случае. Сегодня у нас не так много ситуаций, когда это будет очень необходимо, но до того, как были введены ES6 и классы, нам приходилось использовать разные приемы для структурирования нашего кода. Создание новых экземпляров из функций, использование ключевого слова this внутри них, чтобы показать только некоторые части, и наследование прототипов были теми трюками. Кроме того, всегда хорошо знать знания, потому что рано или поздно вы окажетесь в ситуации, когда будете чесать затылок, но, надеюсь, этот пост поможет вам в этот момент.

Примеры кода, используемые в этом посте, также можно найти в моем репозитории GitHub.

Чтобы узнать больше, вы можете подписаться на меня в Twitter, LinkedIn или GitHub.