THIS (JavaScript)

Bugun siz ushbu maqolani o‘qish orqali JavaScript’dagi mashhur this kalit so‘zi haqida qo‘shimcha va chuqur bilimga ega bo‘lasiz degan umiddaman.
Agar bu maqolani interview’dan oldin o‘qiyotgan bo‘lsangiz — demak, bu siz uchun katta omad 🙂

Maqolada this haqida imkon qadar to‘liq to‘xtalib o‘tiladi. Kamchiliklar bo‘lsa, oldindan uzr.

Get Ruzmatboy Jumaniyozov’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Shuningdek, maqolada call / apply / bind va constructor function tushunchalari ham yoritilgan. Agar bu mavzular bilan hali tanish bo‘lmasangiz, quyidagi maqolalar orqali o‘rganib olishingiz mumkin:

• call / apply / bind
• constructor function

this nima?

this — kalit sozi qayerda ishlatishga qarab oziga har-hil qiymat olish mumkin. keling bu halotlarni birga korib chiqamiz

1. this global scope’da

console.log(this);

oddiy rejimda → window , 'use strict' da → undefined

2. this object ichida (method)

const user = {
  name: 'Ali',
  sayHi() {
    console.log(this.name);
  },
};

user.sayHi(); // Ali

this → method chaqirilgan object (user)

3. this HTML element’da (event)

<button onclick="console.log(this)">Click</button>

this → o‘sha HTML element (button)

4. this oddiy function ichida

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

test();

strict mode’siz → window, strict mode’da → undefined

5. this arrow function ichida

const obj = {
  name: 'Ali',
  sayHi() {
    const arrow = () => {
      console.log(this.name);
    };
    arrow();
  },
};

obj.sayHi(); // Ali

Arrow function o‘zining this ini yaratmaydi, u this ni tashqi (lexical) scope’dan oladi. arrow function context yaratmaydi , this closure kabi ishlaydi.

6. call, apply, bind bilan this boshqarish

Oddiy function’da this ni qo‘lda berish mumkin:

function sayHi() {
  console.log(this.name);
}

const user = { name: 'Ali' };
sayHi.call(user);  // Ali
sayHi.apply(user); // Ali

bind esa yangi function qaytaradi:

const bound = sayHi.bind(user);
bound(); // Ali

call / apply / bind arrow function’da ishlamaydi.

7. this constructor function ichida

function User(name) {
  this.name = name;
}

const u1 = new User('Ali');

BU yerda new bo‘sh object yaratadi va this → o‘sha yangi object, this.name = name orqali qiymat biriktiriladi.

Xulosa qilib aytganda, this — JavaScript’dagi eng ko‘p chalkashlik keltirib chiqaradigan, lekin tushunib olingandan keyin eng qulay mexanizmlardan biridir. Agar siz this qachon va qanday aniqlanishini bilsangiz, call, apply, bind, arrow function va constructor function’lar siz uchun muammo bo‘lmaydi.