JavaScript Fundamentals

إتقان دالة JavaScript bind()

Spread the love

تُعدُّ طريقة bind() أداةً قويةً في جافا سكريبت لإدارة سياق الدالة والحجج. فهي تسمح لك بإنشاء دالة جديدة، وعند استدعائها، يتم تعيين كلمتها المفتاحية this إلى قيمة مُقدمة، واختياريًا، يتم تعيين حجج مُسبقًا.

جدول المحتويات

فهم bind()

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

البنية النحوية والمعلمات

البنية النحوية لـ bind() بسيطة:


let boundFunction = functionToBind.bind(thisArg, arg1, arg2, ...);
  • functionToBind: الدالة التي تريد ربطها.
  • thisArg: القيمة التي ستصبح this داخل الدالة المرتبطة.
  • arg1, arg2, ...: حجج اختيارية سيتم تعبئتها مسبقًا عند استدعاء الدالة المرتبطة.

حالات الاستخدام الشائعة

الحفاظ على السياق (this)

هذا هو ربما الاستخدام الأكثر شيوعًا لـ bind(). ضع في اعتبارك طريقة داخل كائن:


const myObject = {
  name: "Example",
  greet: function() {
    console.log("Hello, my name is " + this.name);
  }
};

setTimeout(myObject.greet, 1000); // قد تكون 'this' نافذة المتصفح أو غير مُعرّفة!
setTimeout(myObject.greet.bind(myObject), 1000); // 'this' مرتبطة بشكل صحيح

التطبيق الجزئي

يسمح لك bind() بتعيين بعض الحجج مسبقًا، مما يُنشئ نسخة مُتخصصة من الدالة:


function add(x, y) {
  return x + y;
}

const addFive = add.bind(null, 5);
console.log(addFive(3)); // الإخراج: 8

التحويل إلى دالة أحادية المعامل

يُحوّل التحويل إلى دالة أحادية المعامل دالة تأخذ حججًا متعددة إلى سلسلة من الدوال تأخذ كل منها حجة واحدة. يمكن أن يساعد bind() في هذا:


function add(x, y, z) {
  return x + y + z;
}

const add1 = add.bind(null, 1);
const add1And2 = add1.bind(null, 2);
console.log(add1And2(3)); // الإخراج: 6

معالجة الأحداث

في مُعالجات الأحداث، قد تكون this غير متوقعة. يضمن bind() السياق الصحيح:


class Button {
  constructor(text) {
    this.text = text;
    this.button = document.createElement('button');
    this.button.textContent = text;
    this.button.addEventListener('click', this.handleClick.bind(this));
    document.body.appendChild(this.button);
  }

  handleClick() {
    console.log(`Clicked: ${this.text}`);
  }
}

new Button("Click Me!");

bind() مقابل call() و apply()

تُعيّن call() و apply() أيضًا قيمة this، لكنهما تُنفذان الدالة فورًا. bind() تُعيد دالة جديدة، مما يسمح بالتأجيل في التنفيذ.

الخاتمة

تُعدُّ bind() أداةً أساسيةً لكتابة جافا سكريبت أنظف وأكثر قابلية للصيانة. إنها مفيدة بشكل خاص عند العمل مع التعليمات البرمجية غير المتزامنة، ومعالجات الأحداث، وتقنيات البرمجة الوظيفية. إن إتقان bind() يُحسّن بشكل كبير من متانة الكود وكفاءته.

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *