٢٥ مارس ٢٠٢١

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

ثمّة مشكلة معروفة تواجهنا متى مرّرنا توابِع الكائنات على أنّها ردود نداء (كما نفعل مع ‎setTimeout‎)، هي ضياع هويّة الأنا ‎this‎.

سنرى في هذا الفصل طرائق إصلاح هذه المشكلة.

ضياع الأنا (الكلمة المفتاحية this)

رأينا قبل الآن أمثلة كيف ضاعت قيمة ‎this‎. فما نلبث أن مرّرنا التابِع إلى مكان آخر منفصلًا عن كائنه، ضاع ‎this‎.

إليك ظواهر هذه المشكلة باستعمال ‎setTimeout‎ مثلًا:

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

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

كما رأينا في ناتج الشيفرة، لم نرحّب بالأخ «John» (كما أردنا باستعمال ‎this.firstName‎)، بل بالأخ غير المعرّف ‎undefined‎!

هذا لأنّ التابِع ‎setTimeout‎ استلم الدالة ‎user.sayHi‎ منفصلةً عن كائنها. يمكن أن نكتب السطر الأخير هكذا:

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

بالمناسبة فالتابِع ‎setTimeout‎ داخل المتصفّحات يختلف قليلًا، إذ يضبط ‎this=window‎ حين نستدعي الدالة (بينما في Node.js يصير ‎this‎ هو ذاته كائن المؤقّت، ولكنّ هذا ليس بالأمر المهم الآن). يعني ذلك بأنّ ‎this.firstName‎ هنا هي فعليًا ‎window.firstName‎، وهذا المتغير غير موجود. عادةً ما تصير ‎this‎ غير معرّفة ‎undefined‎ في الحالات الأخرى.

كثيرًا ما نواجه هذه المسألة ونحن نكتب الشيفرة: نريد أن نمرّر تابِع الدالة إلى مكان آخر (مثل هنا، مرّرناه للمُجدول) حيث سيُستدعى من هناك. كيف لنا أن نتأكّد بأن يُستدعى في سياقه الصحيح؟

الحل رقم واحد: نستعمل دالة مغلفة

أسهل الحلول هو استعمال دالة غالِفة Wrapping function:

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

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

الآن اكتملت المهمة إذ استلمنا المستخدم ‎user‎ من البيئة المُعجمية الخارجية، وثمّ استدعينا التابِع كما العادة.

إليك ذات المهمة بأسطر أقل:

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

ممتازة جدًا، ولكن ستظهر لنا نقطة ضعف في بنية الشيفرة.

ماذا لو حدث وتغيّرت قيمة ‎user‎ قبل أن تعمل ‎setTimeout‎؟ (لا تنسَ التأخير، ثانية كاملة!) حينها سنجد أنّا استدعينا الكائن الخطأ دون أن ندري!

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

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

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

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

الحل الثاني سيضمن لنا ألّا تحدث هكذا أمور غير متوقّعة.

الحل رقم اثنين: ربطة

تقدّم لنا الدوال تابِعًا مضمّنًا في اللغة باسم bind يتيح لنا ضبط قيمة ‎this‎.

إليك صياغته الأساسية:

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

ناتِج التابِع ‎func.bind(context)‎ هو «كائن دخيل» يشبه الدالة ويمكن لنا استدعائه على أنّه دالة، وسيمرّر هذا الاستدعاء إلى ‎func‎ بعدما يضبط ‎this=context‎ من خلف الستار.

أي بعبارة أخرى، لو استدعينا ‎boundFunc‎ فكأنّما استدعينا ‎func‎ بعدما ضبطنا قيمة ‎this‎.

إليك مثالًا تمرّر فيه ‎funcUser‎ الاستدعاء إلى ‎func‎ بضبط ‎this=user‎:

let user = {
  firstName: "John"
};

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

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

