Функциядагы контекст деген эмне?

JavaScriptтеги функцияда (this) контекстти аныктоо анын кандайча чакырылганына жараша болот, ал аны кайда жарыяланганына эмес. Ал функциянын тиешелүү объектине же аны чакырган объектке шилтеме кылат.

Контекстти аныктоо жолдору:

1. Глобалдык контекст: Функциядан тышкары же функция так объект менен чакырылбаса (this браузерде глобалдык объект window болот, Node.jsде global, же strict режимде undefined).

   // Браузерде
   console.log(this === window); // чын
   
   function showContext() {
     console.log(this);
   }
   
   showContext(); // window
   

2. Объект контексти (метод): Эгер функция объекттин методу катары чакырылса (obj.method()), анда this ошол объектке шилтеме кылат.

   const user = {
     name: 'Alice',
     greet: function() {
       console.log(`Салам, мен ${this.name}`);
     }
   };
   
   user.greet(); // Салам, мен Alice
   

3. Курулмочу контекст: Функция new менен чакырылса (new MyClass()), жаңы объект түзүлөт жана this ошол жаңы объектке шилтеме кылат.

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

4. Ачык көрсөтүлгөн контекст: call, apply жана bind методдору this маанисин так белгилөөгө мүмкүндүк берет.

   • call(thisArg, arg1, arg2, ...): функцияны белгилүү this менен жана аргументтер менен чакырат.
   • apply(thisArg, [argsArray]): функцияны белгилүү this менен жана массив түрүндөгү аргументтер менен чакырат.
   • bind(thisArg, arg1, arg2, ...): жаңы функция түзүп, анын this мааниси белгиленет.

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

5. Жебе функциялары: Жебе функциялар өзүнүн this-и жок. Алар лексикалык чөйрөдөн this-ди мурас катары алат (алар аны аныктоочу жерде).

   const anotherUser = {
     name: 'David',
     sayHello: function() {
       const innerArrow = () => {
         console.log(`Салам жебе, ${this.name}`);
       };
       innerArrow(); // `this` бул жерде - anotherUser, sayHello'дон мурас алган
     },
     sayHelloBad: () => { // объекттин методдору үчүн жаман пракси
         console.log(`Салам жебе, ${this.name}`);
     }
   };
   
   anotherUser.sayHello(); // Салам жебе, David
   
   // Браузерде, strict режимден тышкары
   anotherUser.sayHelloBad(); // Салам жебе, undefined (this - window)
   

Контекстти түшүнүү JavaScript объекттери, методдору жана иш-чара иштетүүчүлөрү менен иштөөдө маанилүү.