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.

  1. 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!