Funksiyada kontekst nima?

JavaScript funksiyasida (this) kontekst funksiyaning qanday chaqirilganiga qarab belgilanadi, uning e'lon qilingan joyiga emas. U funksiyaga tegishli bo'lgan yoki uni chaqirayotgan ob'ektni ko'rsatadi.

Kontekstni aniqlash usullari:

1. Global kontekst: Funktsiyalar tashqarida yoki funksiyani aniq ob'ektsiz chaqirilganda (this brauzerda window, Node.jsda global, yoki strict rejimda undefined bo'ladi).

   // Brauzerda
   console.log(this === window); // true
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Ob'ekt konteksti (metod): Agar funksiya ob'ekt metod sifatida chaqirilsa (obj.method()), this funksiyaning ichida bu ob'ektga ishora qiladi.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Salom, mening ismim ${this.name}`);
     }
   };
   
   user.greet(); // Salom, mening ismim Alice
   

3. Konstruktor konteksti: new so'zi bilan chaqirilganda (new MyClass()), yangi ob'ekt yaratiladi va konstruktor ichidagi this bu yangi ob'ektga ishora qiladi.

   function Person(name) {
     this.name = name;
   }
   
   const person1 = new Person('Bob');
   console.log(person1.name); // Bob
   

4. Aniq kontekst belgilash: call, apply va bind metodlari yordamida this qiymatini aniq belgilash mumkin.

   • call(thisArg, arg1, arg2, ...): Funksiyani this thisArg bilan va argumentlar bilan chaqiradi.
   • apply(thisArg, [argsArray]): Funksiyani this thisArg bilan va argumentlar massiv sifatida chaqiradi.
   • bind(thisArg, arg1, arg2, ...): Yangi funksiya qaytaradi, uning this qiymati belgilangan.

   function displayInfo(age) {
     console.log(`${this.name} ${age} yoshda.`);
   }
   
   const person = { name: 'Charlie' };
   
   displayInfo.call(person, 30); // Charlie 30 yoshda.
   displayInfo.apply(person, [35]); // Charlie 35 yoshda.
   
   const bondedDisplayInfo = displayInfo.bind(person, 40);
   bondedDisplayInfo(); // Charlie 40 yoshda.
   

5. Arrow funksiyalar: Arrow funksiyalarining o'z thisi yo'q. Ular thisni ularni aniqlagan leksikal muhitdan meros oladi.

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Salom arrow bilan, ${this.name}`);
       };
       innerArrow(); // `this` bu yerda anotherUser, sayHello'dan meros olgan
     },
     sayHelloBad: () => { // ob'ekt metodlari uchun yomon amaliyot
         console.log(`Salom arrow bilan, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Salom arrow bilan, David
   
   // Brauzerda, strict rejimdan tashqarida
   anotherUser.sayHelloBad(); // Salom arrow bilan, undefined (`this` - window)
   

Kontekstni tushunish JavaScriptda ob'ektlar, metodlar va voqea ishlovchilar bilan to'g'ri ishlash uchun juda muhimdir.