this և bind/apply/call մեթոդները օբյեկտների կոնտեքստում JavaScript-ում

JavaScript-ում this հատուկ keyword է, որը վերաբերում է այն օբյեկտին, որի կոնտեքստում տվյալ կոդը աշխատում է։ Բայց քանի որ JavaScript-ը ունի դինամիկ կոնտեքստ, this-ը կարող է փոփոխվել՝ կախված նրանից, թե ինչպես է կանչվում ֆունկցիան։

Օբյեկտների հետ աշխատելիս this-ը հաճախ շփոթեցնող է լինում։ Այս հոդվածում կնայենք ինչպես է աշխատում this-ը օբյեկտների կոնտեքստում և ինչպես կարելի է այն վերահսկել bind, call և apply մեթոդների միջոցով։

---

Օբյեկտի մեթոդում this-ի արժեքը

  
const user = {
  name: 'Anna',
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

user.greet(); // Hi, I'm Anna
  

Այստեղ this-ը մատնանշում է user օբյեկտին, քանի որ greet-ը կանչվում է user.greet() ձևով։

---

Ինչ է լինում երբ մեթոդը փոխանցում ենք որպես callback

  
const user = {
  name: 'Anna',
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

setTimeout(user.greet, 1000); // Hi, I'm undefined (կամ error strict mode-ում)
  

Երբ user.greet փոխանցում ենք առանց կանչելու, this-ը կորցնում է իր սկզբնական կոնտեքստը և դառնում է undefined կամ window (ոչ strict mode-ում):

---

Կոնտեքստը պահպանելու եղանակ․ bind()

  
const user = {
  name: 'Anna',
  greet() {
    console.log(`Hi, I'm ${this.name}`);
  }
};

const boundGreet = user.greet.bind(user);
setTimeout(boundGreet, 1000); // Hi, I'm Anna
  

bind() վերադարձնում է նոր ֆունկցիա՝ որի this-ը մշտապես կապված է user օբյեկտին։

Առավելություններ:

• Պահպանում է կոնտեքստը callback-ներում կամ event handler-ներում
• Անհրաժեշտ է երբ ֆունկցիան փոխանցում ենք որպես արժեք

---

call() և apply() մեթոդները

  
function introduce(city, country) {
  console.log(`${this.name} from ${city}, ${country}`);
}

const person = { name: 'Mariam' };

introduce.call(person, 'Yerevan', 'Armenia'); // Mariam from Yerevan, Armenia
introduce.apply(person, ['Gyumri', 'Armenia']); // Mariam from Gyumri, Armenia
  

call() և apply() մեթոդները անմիջապես կանչում են ֆունկցիան՝ փոխելով this-ը։ Մինչդեռ bind() վերադարձնում է նոր ֆունկցիա՝ առանց կանչելու այն։

Տարբերությունը call-ի և apply-ի միջև․

• call() ընդունում է արգումենտները որպես առանձին արժեքներ
• apply() ընդունում է արգումենտները որպես զանգված

---

Օբյեկտ ներսում nested this-ի խնդիր

  
const obj = {
  name: 'Mark',
  outer() {
    console.log(this.name); // Mark

    function inner() {
      console.log(this.name); // undefined
    }

    inner();
  }
};

obj.outer();
  

Ներսի inner() ֆունկցիան սովորական ֆունկցիա է, ոչ մեթոդ, այդ պատճառով this-ը կորցնում է կապը։

Արդյունքները կարող ենք լուծել՝ օգտագործելով․

• bind()
• arrow function — որը չի ստեղծում սեփական this

  
// Arrow function լուծում
outer() {
  console.log(this.name);

  const inner = () => {
    console.log(this.name); // ճիշտ this
  };

  inner();
}
  

---

Փոխանցել this-ը event handler-ներում

  
const button = document.querySelector('button');

const user = {
  name: 'Ani',
  handleClick() {
    console.log(`Clicked by ${this.name}`);
  }
};

button.addEventListener('click', user.handleClick.bind(user));
  

Եթե bind() չօգտագործենք, this-ը կդառնա button DOM էլեմենտը։

---

Եզրակացություն

this-ը JavaScript-ում միշտ կախված է այն բանից, թե ինչպես է ֆունկցիան կանչվում։ Օբյեկտների կոնտեքստում այն հիմնական գործիքներից է՝ կոդի կառուցվածքը կառավարելու համար։ bind(), call(), և apply() մեթոդները թույլ են տալիս վերահսկել կոնտեքստը և ստեղծել մաքուր, կանխատեսելի կոդ։