رأينا «النسخة الرابطة» من ‎func‎، ‏‎func.bind(user)‎ بعد ضبط ‎this=user‎.

كما أنّ المُعاملات كلّها تُمرّر إلى دالة ‎func‎ الأًصلية «كما هي». مثال:

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!"); }
};

أخذنا في السطر ‎(*)‎ التابِع ‎user.sayHi‎ وربطناه مع المستخدم ‎user‎. ندعو الدالة ‎sayHi‎ بالدالة «المربوطة» حيث يمكن أن نستدعيها لوحدها هكذا أو نمرّرها إلى ‎setTimeout‎. مهما فعلًا فسيكون السياق صحيحًا كما نريد.

نرى هنا أنّ المُعاملات مُرّرت «كما هي» وما ضبطه ‎bind‎ هو قيمة ‎this‎ فقط:

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)

تابِع مفيد: ‎bindAll‎ لو كان للكائن توابِع كثيرة وأردنا تمريرها هنا وهناك بكثرة، فربّما نربطها كلّها في حلقة:

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

JavaScript libraries also provide functions for convenient mass binding , e.g. _.bindAll(object, methodNames) in lodash.

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

طوال هذه الفترة لم نُناقش شيئًا إلّا ربط `‎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)

مهمه

الأهمية: 5

What will be the output?

function f() {
  alert( this ); // ?
}

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

user.g();

The answer: null.

function f() {
  alert( this ); // null
}

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

user.g();

The context of a bound function is hard-fixed. There’s just no way to further change it.

So even while we run user.g(), the original function is called with this=null.

الأهمية: 5

Can we change this by additional binding?

What will be the output?

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

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

f();

The answer: John.

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

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

f(); // John

The exotic bound function object returned by f.bind(...) remembers the context (and arguments if provided) only at creation time.

A function cannot be re-bound.

الأهمية: 5

There’s a value in the property of a function. Will it change after bind? Why, or why not?

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

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

alert( bound.test ); // what will be the output? why?

The answer: undefined.

The result of bind is another object. It does not have the test property.

الأهمية: 5

The call to askPassword() in the code below should check the password and then call user.loginOk/loginFail depending on the answer.

But it leads to an error. Why?

Fix the highlighted line for everything to start working right (other lines are not to be changed).

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);

The error occurs because ask gets functions loginOk/loginFail without the object.

When it calls them, they naturally assume this=undefined.

Let’s bind the context:

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.bind(user), user.loginFail.bind(user));

Now it works.

An alternative solution could be:

//...
askPassword(() => user.loginOk(), () => user.loginFail());

Usually that also works and looks good.

It’s a bit less reliable though in more complex situations where user variable might change after askPassword is called, but before the visitor answers and calls () => user.loginOk().

الأهمية: 5

The task is a little more complex variant of Fix a function that loses "this".

The user object was modified. Now instead of two functions loginOk/loginFail, it has a single function user.login(true/false).

What should we pass askPassword in the code below, so that it calls user.login(true) as ok and user.login(false) as 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(?, ?); // ?

Your changes should only modify the highlighted fragment.

  1. Either use a wrapper function, an arrow to be concise:

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

    Now it gets user from outer variables and runs it the normal way.

  2. Or create a partial function from user.login that uses user as the context and has the correct first argument:

    askPassword(user.login.bind(user, true), user.login.bind(user, false));
خريطة الدورة التعليمية

التعليقات

إقرأ هذا قبل أن تضع تعليقًا…
  • إذا كان لديك اقتراحات أو تريد تحسينًا - من فضلك من فضلك إفتح موضوعًا فى جيتهاب أو شارك بنفسك بدلًا من التعليقات.
  • إذا لم تستطع أن تفهم شيئّا فى المقال - وضّح ماهو.
  • إذا كنت تريد عرض كود استخدم عنصر <code> ، وللكثير من السطور استخدم <pre>، ولأكثر من 10 سطور استخدم (plnkr, JSBin, codepen…)