يعد تعلم طرق call() و application() و bind() أمرًا مهمًا لأنها تسمح لك بالتحكم في سياق ذلك في JavaScript. في المواقف التي لا يعمل فيها هذا السلوك الافتراضي كما هو متوقع، كما هو الحال عند استعارة الأساليب من كائن إلى آخر أو الحفاظ على السياق الصحيح داخل عمليات الاسترجاعات، توفر هذه الأساليب المرونة والتحكم. ومن خلال إتقانها، يمكنك كتابة وظائف أكثر كفاءة وقابلة لإعادة الاستخدام ومدركة للسياق، وهو أمر مفيد بشكل خاص في التطبيقات المعقدة.

قبل أن ننتقل إلى طرق استدعاء () وتطبيق () وربط ()، دعونا نفهم الكلمة الرئيسية "هذه" وآليتها.

الكلمة الرئيسية "هذه".

دعونا نفهم متى وماذا تشير هذه الكلمة الرئيسية من خلال النقاط التالية هنا:

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

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

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

• في معالجات الأحداث، يشير هذا إلى العنصر الذي استقبل الحدث. عند تشغيل حدث ما، يشير هذا إلى عنصر HTML الذي استدعى الحدث.
  

  
    Click to Remove Me!
  
  

  في هذه الحالة، يشير هذا إلى عنصر الزر نفسه الذي استقبل حدث onclick.

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

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hi, I'm ${this.name}`);
    }, 1000);
  }
};

person.greet(); // Output: Hi, I'm Alice

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

طريقة الاتصال ().

تتيح لك طريقة call() "استعارة" دالة أو طريقة من كائن واحد واستخدامها مع كائن آخر عن طريق تمرير الكائن الآخر كوسيطة أولى. تصبح الوسيطة الأولى هذه القيمة داخل الدالة، وتتبعها وسائط إضافية.

لا تقوم طريقة call() بإنشاء وظيفة جديدة؛ يقوم بتشغيل الوظيفة الموجودة مع السياق والوسائط المتوفرة.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

في هذا المثال، يتم استخدام call() لتنفيذ أسلوب الاسم الكامل للشخص الذي لديه بيانات الشخص 1 (الاسم الأول واسم العائلة)، والوسيطات الإضافية هي "Oslo" و"Norway".

تطبيق الطريقة ().

طريقة Apply () تشبه إلى حد كبير طريقة call (). يكمن الاختلاف الرئيسي في كيفية تمرير الوسائط إلى الوظيفة. باستخدام application()، يمكنك تمرير الوسائط كمصفوفة (أو كائن يشبه المصفوفة)، وليس بشكل فردي.

مثل call()، لا تقوم طريقة application() بإنشاء وظيفة جديدة. يقوم بتنفيذ الوظيفة على الفور باستخدام السياق المتوفر (هذه القيمة) والوسائط.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
// Output: John Doe is going to Oslo, Norway.

في هذا المثال، يتم استخدام application() لاستدعاء أسلوب الاسم الكامل لكائن الشخص، ولكن مع سياق (هذا) person1. يتم تمرير الوسيطتين "أوسلو" و"النرويج" كمصفوفة.

طريقة الربط ().

تتيح لك طريقة bind() في JavaScript ضبط السياق (هذه القيمة) لوظيفة أو طريقة، تمامًا مثل call() وapply(). ومع ذلك، على عكس call() وapply()، فإن طريقة bind() لا تستدعي الوظيفة على الفور. بدلاً من ذلك، تقوم بإرجاع دالة جديدة مع تعيين القيمة this إلى الكائن الذي تحدده.

const person = {
  fullName: function(city, country) {
    console.log(this.firstName   " "   this.lastName   " is going to "   city   ", "   country   ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const func = person.fullName.bind(person1);
func("Oslo", "Norway");
// Output: John Doe is going to Oslo, Norway.

في هذا المثال، يقوم bind() بإنشاء وظيفة func جديدة مع تعيين هذه القيمة على person1. لا يتم استدعاء الدالة على الفور، ولكن يمكنك استدعاؤها لاحقًا، مع تمرير الوسيطات "أوسلو" و"النرويج".

مثال: المسجل المركزي ذو السياقات المتعددة

إليك مثال تطبيق صغير ولكنه معقد حيث يؤدي استخدام call() أو application() أو bind() إلى تحقيق الكفاءة - خاصة في التعامل مع التطبيق الجزئي للوظائف لأغراض التسجيل:

لنفترض أن لديك وظيفة تسجيل مركزية تسجل معلومات حول المستخدمين المختلفين الذين يقومون بالإجراءات. يتيح لك استخدام bind() ضبط هذا السياق لمستخدمين مختلفين بكفاءة، وتجنب التعليمات البرمجية المتكررة.

const logger = {
  logAction: function(action) {
    console.log(`${this.name} (ID: ${this.id}) performed: ${action}`);
  }
};

const user1 = { name: "Alice", id: 101 };
const user2 = { name: "Bob", id: 202 };

// Create new logger functions for different users
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// Perform actions without manually passing user context
logForUser1("login");
// Output: Alice (ID: 101) performed: login

logForUser2("purchase");
// Output: Bob (ID: 202) performed: purchase

لماذا هو فعال:

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

النمطية: إذا كنت بحاجة إلى إضافة المزيد من المستخدمين أو الإجراءات، فيمكنك ربطهم بسرعة بالمسجل دون تغيير الوظيفة نفسها، مع الحفاظ على التعليمات البرمجية الخاصة بك جافة (لا تكرر نفسك).