64- دروس جافا سكربت – JS this Keyword

### شرح مفصل للكلمة المفتاحية “this” في لغة JavaScript

تعتبر الكلمة المفتاحية “this” واحدة من أهم المفاهيم في لغة JavaScript وأكثرها إثارة للجدل بين المبرمجين، وذلك بسبب سلوكها المتغير بحسب السياق الذي تُستخدم فيه. سنقوم في هذا المقال بشرح مفهوم “this” بالتفصيل مع تقديم أمثلة توضيحية متعددة.

#### مفهوم “this”

في JavaScript، تشير الكلمة المفتاحية “this” إلى الكائن الذي ينفذ الكود الحالي. بالرغم من أن [شركة برمجة مصرية] هذا التعريف يبدو بسيطًا، إلا أن “this” قد تأخذ قيمًا مختلفة بناءً على سياق التنفيذ (Execution Context) الذي تُستخدم فيه. يمكن تلخيص هذه السياقات كما يلي:

1. **السياق العام (Global Context):**
– في الوضع غير الصارم (Non-Strict Mode)، تشير “this” إلى الكائن العام (global object)، الذي يكون `window` في المتصفحات.
– في الوضع الصارم (Strict Mode)، تكون قيمة “this” غير معرفة (`undefined`).

2. **داخل الكائنات (Object Context):**
– عندما تُستخدم “this” داخل كائن، تشير إلى الكائن نفسه.

3. **داخل الدوال (Function Context):**
– تختلف قيمة “this” في الدوال بناءً على كيفية استدعاء الدالة، وليس مكان تعريفها.

4. **داخل الدوال السهمية (Arrow Functions):**
– في الدوال السهمية، تحتفظ “this” بقيمتها من السياق المحيط، ولا تتغير بناءً على كيفية استدعاء الدالة.

#### أمثلة توضيحية

##### 1. السياق العام

console.log(this); // في الوضع غير الصارم، تُشير إلى الكائن العام (window في المتصفحات)

##### 2. داخل الكائنات

const person = {
    name: 'Ali',
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.greet(); // تُشير "this" إلى الكائن "person"

##### 3. داخل الدوال

– **استدعاء دالة عادي:**

function showThis() {
    console.log(this);
}

showThis(); // في الوضع غير الصارم، تشير "this" إلى الكائن العام

– **استدعاء دالة كطريقة لكائن:**

const car = {
    brand: 'Toyota',
    displayBrand: function() {
        console.log(this.brand);
    }
};

car.displayBrand(); // تُشير "this" إلى الكائن "car"

– **استدعاء دالة باستخدام call وapply:**

function showName() {
    console.log(this.name);
}

const user = { name: 'Sara' };

showName.call(user); // تُشير "this" إلى الكائن "user"

##### 4. داخل الدوال السهمية

const user = {
    name: 'Mona',
    showName: function() {
        const arrowFunc = () => {
            console.log(this.name);
        };
        arrowFunc();
    }
};

user.showName(); // تُشير "this" إلى الكائن "user" بسبب الدالة السهمية

### خلاصة

تعتبر الكلمة المفتاحية “this” من الأدوات المهمة التي تحتاج إلى فهم عميق في JavaScript، حيث تتغير قيمتها بناءً على السياق الذي تُستخدم فيه. لفهم “this” بشكل صحيح، يجب التركيز على كيفية استدعاء [شركة برمجة مصرية] الدوال وليس فقط مكان تعريفها. من خلال الأمثلة السابقة، يمكن للمبرمجين فهم كيفية استخدام “this” بشكل صحيح في مشاريعهم وتجنب الأخطاء الشائعة المرتبطة بها.