كلمة this في JavaScript - شرح شامل للمبتدئين مع أمثلة عملية

🔍 فهم كلمة this في JavaScript: دليل المبتدئين الشامل

كلمة this هي واحدة من أكثر المفاهيم أهمية - وأحياناً إرباكاً - في لغة JavaScript. في هذا الدرس، سنتعلم معنى this وكيف تعمل خطوة بخطوة مع أمثلة بسيطة جداً تناسب المبتدئين.

💡 ما هي كلمة this؟

ببساطة شديدة، this هي كلمة خاصة تشير إلى الكائن الذي ينتمي إليه الكود الحالي. لكن قيمتها تتغير حسب كيفية وأين نستخدمها.

// هذا مثال بسيط للغاية
console.log(this); // في المتصفح، سيشير إلى كائن window

🎯 أربع حالات رئيسية لتحديد قيمة this

1. this في الاستخدام العادي (السياق العام)

عند استخدام this خارج أي دالة أو كائن، تشير إلى الكائن العام (Global Object).

// في المتصفح
console.log(this === window); // true

// في Node.js
console.log(this === global); // true

2. this داخل دوال الكائنات (الطرق - Methods)

عند استدعاء دالة كطريقة لكائن، تشير this إلى ذلك الكائن نفسه.

const person = {
    name: "Ahmed",
    age: 25,
    introduce: function() {
        // هنا this تشير إلى كائن person
        console.log(`I'm ${this.name} and I'm ${this.age} years old`);
    }
};

person.introduce(); // I'm Ahmed and I'm 25 years old

3. this في الدوال العادية

عند استخدام this داخل دالة عادية (ليست طريقة لكائن)، تشير إلى الكائن العام.

function sayHello() {
    console.log(this); // في المتصفح: window
}

sayHello();

4. this في دوال السهم (Arrow Functions)

دوال السهم تتصرف بشكل مختلف! تأخذ this من النطاق المحيط لها.

const person = {
    name: "Sarah",
    regularFunction: function() {
        console.log(this.name); // Sarah (تشير إلى person)
    },
    arrowFunction: () => {
        console.log(this.name); // undefined (تشير إلى النطاق الخارجي)
    }
};

person.regularFunction();
person.arrowFunction();

🧪 أمثلة عملية لتوضيح الفروق

المثال 1: الفرق بين الدوال العادية ودوال السهم

const car = {
    brand: "Toyota",
    startEngine: function() {
        // هذه دالة عادية، this تشير إلى كائن car
        console.log(`Engine ${this.brand} is running`);
    },
    stopEngine: () => {
        // هذه دالة سهم، this تأخذ من النطاق الخارجي
        console.log(`Engine ${this.brand} stopped`); // لن تعمل بشكل صحيح
    }
};

car.startEngine(); // Engine Toyota is running
car.stopEngine(); // Engine undefined stopped

المثال 2: this في معالجات الأحداث

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

button.addEventListener('click', function() {
    // في معالجات الأحداث، this تشير إلى العنصر الذي سبب الحدث
    console.log(this); // سيشير إلى عنصر button
    this.style.backgroundColor = 'red';
});

💡 نصائح مهمة للمبتدئين

1. تذكر دائماً: this تتغير قيمتها حسب كيفية الاستدعاء
2. في الكائنات: استخدم الدوال العادية عندما تريد أن تشير this إلى الكائن
3. دوال السهم: مفيدة عندما تريد الحفاظ على قيمة this من النطاق الخارجي
4. تدرب كثيراً: أفضل طريقة لفهم this هي التطبيق العملي