ਕਿਵੇਂ `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
```

## Arrow-ਫੰਕਸ਼ਨ ਅਪਵਾਦ (ਮਹੱਤਵਪੂਰਨ)

Arrow ਫੰਕਸ਼ਨਾਂ ਦੇ ਕੋਲ **ਆਪਣਾ `this` ਨਹੀਂ ਹੈ** — ਉਹ ਪਰਿਭਾਸ਼ਾ ਦੇ ਸਮੇਂ ਆਲੇ-ਦੁਆਲੇ ਦੇ ਸਕੋਪ ਤੋਂ ਉਪਾਰਜਤ ਕਰਦੇ ਹਨ। ਇਹ ਹੈ ਕਿ ਕਿਉਂ arrows 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); });
  },
};
```

## ਆਮ ਫੰਦਾ

ਕਾਲਬੈਕ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਵਿਧੀ ਨੂੰ ਪਾਸ ਕਰਨਾ **ਆਪਣੀ ਬਾਈਡਿੰਗ ਗੁਆ ਦਿੰਦਾ ਹੈ**, ਕਿਉਂਕਿ ਇਹ ਫਿਰ ਸਾਧਾਰਣ ਤਰੀਕੇ ਨਾਲ ਕਾਲ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:

```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 ਬੱਗਾਂ ਵਿੱਚੋਂ ਇੱਕ ਹੈ।

ਫਿਕਸ ਆਮ ਤੌਰ 'ਤੇ arrow ਫੰਕਸ਼ਨ ਜਾਂ `.bind()` ਹੁੰਦਾ ਹੈ ਇਰਾਦਾ ਰੱਖਿਆ `this` ਨੂੰ ਲਾਕ ਕਰਨ ਲਈ।