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

وظائف منتظمة

يتم تعريف الوظائف العادية في JavaScript باستخدام الكلمة الأساسية للوظيفة. تعتمد قيمة هذا في هذه الوظائف على كيفية استدعاء الوظيفة. وإليكم عدة أمثلة:

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

• الوضع غير الصارم:

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

  regularFunction(); // Logs the global object (window in browsers)

• شرح: في الوضع غير الصارم، عندما يتم استدعاء دالة في السياق العام (وليس كطريقة للكائن)، يشير هذا إلى الكائن العام (نافذة في المتصفحات أو عمومي في العقدة .js).

  • الوضع الصارم:

  'use strict';

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

  regularFunction(); // Logs undefined

• شرح: في الوضع الصارم، يظل هذا غير محدد عند استدعاء دالة في السياق العام، مما يوفر بيئة أكثر أمانًا عن طريق منع التعديلات غير المقصودة على الكائن العام.

2. طريقة الاتصال

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

• مثال:

  const obj = {
      method: function() {
          console.log(this);
      }
  };

  obj.method(); // Logs obj

• شرح: في هذه الحالة، يشير هذا إلى obj لأن الوظيفة تسمى كطريقة لـ obj.

  • الوضع الصارم: يظل السلوك كما هو في الوضع الصارم.

3. دعوة المنشئ

عند استخدام دالة كمنشئ (يتم استدعاؤها باستخدام الكلمة الأساسية الجديدة)، يشير هذا إلى المثيل الذي تم إنشاؤه حديثًا.

• مثال:

  function Person(name) {
      this.name = name;
      this.sayHello = function() {
          console.log(`Hello, my name is ${this.name}`);
      };
  }

  const person1 = new Person('Alice');
  person1.sayHello(); // Logs "Hello, my name is Alice"

  const person2 = new Person('Bob');
  person2.sayHello(); // Logs "Hello, my name is Bob"

• شرح: عند الاتصال بـ new، يشير هذا الموجود داخل وظيفة مُنشئ الشخص إلى المثيل الجديد الذي يتم إنشاؤه. يحصل كل مثيل جديد (person1 وperson2) على خاصية الاسم الخاصة به وطريقة sayHello.

  • الوضع الصارم: يظل السلوك كما هو في الوضع الصارم.

4. الربط الصريح

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

• مثال:

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

  const obj = { value: 42 };

  regularFunction.call(obj);  // Logs obj
  regularFunction.apply(obj); // Logs obj

  const boundFunction = regularFunction.bind(obj);
  boundFunction();            // Logs obj

• شرح: استدعاء وتطبيق على الفور استدعاء الوظيفة مع هذه المجموعة إلى obj، بينما يقوم bind بإنشاء وظيفة جديدة مع هذا المرتبط بشكل دائم بـ obj.

  • الوضع الصارم: يظل السلوك كما هو في الوضع الصارم.

وظائف السهم

وظائف السهم، المقدمة في ES6، ليس لها هذا السياق الخاص بها. وبدلاً من ذلك، فهم يرثون هذا من النطاق (المعجمي) المحيط. وهذا يجعل وظائف السهم مفيدة في مواقف معينة.

1. المعجمية هذا

ترث وظائف السهم هذا من النطاق الذي تم تعريفها فيه.

• الوضع غير الصارم:

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs the global object (window in browsers)

• شرح: وظائف السهم ليس لها هذا؛ يستخدمون هذا من النطاق المحيط. يشير هنا إلى الكائن العام لأن الوظيفة محددة في النطاق العالمي.

  • الوضع الصارم:

  'use strict';

  const arrowFunction = () => {
      console.log(this);
  };

  arrowFunction(); // Logs undefined

• شرح: في الوضع الصارم، إذا كان النطاق المحيط عالميًا، فسيظل هذا غير محدد على أنه موروث من النطاق المحيط.

2. طريقة الاتصال

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

• مثال:

  const obj = {
      method: () => {
          console.log(this);
      }
  };

  obj.method(); // Logs the global object (window in browsers) or undefined in strict mode

• شرح: لا تربط وظائف السهم بهذا ولكنها ترثه من النطاق المعجمي. في هذا المثال، يشير هذا إلى الكائن العام أو غير المحدد في الوضع الصارم، وليس الكائن.

  • الوضع الصارم: السجلات غير محددة، وليست كائنات.

3. وظيفة السهم داخل وظيفة أخرى

عندما يتم تعريف دالة سهمية داخل دالة أخرى، فإنها ترث ذلك من الدالة الخارجية.

• مثال:

  function outerFunction() {
      const arrowFunction = () => {
          console.log(this);
      };

      arrowFunction();
  }

  const obj = { value: 42, outerFunction: outerFunction };

  obj.outerFunction(); // Logs obj, because `this` in arrowFunction is inherited from outerFunction

• شرح: في هذه الحالة، يشير هذا داخل وظيفة السهم إلى نفس هذا كما في الوظيفة الخارجية، وهو obj.

  • الوضع الصارم: يظل السلوك كما هو في الوضع الصارم.

4. وظيفة السهم في معالجات الأحداث

ترث وظائف الأسهم في معالجات الأحداث هذا من النطاق المعجمي المحيط، وليس من العنصر الذي يطلق الحدث.

• مثال:

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

  button.addEventListener('click', () => {
      console.log(this);
  }); // Logs the global object (window in browsers) or undefined in strict mode

• شرح: وظيفة السهم لا تربط هذا بعنصر الزر؛ يرثها من النطاق المحيط، وهو النطاق العالمي أو غير المحدد في الوضع الصارم.

  • الوضع الصارم: السجلات غير محددة، وليس عنصر الزر.

لماذا هذه الاختلافات؟

يكمن الفرق بين الوظائف العادية ووظائف الأسهم في كيفية التعامل مع هذا:

• الوظائف العادية: قيمة هذه ديناميكية ويتم تحديدها بواسطة موقع الاتصال (كيف يتم استدعاء الوظيفة).
• وظائف السهم: قيمة هذا معجمية ويتم تحديدها في الوقت الذي يتم فيه تعريف الوظيفة، بناءً على قيمة هذه في سياق التنفيذ المتضمن.

المفاهيم الأساسية لفهم

لفهم سلوك ذلك في جافا سكريبت، تحتاج إلى معرفة المفاهيم التالية:

1. سياق التنفيذ: السياق الذي يتم فيه تنفيذ التعليمات البرمجية، مما يؤثر على كيفية تحديد ذلك.
2. موقع الاتصال: الموقع في الكود الذي يتم فيه استدعاء الوظيفة، مما يؤثر على قيمة ذلك في الوظائف العادية.
3. النطاق المعجمي: كيف يتم توريث ذلك في وظائف السهم من النطاق المحيط.
4. الوضع الصارم: كيف يغير الوضع الصارم السلوك الافتراضي لهذا في سياقات معينة.

ملخص

• الوظائف العادية: هذه ديناميكية ويتم تحديدها بواسطة موقع الاتصال.
• وظائف السهم: هذا معجمي ويتم تحديده بواسطة النطاق المحيط عند تعريف الوظيفة.

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