JavaScript-ში ფუნქციის კონტექსტი საიდან მოდის?

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

• Глобалдык чөйрө: Функциядан тышкары, this глобалдык обьекске шилтеме кылат (баракчада window, Node.jsте global). Катуу режимде ('use strict') бул учурда this undefined болот.

  // Баракчада
  console.log(this); // window
  
  // Node.jsте
  console.log(this); // global
  

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

  const obj = {
    name: 'Obj',
    method: function() {
      console.log(this.name);
    }
  };
  obj.method(); // Obj
  

• "Жөнөкөй" функция чакыруу: Жөнөкөй функция чакырганда (метод эмес), this нестрог режимде глобалдык обьекске шилтеме кылат. Катуу режимде this undefined болот.

  function greet() {
    console.log(this);
  }
  greet(); // window (нестрог режимде) же undefined (катуу режимде)
  

• Куруучу (new): Функция new менен чакырылса, ал куруучу катары иштейт. this внутри функции ссылается на новый, только что созданный объект.

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

• call, apply, bind методдору: Бул методдор функциянын this маанисин так аныктоого мүмкүндүк берет.

  • call жана apply функцияны дароо чакырып, this биринчи аргумент катары өткөрөт. call калган аргументтерди жеке-жеке кабыл алат, apply – массив түрүндө.
  • bind жаңы функцияны кайтарат, анын this мааниси ар дайым берилген биринчи аргументке "байланышкан" болот.

  const anotherObj = { name: 'Another Obj' };
  
  function displayContext() {
    console.log(this.name);
  }
  
  displayContext.call(anotherObj); // Another Obj
  displayContext.apply(anotherObj); // Another Obj
  
  const boundFunction = displayContext.bind(anotherObj);
  boundFunction(); // Another Obj
  

• Жебе функциялары: Жебе функциялары өзүнүн this-и жок. Алар this маанисин лексикалдык чөйрөдөн "тутушат", ал жерде алар жарыяланган. Бул алардын методдордун ичинде же DOM окуяларында колдонуусуна пайдалуу.

  const objWithArrow = {
    name: 'Arrow Obj',
    method() {
      const arrowFunc = () => {
        console.log(this.name); // `this` `method`тен (objWithArrow) алынат
      };
      arrowFunc();
    }
  };
  objWithArrow.method(); // Arrow Obj
  
  // Жөнөкөй функция менен салыштырып көрүңүз
  const objWithRegular = {
    name: 'Regular Obj',
    method() {
      const regularFunc = function() {
        console.log(this); // `this` window же undefined болот (катуу режимге жараша) мындай контекстте чакырганда
      };
      regularFunc();
    }
  };
  objWithRegular.method(); // window (же undefined)
  

Контекстти аныктоо — JavaScriptтин негизги өзгөчөлүктөрүнүн бири, жана бул эрежелерди түшүнүү функциялар жана объекттер менен иштөөдө маанилүү.