<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

Данный курс научит Вас программировать на языке JavaScript, который крайне желательно знать любому уважающему себя программисту. Курс состоит из 8 разделов, в которых Вы с нуля освоите этот язык и сможете создавать самые разные программы для самых разных задач любой сложности. В курсе Вы получите всю необходимую теоретическую часть, а также увидите массу практических примеров, в том числе, и из моей практики.

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Ключевое слово this в JavaScript

Ключевое слово this в JavaScript

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

Особенностью JS является то, что методы не обязательно должны принадлежать какому-то объекту. Из-за этого в JS ключевое слово this ссылается не на текущий объект, а на контекст вызова функции. Контекст вызова - это то, что окружает функцию, в каких условиях она вызывается.

function showThis(){
    console.log(this);
}
showThis();

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

Ключевое слово this в JavaScript.

Пример глобального использования this

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

function showViewportSize(){
    console.log(this.innerWidth + 'x' + this.innerHeight);
}
showViewportSize();
// в консоль выведутся размеры рабочей области 1094x150

Пример #1 локального использования this

Ключевое слово this ссылается на текущий объект, в контексте которого функция была вызвана. Создадим новый объект, внутри которого поместим свойства и метод. На новый объект ссылается переменная figure.

let figure = {
    name: "circle",
    color: "red",
    show: function(){
        console.log(this);
    }
};
figure.show();

Теперь контекстом вызова функции стал объект.

Ключевое слово this в JavaScript.

Пример #2

Создадим объект user, которому присвоим свойство name и метод SayHello, который при вызове метода sayHello у данного объекта, будет выводить в консоль слово Hello плюс имя пользователя.

let user = {
    name: "Alex",
    sayHello: function(){
        console.log('Hello' + ' ' + user.name);
    }
};
user.sayHello();
// выведет в консоль Hi Alex

Добавлять свойство метода в объект не обязательно сразу. Это можно сделать отдельно, обратившись к имени объекта.

let user = {
    name: "Alex"
}
user.sayHello = function(){
    console.log('Hello' + ' ' + user.name);
}
user.sayHello();
// Hi Alex

Альтернативный код делает тоже самое - выводит в консоль приветствие. Однако, что не так в обоих вариантах написания кода и причем тут this? Оба способа написания кода будут правильные, но не оптимальные. Это жестко привязывает название объекта к свойству. При создании похожего нового объекта, нам придется дублировать код, что в программировании считается дурным тоном.

Поэтому для лучшей гибкости и доступу к текущему объекту из метода, следует использовать ключевое слово this (этот). Вместо названия объекта, обращаясь к свойству объекта, мы ставим слово ключевое слово this и получаем такой же результат. С той разницей, что метод sayHello вызывается в контексте объекта user.

console.log('Hello' + ' ' + user.name); // было
console.log('Hello' + ' ' + this.name); // стало

Теперь можно без проблем, вызвать метод sayHello в контексте другого объекта. Код функции стал более универсальным.

let user2 = {
    name: "Anna"
}
user2.sayHello = function(){
    console.log('Hello' + ' ' + this.name);
}
user2.sayHello()
; // Hi Alex

На практике this часто используется в обработчиках событий, чтобы увидеть элемент, на котором вызван данный обработчик.

Заключение

В отличие от PHP / Java / Python, ключевое слово this в JavaScript, не привязывается ни к какому объекту, а зависит только от контекста вызова. С ключевым словом this стало возможным, запускать одну и ту же функцию в контексте разных объектов.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.