Народ, всем привет. Сегодня вкратце и простыми словами я попробую объяснить тем, кто активно изучает JavaScript и хочет разобраться во всех его аспектах, что такое this и в каких случаях его лучше применять. Сам по себе JS просто необходим при написании хороших динамических сайтов. Хотя на практике, я по секрету скажу, довольно редко использую this в своей работе, но понимание того, что это и с чем его едят будет довольно полезно. Особенно при работе с объектами.
Ведь по своей сути this это ничто иное, как ссылка на какой-то текущий объект, понятный из контекста. И вся ценность его как раз в том, что это объект не постоянный и меняется, скажем, от функции или обстоятельств, в котором он применяется. Если объяснять на простом примере, то вот есть задачи, или скажем, методы какого то объекта, например, молока:
- milk.налить_в_стакан
- milk.выпить_залпом
- milk.поставить_в_холодильник
Если я перепишу все тоже самое, но с использованием this, получив..
- this.налить_в_стакан
- this.выпить_залпом
- this.поставить_в_холодильник
..то, в зависимости от контекста и объекта, я могу применять эти методы как к объекту «молоко», так и к объекту «сок», или «квас».
This всегда ссылается на какой-то объект, и если просто в браузере прописать команду console.log(this) то вам выдаст глобальный объект окна windows. Если мы пропишем this внутри объекта, то он будет ссылаться на сам это объект:
var dog = {
name: 'Cheems',
breed: 'Shiba Inu',
intro: function(){
console.log(this);
}
};
dog.intro(); - он выведет сам объект dog и его методы name, bread и intro
Чаще всего this используют в конструкторах объектов, неких шаблонах, по котором в дальнейшем создаются сами объекты (экземпляры объектов, новая ссылка в памяти на объект).
function Dog () {
this.name = 'Cheems' – this будет указывать на новый созданный объект
}
const firstDog = new Dog() // создаём новый объект Dog
firstDog.name === 'Cheems'
console.log(firstDog.name);
Такой подход удобен тем, что с помощью this и единственной функции-конструктора мы можем создавать множество однотипных объектов с определённым набором методов, привязанных к данному конкретному объекту. Скажем:
function Car(brand, model, year) {
// используем this, чтобы установить свойства объектов
this.brand = brand;
this.model = model;
this.year = year;
}
// создаём новые объекты с помощью функции-конструктора
const car1 = new Car('Toyota', 'Camry', 2022);
const car2 = new Car('Honda', 'Accord', 2021);
const car3 = new Car('Ford', 'Mustang', 2020);
console.log(car1);
console.log(car2);
console.log(car3);
Важно, когда в JS включён строгий режим, то правила меняются, и вызвать this просто в браузере с ссылкой на объект window уже не получится, там нужно будет жестко привязывать this к объекту. Но это уже отдельный разговор.
Второй случай частого использования this - это стрелочные функции, так как сама по себе она не создаёт свой контекст исполнения, а берёт его из своей внешней функции, в которой эта стрелочная функция определена.
function greetWaitAndAgain() {
console.log(`Hi, ${this.name}!`)
setTimeout(() => {
console.log(`Hi again, ${this.name}!`) // в данном случае this стрелочной функции идет за поиском контекста в функцию выше, в корой она определена
})
}
const user = { name: 'Barbie' } // создаём объект
user.greetWaitAndAgain = greetWaitAndAgain; // добавляем метод к объекту
user.greetWaitAndAgain()
Если бы мы использовали обычную функцию, то контекст бы потерялся и this уже не указывало на объект user, и тогда пришлось бы использовать непрямой вывоз.