Javascriptdagi 'This' kalit so'zi
Ushbu maqolada biz JavaScript-dagi "bu" kalit so'zi haqida gaplashamiz. "Bu" JavaScript-da juda muhim tushuncha bo'lib, uni yangi boshlanuvchilar uchun tushunish qiyin bo'lishi mumkin, lekin men uchun qanday ishlashini tushunganingizdan so'ng, u juda foydali bo'lishi mumkin.
Bu nima'? JavaScript-da "bu" global ob'ekt, funktsiya yoki funktsiya usuli bo'lgan ob'ekt bo'lishi mumkin bo'lgan joriy ob'ektni baholaydi. Bu kod bajarilayotgan joriy kontekstga murojaat qilishning bir usuli.
U qanday ishlaydi? "Bu" qiymati funktsiya qanday chaqirilganiga bog'liq. JavaScript-da funktsiyani chaqirishning to'rtta usuli mavjud va ularning har biri "bu" qiymatiga ta'sir qiladi.
- Global kontekst - Funktsiya global kontekstda chaqirilganda, "bu" global ob'ektga ishora qiladi. Veb-brauzerda global ob'ekt oyna ob'ektidir.
// Global context function that() { console.log(`${this} is equal to global context in ex 1`) }; that();
2. Metod konteksti - Funktsiya ob'ektning usuli sifatida chaqirilganda, "bu" funksiya usuli bo'lgan ob'ektga ishora qiladi. Boshqacha qilib aytganda, "bu" funksiya chaqirilganda nuqtaning chap tomonidagi ob'ektga o'rnatiladi.
Misol kodida biz ex2Button.addEventListener()
yordamida tugma elementiga hodisa tinglovchisini qo'shish orqali ex2Button
ob'ektida usulni aniqlayapmiz.
Tugma bosilganda, hodisa tinglovchisi funksiyasi bajariladi va funksiya ichidagi this
hodisani ishga tushirgan ex2Button
obyektiga ishora qiladi. Bu this
ga ex2Button
ob'ektining xususiyatlariga bevosita kirish va boshqarish imkonini beradi. Bu erda men matnnithis.textContent = 'Clicked!'
bilan o'zgartirdim
// Method context const ex2Button = document.querySelector('#ex2Button'); ex2Button.addEventListener('click', function() { let newTextContent = this.textContent; this.textContent = newTextContent === 'Click Me!' ? 'Clicked' : 'Click Me!'; });
3. Konstruktor konteksti - Agar funktsiya "yangi" kalit so'zi bilan konstruktor sifatida chaqirilganda, "bu" yangi yaratilgan ob'ektga ishora qiladi. Konstruktor funksiyasidan foydalangan holda yangi ob'ekt yaratganingizda, konstruktor funksiyasi ichidagi this
kalit so'zi doimo yaratilayotgan yangi ob'ektga ishora qiladi.
Quyidagi konstruktor funksiyasida this
dan foydalanib, biz MyItem
obyektining yangi namunalarini yaratamiz. Ob'ektning har bir nusxasi o'zining item
xususiyatiga ega bo'ladi, bu ob'ekt yaratilganda yaratilgan yangi ro'yxat elementiga ishora qiladi.
// Constructor context class MyItem { constructor(text) { this.item = document.createElement('li'); this.item.textContent = text; document.querySelector('#myList').appendChild(this.item); } } const ex3Button = document.querySelector('#ex3Button'); ex3Button.addEventListener('click', function() { const myText = "New list item!"; new MyItem(myText); });
4. Qo'ng'iroq konteksti - Funktsiya "chaqiruv" usuli bilan chaqirilganda, "bu" usulga birinchi argument sifatida uzatiladigan ob'ektga ishora qiladi.
Tugma bosilganda, introduce
funksiyasi (bu haqiqatda ob'ektdagi usul) call
usuli yordamida ob'ekt sifatida userTwo
bilan chaqiriladi. Bu this
nazarda tutilgan ob'ektni userOne
dan userTwo
ga o'zgartiradi.
// Call context for example 4 const userOne = { name: 'Clinton', introduce: function() { return (`My name is ${this.name} in example 4.`); } } const userTwo = { name: 'Alan' } const user = document.querySelector('.user'); user.textContent = userOne.introduce(); const ex4Button = document.querySelector('#ex4Button'); ex4Button.addEventListener('click', () => { user.textContent = userOne.introduce.call(userTwo); });
Xulosa qilib aytadigan bo'lsak, JavaScript-dagi "bu" kalit so'zi joriy ob'ektga ishora qiladi va uning qiymati funksiya qanday chaqirilganiga bog'liq. "Buni" tushunish JavaScript-da samarali va xatosiz kod yozish uchun muhimdir. Umid qilamanki, ushbu maqola "bu" tushunchasini tushuntirishda foydali bo'ldi. O'qiganingiz uchun tashakkur!