Обложка канала

Frontender's notes

Годные заметки, новости, видео и интересные статьи для Frontend разработчиков.

Frontender's notes

5 лет назад
Открыть в
​​📖Ключевое слово «this» в методах🖥️

Как правило, методу объекта необходим доступ к информации, которая хранится в объекте, чтобы выполнить с ней какие-либо действия (в соответствии с назначением метода).
Например, коду внутри user.sayHi() может понадобиться имя пользователя, которое хранится в объекте user.

Для доступа к информации внутри объекта метод может использовать ключевое слово this.
Значение this – это объект «перед точкой»,
который использовался для вызова метода.
Например:

let user = {
name: "Джон",
age: 30,

sayHi() {
// this - это "текущий объект"
alert(this.name);
}

};

user.sayHi(); // Джон
Здесь во время выполнения кода
user.sayHi() значением this
будет являться user (ссылка на объект user).
Технически также возможно получить
доступ к объекту без ключевого слова this,
ссылаясь на него через внешнюю переменную (в которой хранится ссылка на этот объект):


let user = {
name: "Джон",
age: 30,

sayHi() {
alert(user.name); // используем переменную "user" вместо ключевого слова "this"
}

};

…Но такой код будет ненадёжным. Если мы решим скопировать ссылку на объект user в другую переменную, например, admin = user, и перезапишем переменную user чем-то другим, тогда будет осуществлён доступ к неправильному объекту при вызове метода из admin.
Это показано ниже:

let user = {
name: "Джон",
age: 30,

sayHi() {
alert( user.name ); // приведёт к ошибке
}

};


let admin = user;
user = null; // обнулим переменную для наглядности, теперь она не хранит ссылку на объект.

admin.sayHi(); // Ошибка! Внутри sayHi() используется user, которая больше не ссылается на объект!.

Если мы используем this.name
вместо user.name внутри alert,
тогда этот код будет работать.