ربط الدوالّ Function binding

let user = {
  firstName: "John",
  sayHi() {
    alert(`‎Hello, ${this.firstName}!‎`);
  }
};

setTimeout(user.sayHi, 1000); // Hello, undefined!

let f = user.sayHi;
setTimeout(f, 1000); // ‫ضاع سياق المستخدم user

let user = {
  firstName: "John",
  sayHi() {
    alert(`‎Hello, ${this.firstName}!‎`);
  }
};

setTimeout(function() {
  user.sayHi(); // Hello, John!
}, 1000);

setTimeout(() => user.sayHi(), 1000); // Hello, John!

let user = {
  firstName: "John",
  sayHi() {
    alert(`‎Hello, ${this.firstName}!‎`);
  }
};

setTimeout(() => user.sayHi(), 1000);

// ‫...تغيّرت قيمة user خلال تلك الثانية
user = {
  sayHi() { alert("Another user in setTimeout!"); }
};

// setTimeout! هناك مستخدم آخر داخل التابِع‏

// ستأتي الصياغة المعقّدة لاحقًا لا تقلق
let boundFunc = func.bind(context);

let user = {
  firstName: "John"
};

function func() {
  alert(this.firstName);
}

let funcUser = func.bind(user);
funcUser(); // John

let user = {
  firstName: "John"
};

function func(phrase) {
  alert(phrase + ', ' + this.firstName);
}

// ‫نربط this إلى user
let funcUser = func.bind(user);

funcUser("Hello"); // ‫Hello, John (مُرّر المُعامل "Hello" كما وُضبط this=user)

let user = {
  firstName: "John",
  sayHi() {
    alert(`‎Hello, ${this.firstName}!‎`);
  }
};

let sayHi = user.sayHi.bind(user); // (*)

// يمكن أن نشغّلها دون وجود كائن
sayHi(); // Hello, John!

setTimeout(sayHi, 1000); // Hello, John!

// even if the value of user changes within 1 second
// sayHi uses the pre-bound value which is reference to the old user object
user = {
  sayHi() { alert("Another user in setTimeout!"); }
};

let user = {
  firstName: "John",
  say(phrase) {
    alert(`‎${phrase}, ${this.firstName}!‎`);
  }
};

let say = user.say.bind(user);

say("Hello"); // ‫Hello, John!‎ (مُرّر المُعامل "Hello" إلى say)
say("Bye"); // ‫Bye, John!‎ (مُرّر المعامل "Bye" إلى say)

for (let key in user) {
  if (typeof user[key] == 'function') {
    user[key] = user[key].bind(user);
  }
}

## الدوال الجزئية

طوال هذه الفترة لم نُناقش شيئًا إلّا ربط `‎this‎`. لنُضيف شيئًا آخر على الطاولة.

يمكن أيضًا أن نربط المُعاملات وليس `‎this‎` فحسب. صحيح أنّا نادرًا ما نفعل ذلك إلّا أنّ الأمر مفيد في أحيان عصيبة.

صياغة `‎bind‎` الكاملة:

```
let bound = func.bind(context, [arg1], [arg2], ...);
```

وهي تسمح لنا بربط السياق ليكون `‎this‎` والمُعاملات الأولى في الدالة.

نرى مثالًا: دالة ضرب `‎mul(a, b)‎`:

```
function mul(a, b) {
  return a * b;
}
```

فلنستعمل `‎bind‎` لنصنع دالة «ضرب في اثنين» `‎double‎` تتّخذ تلك أساسًا لها:

```
function mul(a, b) {
  return a * b;
}

let double = mul.bind(null, 2);

alert( double(3) ); // = mul(2, 3) = 6
alert( double(4) ); // = mul(2, 4) = 8
alert( double(5) ); // = mul(2, 5) = 10
```

يصنع استدعاء `‎mul.bind(null, 2)‎` دالةً جديدة `‎double‎` تُمرّر الاستدعاءات إلى `‎mul‎` وتضبط `‎null‎` ليكون السياق و`‎2‎` ليكون المُعامل الأول. الباقي من مُعاملات يُمرّر «كما هو».

