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

في هذا المقال سنرى ما هو وكيف يعمل في المواقف المختلفة والأخطاء الشائعة التي لا يجب أن تقع فيها عند استخدامه.

فهم هذا في جافا سكريبت

يشير هذا ببساطة إلى الكائن المستخدم حاليًا في كود جافا سكريبت. ولكن هنا هو الجزء الصعب: ما يشير إليه هذا يمكن أن يتغير أيضًا اعتمادًا على مكان وكيفية استخدامه في التعليمات البرمجية الخاصة بك. قد يتساءل المرء "لماذا هذا؟" حسنًا، هذا ديناميكي بطبيعته =، مما يعني أن - يتم تحديد قيمته عند استدعاء دالة، وليس عند كتابتها.

هذا في السياقات العالمية والوظيفية

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

بينما عند استخدامه داخل إحدى الوظائف، فإنه يتصرف بشكل مختلف تمامًا. على سبيل المثال: إذا قمت باستدعاء وظيفة "myFunction" على سبيل المثال، فسيظل هذا يشير إلى الكائن العام ولكن إذا كنت تستخدم الوضع الصارم في Javascript، فسيجعله غير محدد داخل تلك الوظيفة.

نعم، أعلم أن الأمر محير للغاية، فقط تابع معي. سأشرح بشكل أفضل.

هذا في الكائنات

عندما تستخدم هذا داخل طريقة (وظيفة هي خاصية لكائن)، فهذا يشير إلى الكائن الذي تنتمي إليه الطريقة.

مثال:

const myObject = {
    name: 'Alice',
    greet: function() {
        console.log(this.name);
    }
};

myObject.greet(); // Output: 'Alice'

هنا، يشير this.name إلى myObject.name، وهو "Alice".

هذا في البنائين والفئات

المنشئون: عندما تقوم بإنشاء كائن باستخدام وظيفة منشئ أو فئة، فهذا يشير إلى الكائن الجديد الذي يتم إنشاؤه.

مثال:

function Person(name) {
    this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // Output: 'Bob'

في الكود، يشير this.name إلى خاصية الاسم لكائن الشخص الجديد.

الأخطاء الشائعة وكيفية تجنبها

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

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

const myObject = {
    name: 'Eve',
    greet: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};

myObject.greet(); // Output: 'Eve'

خاتمة

يمكن أن تكون الكلمة الرئيسية هذه مؤلمة، ولكن كل ما عليك أن تأخذه في الاعتبار هو أنها تتغير اعتمادًا على كيفية ومكان اختيارك للاتصال بها. لكي تتحسن في ذلك، استخدمه للتدرب على الكثير من الأمثلة، وبدون وقت، ستصبح محترفًا في ذلك.