Javascriptda 'this' kalit so'zi
Tags: javascript, webdev, beginners, programming
Published: 2022-04-26 11:15:29

Funksiyadagi `this` kalit so'zi javascriptda boshqa tillarga qaraganda boshqacharoq ishlaydi va shuningdek, ushbu kalit so'z `strict mode` ya'ni qat'iy rejimdagi kodda ham oddiy javascript kodga nisbatan boshqacha ishlaydi.

Ko'pincha, `this` kalit so'zining qiymati funksiya qanday chaqirilshiga qarab belgilanadi.Kodni ishga tushirish vaqtida shunchaki qiymat berish orqali uni qiymatini belgilab bo'lmaydi va uning qiymati har safar funksiya chaqirilganda har xil bo'lishi mumkin. ES5'dan boshlab funksiya qay holatda chaqirilishidan qat'iy nazar, funksiyadagi `this` kalit so'zi uchun `bind()` metodi orqali qiymat berish taklif qilindi. ES2015'dan boshlab esa o'zining `this` kalit so'ziga ega bo'lmagan `arrow` funksiya tanishtirildi.

## Sintaksis:

```js
This
```

#### Qiymati:

Oddiy Javascript kodda(non-strict mode) har doim obyekt uchun `reference` bo'la oladi holos, qat'iy rejim([strict mode](https://dev.to/dawroun/strict-mode-in-javascript-2ihg))da esa har qanday qiymatga ega bo'lishi mumkin.

## Tavsifi:

### Global kontekst:

Global kontekstda(har qanday funksiyadan tashqarida) `this` kalit so'zi, qat'iy rejimda yoki yo'qligidan qat'iy nazar global obyektga (`window`) ishora qiladi.

```js
// Brauzerlarda window obyekti global obyekt hisoblanadi
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "ilmHub";
console.log(window.b)  // "ilmHub"
console.log(b)         // "ilmHub"
```

> eEslatma: Qaysi  kontekstdan kod yozishingizdan qat'iy nazar, `globalThis` xususiyatidan foydalanib, har doim global obyektni osongina olishingiz mumkin.

### Funksiya Konteksti:

Funksiya ichida `this` kalit so'zining qiymati funksiya qanday chaqirishga bog'liq.

Quyidagi kod qat'iy rejimda bo'lmagani uchun va `this`'ning qiymati funksiya chaqirilish paytida belgilanmaganligi tufayli, `this` avtomatik tarzda brauzerdagi global obyekt bo'lmish `window`'ga ishora qiladi.

```js
function f1() {
  return this;
}

// brauzerda:
f1() === window; // true

// Node'da:
f1() === globalThis; // true
```

Ammo, qat'iy rejimda esa agar kod ishga tushishni boshlaganda `this` kalit so'ziga qiymat berilmagan bo'lsa, quyida holatdagidek, `undefined` ya'ni aniqlanmagan qiymatga teng bo'ladi.

```js
function f2() {
  'use strict'; // qat'iy rejim
  return this;
}

f2() === undefined; // true
```

> Eslatma: Ikkinchi misolda `this` `undefined` qiymatga ega bo'ldi, chunki `f2` obyektning metodi yoki property'si sifatida emas, aksincha to'g'ridan to'g'ri chaqirildi(Masalan: `window.f2()`). Brauzerlar ilk bor qat'y rejimni ishlata boshlaganda yuqoridagi xususiyatni amalga oshira olmagan. Natijada ular xato tarzda `window` obyektga qaytgan.

Funktsiyani chaqirayotganda `this`'ga qiymat berish  uchun pastda ko'rsatiladigan misollardagi kabi `call()` yoki `apply()` dan foydalaning:

### Class konteksti:

Classlar ham qaysidir ma'noda funksiya bo'lganligi sababli `this`'ning class va funksiyalar bilan ishlashi bir-biriga o'xshash. Lekin ayrim farqli jihatlarga ega ularni quyida ko'rib chiqamiz:

Class konstruktorida `this` ham oddiy obyektdir. Classdagi barcha statik bo'lmagan metodlar `this`ning prototipga qo'shib ketadi:

```js
class Example {
  constructor() {
    const proto = Object.getPrototypeOf(this);
    console.log(Object.getOwnPropertyNames(proto));
  }
  first(){}
  second(){}
  static third(){}
}

new Example(); // ['constructor', 'first', 'second']
```

> Eslatma: Statik metodlar `this`'ning prototipi emas. Ular classning prototipi.


....Davomi bor