This Keyword in JavaScript

✅ أولًا: ما هي this؟

this هي كلمة مفتاحية تشير إلى الكائن (Object) الذي يستدعي الدالة (أو السياق الذي نُفذت فيه الدالة).

لكن معناها يتغير حسب السياق الذي تُستدعى فيه.

🧭 الحالات الأساسية التي يتغير فيها this:
السياقماذا تشير this إليه؟
في دالة عادية (strict mode)undefined
في دالة عادية (بدون strict)الكائن window
في دالة داخل كائنالكائن نفسه
في Classالكائن الذي تم إنشاؤه
في event handler في DOMالعنصر الذي أطلق الحدث
في arrow functionلا تملك this خاص بها، بل ترثه من السياق المحيط
عند استخدام call أو apply أو bindيتم تحديد this يدويًا
في setTimeout أو setIntervalthis = window (إلا إذا استخدمت arrow function أو bind
📘 1. this في الدوال العادية (Functions)
function showThis() {
  console.log(this);
}
showThis();
JavaScript
النتيجة:
  • في الوضع العادي (non-strict): this = window
  • في الوضع الصارم (strict mode): this = undefined

📘 2. this داخل كائن (Object Method)

const user = {
  name: "Ali",
  sayHello: function () {
    console.log("Hello " + this.name);
  }
};

user.sayHello(); // Hello Ali
JavaScript

هنا this تشير إلى الكائن user لأنه هو من استدعى الدالة.

📘 3. this في Arrow Function
const user = {
  name: "Sara",
  sayHi: () => {
    console.log("Hi " + this.name);
  }
};

user.sayHi(); // Hi undefined
JavaScript

❌ الخطأ الشائع: this في arrow function لا تشير إلى user، بل إلى this الخارجي (في المتصفح → window).

✅ الحل:

const user = {
  name: "Sara",
  sayHi: function () {
    const arrow = () => console.log("Hi " + this.name);
    arrow();
  }
};

user.sayHi(); // Hi Sara
JavaScript

لأن الـ arrow function أخذت this من الدالة العادية المحيطة.

📘 4. this في setTimeout

const obj = {
  name: "Omar",
  greet: function () {
    setTimeout(function () {
      console.log("Hello " + this.name);
    }, 1000);
  }
};

obj.greet(); // Hello undefined
JavaScript

this داخل setTimeout تشير إلى window.

✅ الحل 1: استخدم Arrow Function
const obj = {
  name: "Omar",
  greet: function () {
    setTimeout(() => {
      console.log("Hello " + this.name);
    }, 1000);
  }
};

obj.greet(); // Hello Omar
JavaScript

✅ الحل 2: استخدام bind

setTimeout(function () {
  console.log("Hello " + this.name);
}.bind(this), 1000);
JavaScript

📘 5. this داخل Class

class Car {
  constructor(brand) {
    this.brand = brand;
  }

  showBrand() {
    console.log("Brand: " + this.brand);
  }
}

const myCar = new Car("BMW");
myCar.showBrand(); // Brand: BMW
JavaScript

هنا this تشير إلى الكائن الذي تم إنشاؤه (myCar)

📘 7. this في DOM Event Handler
<button id="btn">Click me</button>

<script>
  document.getElementById("btn").addEventListener("click", function () {
    console.log(this); // الزر نفسه
  });
</script>
JavaScript

this تشير إلى العنصر (button) الذي نفذ الحدث.

⚠️ ملاحظات عامة:
  1. this لا تعتمد على مكان تعريف الدالة، بل على مكان استدعائها.
  2. الدوال العادية تتغير فيها this بسهولة.
  3. الدوال السهمية (Arrow) ثابتة في this وترثها من السياق المحيط.
🧠 متى أستخدم arrow ومتى function عادية؟
الحالةالأنسب
داخل كائن أو Classدالة عادية
داخل Callback أو setTimeoutArrow Function
عند الحاجة إلى this من الخارجArrow
عند الرغبة في تغيير this بـ bind/callدالة عادية