`this` இன் மதிப்பு எவ்வாறு தீர்மானிக்கப்படுகிறது?

Question

Accepted Answer

`this` என்பது **ஒரு செயல்பாடு எவ்வாறு அழைக்கப்படுகிறது** என்பதைப் பொறுத்து தீர்மானிக்கப்படுகிறது, அது எங்கே வரையறுக்கப்பட்டுள்ளது என்பதைப் பொறுத்து அல்ல. ஐந்து விதிகள் உள்ளன:

```js
const obj = {
  x: 1,
  getX() { return this.x; },
};

obj.getX();          // 1   → method call: `this` is `obj`
const f = obj.getX;
f();                  // undefined (or window) → plain call: `this` is global/undefined
f.call(obj);          // 1   → explicit binding with call/apply/bind
new SomeClass();      //     → `this` is the brand-new instance
```

## அம்பு-செயல்பாட்டு விதிவிலக்கு (முக்கியமான)

அம்பு செயல்பாடுகளுக்கு **தங்களுடைய `this` இல்லை** — அவை வரையறுக்கும் நேரத்தில் சுற்றியுள்ள எல்லையிலிருந்து அதை பெறுகின்றன. இதுவே அம்பு செயல்பாடுகள் callbacks க்கு சிறந்தவை:

```js
const obj = {
  items: [1, 2],
  logAll() {
    // ✅ arrow inherits `this` from logAll → `this` is obj
    this.items.forEach(i => console.log(this.items, i));

// ❌ a regular function here would have its own `this` (undefined) → crash
    // this.items.forEach(function (i) { console.log(this.items); });
  },
};
```

## பொதுவான பொறி

ஒரு முறையை callback ஆக கடத்துவது **அதன் பிணைப்பை இழக்கிறது**, ஏனெனில் அது பின்னர் எளிமையாக அழைக்கப்படுகிறது:

```js
button.addEventListener("click", obj.getX);        // ❌ `this` is the button
button.addEventListener("click", () => obj.getX()); // ✅ keeps obj
button.addEventListener("click", obj.getX.bind(obj)); // ✅ also fine
```

## ஏன் இது முக்கியமானது

`this` ஐ புரிந்துகொள்ள முடியாமல் இருப்பது மிகவும் பொதுவான JS பிழைகளில் ஒன்றாகும்.

தீர்வு வழக்கமாக ஒரு அம்பு செயல்பாடு அல்லது `.bind()` எனக்குரிய `this` பூட்ட வேண்டும்.