Sobes.tech
Middle

Маънии муҳити иҷрои `this` дар JavaScript аз чӣ вобаста аст?

sobes.tech AI

Ҷавоб аз AI

Арзиши this дар JavaScript вобаста аз усулҳои даъвати функсия аст. Сенарияҳои асосӣ:

  1. Масоҳати глобалӣ: Дар функсияҳо, дар режими сахт ('use strict') this undefined аст. Бе режими сахт — объектии глобалӣ (window дар браузер, global дар Node.js).

  2. Даъвати методи объект: this ба объекти ишора мекунад, ки ба он методи даъватшуда тааллуқ дорад.

    const obj = {
      prop: 'қимат',
      method: function() {
        // this === obj
        console.log(this.prop);
      }
    };
    obj.method();
    
  3. Даъвати оддӣ: Дар режими сахт this undefined аст. Бе режими сахт — объектии глобалӣ.

    function myFunction() {
      // дар режими сахт this === undefined
      // бе режими сахт this === window (дар браузер)
      console.log(this);
    }
    myFunction();
    
  4. Конструктор (new): Вақте ки бо new истифода мешавад, this дар дохили функсия ба объекти навтаъсисшуда ишора мекунад.

    function MyClass(name) {
      this.name = name; // this === объекти нав
    }
    const instance = new MyClass('тест');
    // instance.name === 'тест'
    
  5. Васлкунии равшан (call, apply, bind): Ин усулҳо имкон медиҳанд, ки ба this арзиши равшан таъин карда шавад.

    • call(thisArg, arg1, arg2, ...): функсияро даъват мекунад, this-ро ба thisArg таъин мекунад ва аргументҳоро ба таври алоҳида мегузорад.
    • apply(thisArg, [argsArray]): функсияро даъват мекунад, this-ро ба thisArg таъин мекунад ва аргументҳоро ҳамчун массив мегузорад.
    • bind(thisArg): функсияи навро бо this-и мустаҳкамшуда бармегардонад.
    const anotherObj = { value: 42 };
    function showValue() {
      console.log(this.value);
    }
    showValue.call(anotherObj); // Натиҷа: 42
    
  6. Функсияҳои стрелка (=>): Функсияҳои стрелка соҳиби this нестанд. Арзиши this дар функсияи стрелка аз контексти лексикалӣ, ки дар он муайян шудааст, мерос мегирад.

    const outerObj = {
      name: 'Барои',
      method: function() {
        const arrowFunc = () => {
          // this дар ин ҷо аз method, ки ҳамчун методи outerObj даъват мешавад, мерос мегирад
          console.log(this.name);
        };
        arrowFunc();
      }
    };
    outerObj.method(); // Натиҷа: 'Барои'
    
    const anotherArrowFunc = () => {
        // this дар ин ҷо аз контексти глобалӣ (ё `undefined` дар режими сахт) мерос мегирад
        console.log(this);
    };
    anotherArrowFunc();
    
  7. Ҳолатҳо дар DOM: Дар аксари ҳолатҳо, this дар ҳангоми коркарди ҳодиса ба унсури DOM ишора мекунад, ки ҳодиса рӯй додааст.

    // Мисол дар браузер
    const button = document.querySelector('button');
    button.addEventListener('click', function() {
      // this === button
      console.log(this.tagName);
    });
    

Фаҳмидани ин механизмҳо барои истифодаи дуруст ва самараноки this дар JavaScript муҳим аст.