ما هي الكلمة المفتاحية this

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

فمثلا لو كان لدينا كائن يمثل شخص ولديه خاصية name ودالة greet(). وإذا أردنا أن نجعل الدالة greet تطبع مرحبا وإسم هذا الكائن (name) فهنا سنحتاج إلى طريقة للوصول إلى خاصية name الخاصة بنفس الكائن الذي تنتمي إليه وهنا هو دور كلمة this.

const person = {
  name: "Ahmed",
  greet: function() {
    console.log(`Hi ${this.name}`); // this يشير إلى person
  }
};
person.greet(); // Hi Ahmed
person.name = "Mohamed"
person.greet(); // Hi Mohamed

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

send() {
  const object = {
    name: this.name,      // هذا يشير إلى الكائن الذي تم استدعاء send() منه
    email: this.email,
    password: this.password,
    number: this.number,
  };
  // ...
}

هنافي الكود الذي في الصورة this.name و this.email وباقي الخصائص ، تشير إلى الخصائص name و email في الكائن الذي يحتوي على الدالة send() أى الكائن نفسه الذي يستدعي الدالة.

أى يمكنك إعتبار this تعني كلمة أنا أى عند إستدعاء دالة من كائن هنا this تعني أنا لهذا الكائن.

ويجب عليك الإنتباه أنه في الدوال السهمية لا تحتوي على this حيث  قيمة "this" ليست مرتبطة بسياق الاستدعاء ولا تتأثر بطريقة الاستدعاء ولكنها  تستمد قيمتها من النطاق الذي تم تعريف الدالة فيه كالتالي:

const person = {
  name: "Ahmed",
  greet: () => {
    console.log(`Hi ${this.name}`); //  لن تعمل this هنا 
  }
};
person.greet(); // Hi undefined

لاحظ هنا كيف تم طباعة undefined لأن الدالة السهمية ليست لها نطاق مما يعني أن this لن تعمل هنا.

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

وإليك مزيد من التفاصيل :

كلمة this في جافا سكريبت (JavaScript) تشير إلى الكائن الحالي الذي يتم تنفيذ الدالة أو الكود داخله. تعتمد قيمتها على السياق الذي تُستخدم فيه، وهي تُستخدم بشكل رئيسي للوصول إلى الخصائص والأساليب داخل الكائنات. دعنا نشرحها بالتفصيل:

ما هو this؟

• this هي كلمة مفتاحية ديناميكية ترتبط بالسياق التنفيذي (Execution Context).
• قيمتها تتغير بناءً على كيفية استدعاء الدالة أو الكود.

متى وكيف نستخدم this؟

داخل الكائنات (Objects): تُستخدم this للإشارة إلى الخصائص أو الأساليب داخل الكائن نفسه.

const person = {
  name: "Ali",
  sayName: function() {
    return this.name;
  }
};
console.log(person.sayName()); // يعيد "Ali"

هنا، this يشير إلى كائن person.

في الدوال:

• إذا تم استدعاء دالة كجزء من كائن، فإن this يشير إلى ذلك الكائن.
• إذا تم استدعاء الدالة بشكل مستقل، فإن this يشير عادةً إلى الكائن العام (global object في المتصفح هو window، أو undefined في الوضع الصارم strict mode).

  function show() {
    console.log(this);
  }
  show(); // في المتصفح، يشير إلى window (إلا إذا كان في strict mode)

   

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

فمثلا إذا تم استدعاء دالة من داخل كائن باستخدام object.method()، فإن this تشير إلى ذلك الكائن كالتالي:

const user = {
  name: "Hsoub",
  greet() {
    console.log(this.name);
  }
};

لاحظ هنا أن this تشير إلى user.

أما إذا استدعيت الدالة في الوضع العام (global) فإن this تشير إلى window في المتصفح مثل الذي هنا:

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

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

وقيمة this لا تتحدد عند تعريف الدالة بل عند استدعائها، وهذا ما يجعل فهمها دقيقا وحساسا للسياق.

فعندما يتم استدعاء دالة كجزء من كائن، فإن this تشير لذلك الكائن كما في المثال الأول، أما إذا تم استدعاء الدالة بشكل مستقل خارج كائن، فإن this في الوضع العادي تشير إلى الكائن العام مثل window في المتصفح أما في الوضع الصارم فستكون undefined.

وفي الأصناف (classes) أو عند بناء كائنات جديدة، تشير this إلى النسخة الجديدة التي يتم إنشاؤها وكذلك عند استخدام this داخل أحداث في DOM، فإنها تشير إلى العنصر الذي وقع عليه الحدث.

يوجد هناك نوع خاص من الدوال في JavaScript يسمى الدوال السهمية (arrow functions) وهذه لا تمتلك قيمة this خاصة بها، بل تأخذ قيمتها من السياق الخارجي الذي كتبت فيه.

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