هذا ما نسمّيه [باستعمال الدوال الجزئية](https://en.wikipedia.org/wiki/Partial_application) -- أن نصنع دالة بعد ضبط بعض مُعاملات واحدة غيرها.

Please note that we actually don't use `this` here. But `bind` requires it, so we must put in something like `null`.

الدالة `‎triple‎` أسفله تضرب القيمة في ثلاثة:

```
function mul(a, b) {
  return a * b;
}

let triple = mul.bind(null, 3);

alert( triple(3) ); // = mul(3, 3) = 9
alert( triple(4) ); // = mul(3, 4) = 12
alert( triple(5) ); // = mul(3, 5) = 15
```

ولكن لماذا نصنع الدوال الجزئية أصلًا، وعادةً؟!

الفائدة هي إنشاء دالة مستقلة لها اسم سهل القراءة (`‎double‎` أو `‎triple‎`)، فنستعملها دون تقديم المُعامل الأول في كلّ مرة إذ ضبطنا قيمته باستعمال `‎bind‎`.

وهناك حالات أخرى يفيدنا الاستعمال الجزئي هذا حين نحتاج نسخة أكثر تحديدًا من دالة عامّة جدًا، ليسهُل استعمالها فقط.

فمثلًا يمكن أن نصنع الدالة `‎send(from, to, text)‎`. وبعدها في كائن المستخدم `‎user‎` نصنع نسخة جزئية عنها: `‎sendTo(to, text)‎` تُرسل النصّ من المستخدم الحالي.

## الجزئية، بدون السياق

ماذا لو أردنا أن نضبط بعض المُعاملات ولكن دون السياق `‎this‎`؟ مثلًا نستعملها لتابِع أحد الكائنات.

تابِع `‎bind‎` الأصيل في اللغة لا يسمح بذلك، ومستحيل أن نُزيل السياق ونضع المُعاملات فقط.

لكن لحسن الحظ فيمكننا صنع دالة مُساعدة `‎partial‎` تربط المُعاملات فقط.

هكذا تمامًا:

```
function partial(func, ...argsBound) {
  return function(...args) { // (*)
    return func.call(this, ...argsBound, ...args);
  }
}

// الاستعمال:
let user = {
  firstName: "John",
  say(time, phrase) {
    alert(`‎[${time}] ${this.firstName}: ${phrase}!‎`);
  }
};

// نُضيف تابِعًا جزئيًا بعد ضبط الوقت
user.sayNow = partial(user.say, new Date().getHours() + ':' + new Date().getMinutes());

user.sayNow("Hello");
// وسيظهر ما يشبه الآتي:
// [10:00] John: Hello!
```

ناتِج استدعائنا للدالة `‎partial(func[, arg1, arg2...])‎` هو غِلاف `‎(*)‎` يستدعي الدالة `‎func‎` هكذا:
- يترك `‎this‎` كما هو (فتكون قيمته `‎user‎` داخل الاستدعاء `‎user.sayNow‎`)
- ثمّ يمرّر لها `‎...argsBound‎`: أي المُعاملات من استدعاء `‎partial‎` ‏(`‎"10:00"‎`)
- وثمّ يمرّر لها `‎...args‎`: المُعاملات الممرّرة للغِلاف (`‎"Hello"‎`)

ساعدنا مُعامل التوزيع كثيرًا هنا، أم لا؟

كما أنّ هناك شيفرة [`‎_.partial`](https://lodash.com/docs#partial)  في المكتبة lodash.

## ملخص

يُعيد التابِع `‎func.bind(context, ...args)‎` «نسخة مربوطة» من الدالة `‎func‎` بعد ضبط سياقها `‎this‎` ومُعاملاتها الأولى (في حال مرّرناها).

عادةً ما نستعمل `‎bind‎` لنضبط `‎this‎` داخل تابِع لأحد الكائنات، فيمكن أن نمرّر التابِع ذلك إلى مكان آخر، مثلًا إلى `‎setTimeout‎`.

وحين نضبط بعضًا من مُعاملات إحدى الدوال، يكون الناتج (وهو أكثر تفصيلًا) دالةً ندعوها بالدالة *الجزئية* أو *المطبّقة بنحوٍ جزئي* _partially applied_.

تُفيدنا هذه الدوال الجزئية حين لا نريد تكرار ذات الوسيط مرارًا وتكرارًا، مثل دالة `‎send(from, to)‎` حيث يجب أن يبقى `‎from‎` كما هو في مهمّتنا هذه، فنأخذ دالة جزئية ونتعامل بها.
## تمارين
### دالة ربط على أنّها تابِع
_الأهمية: 5_

ما ناتج هذه الشيفرة؟

```
function f() {
  alert( this ); // ØŸ
}

let user = {
  g: f.bind(null)
};

user.g();
```

#### الحل
الجواب هو: `‎null‎`.

سياق دالة الربط مكتوب في الشيفرة (hard-coded) ولا يمكن تغييره لاحقًا بأيّ شكل من الأشكال.

فحتّى لو شغّلنا `‎user.g()‎` فستُستدعى الدالة الأصلية بضبط `‎this=null‎`.
### ربطة ثانية
_الأهمية: 5_

هي يمكن أن نغيّر قيمة `‎this‎` باستعمال ربطة إضافية؟

ما ناتج هذه الشيفرة؟

```
function f() {
  alert(this.name);
}

f = f.bind( {name: "John"} ).bind( {name: "Ann" } );

f();
```

#### الحل
الجواب هو: **John**.

```
function f() {
  alert(this.name);
}

f = f.bind( {name: "John"} ).bind( {name: "Pete"} );

f(); // John
```

لا يتذكّر كائن [دالة الربط](https://tc39.github.io/ecma262/#sec-bound-function-exotic-objects) «الدخيل» (الذي يُعيده `‎f.bind(...)‎`) السياق (مع الوُسطاء إن مُرّرت) - لا يتذكّر هذا كلّه إلى وقت إنشاء الكائن.

أي: لا يمكن إعادة ربط الدوال.
### خاصية الدالة بعد الربط
_الأهمية: 5_

تمتلك خاصية إحدى الدوال قيمة ما. هل ستتغيّر بعد `‎bind‎`؟ نعم، لماذا؟ لا، لماذا؟

```
function sayHi() {
  alert( this.name );
}
sayHi.test = 5;

let bound = sayHi.bind({
  name: "John"
});

alert( bound.test ); // ما الناتج؟ لماذا؟
```

#### الحل
الجواب هو: `‎undefined‎`.

ناتِج `‎bind‎` هو كائن آخر، وليس في هذا الكائن خاصية `‎test‎`.

### أصلِح هذه الدالة التي يضيع «this» منها
_الأهمية: 5_

على الاستدعاء `‎askPassword()‎` في الشيفرة أسفله فحص كلمة السر، ثمّ استدعاء `‎user.loginOk/loginFail‎` حسب نتيجة الفحص.

ولكن أثناء التنفيذ نرى خطأً. لماذا؟

أصلِح الجزء الذي فيه `‎(*)‎` لتعمل الشيفرة كما يجب (تغيير بقية الأسطر ممنوع).

```
function askPassword(ok, fail) {
  let password = prompt("Password?", '');
  if (password == "rockstar") ok();
  else fail();
}

let user = {
  name: 'John',

  loginOk() {
    alert(`‎${this.name} logged in‎`);
  },

  loginFail() {
    alert(`‎${this.name} failed to log in‎`);
  },

};

askPassword(user.loginOk, user.loginFail); // (*)
```
#### الحل
سبب الخطأ هو أنّ الدالة `‎ask‎` تستلم الدالتين `‎loginOk/loginFail‎` دون كائنيهما.

فمتى ما استدعتهما، تُعدّ `‎this=undefined‎` بطبيعتها.

علينا ربط السياق!

```
function askPassword(ok, fail) {
  let password = prompt("Password?", '');
  if (password == "rockstar") ok();
  else fail();
}

let user = {
  name: 'John',

  loginOk() {
    alert(`‎${this.name} logged in‎`);
  },

  loginFail() {
    alert(`‎${this.name} failed to log in‎`);
  },

};

// (*)\maskPassword(user.loginOk.bind(user), user.loginFail.bind(user));
```

الآن صارت تعمل.

أو، بطريقة أخرى:
```
//...
askPassword(() => user.loginOk(), () => user.loginFail());
```

هذه الشيفرة تعمل وعادةً ما تكون سهلة القراءة أيضًا.

ولكنّها في حالات أكثر تعقيدًا تصير أقلّ موثوقية، مثل لو تغيّر المتغير `‎user‎` *بعدما* استُدعيت الدالة `‎askPassword‎` و*قبل* أن يُجيب الزائر على الاستدعاء `‎() => user.loginOk()‎`.
### استعمال الدوال الجزئية لولوج المستخدم

هذا التمرين معقّد أكثر من سابقه، بقليل.

هنا تعدّل كائن `‎user‎`، فصار فيه بدل الدالتين `‎loginOk/loginFail‎` دالة واحدة `‎user.login(true/false)‎`.

ما الأشياء التي نمرّرها إلى `‎askPassword‎` في الشيفرة أسفله فتستدعي `‎user.login(true)‎` باستعمال `‎ok‎` وتستدعي `‎user.login(false)‎` باستعمال `‎fail‎`؟

```
function askPassword(ok, fail) {
  let password = prompt("Password?", '');
  if (password == "rockstar") ok();
  else fail();
}

let user = {
  name: 'John',

  login(result) {
    alert( this.name + (result ? ' logged in' : ' failed to log in') );
  }
};

askPassword(?, ?); // ØŸ (*)
```

يجب أن تعدّل الجزء الذي عليه `‎(*)‎` فقط لا غير.

#### الحل
1. نستعمل دالة غالِفة... سهمية لو أردنا التفصيل:

    ```
    askPassword(() => user.login(true), () => user.login(false));
    ```

    هكذا تأخذ `‎user‎` من المتغيرات الخارجية وتُشغّل الدوال بالطريقة العادية.

2. أو نصنع دالة جزئية من `‎user.login‎` تستعمل `‎user‎` سياقًا لها ونضع مُعاملها الأول كما يجب:


    ```
    askPassword(user.login.bind(user, true), user.login.bind(user, false));
    ```

ترجمة -وبتصرف- للفصل [Function binding](https://javascript.info/bind) من كتاب [The JavaScript language](https://javascript.info/js)