٥.٣ الطريقة bind()

bind()

التمرين 1: استدعِ obj1.func على obj2 باستخدام call().

var obj1 = {
  val: 1,
  func: function(){
    return this.val + 5;
  }
};

var obj2 = {
  val: 2
};

var result = obj1.func.call(obj2);
console.log(result);

النتيجة هي: 7

التمرين 2: ارجع إلى التمرين 1؛ استبدل call بـ bind.

var obj1 = {
  val: 1,
  func: function(){
    return this.val + 5;
  }
};

var obj2 = {
  val: 2
};

var result = obj1.func.bind(obj2);
console.log(result);

النتيجة كما يلي:

ƒ (){
    return this.val + 5;
  }

التمرين 3: ارجع إلى التمرين 2; result دالة؛ ما نتيجة استدعائها؟

var obj1 = {
  val: 1,
  func: function(){
    return this.val + 5;
  }
};

var obj2 = {
  val: 2
};

var result = obj1.func.bind(obj2);
console.log(result());

النتيجة هي: 7

التمرين 4: استدعِ الدالة التالية باستخدام call().

function greet(name){
  return `Hello dear ${name}`;
}

var result = greet.call(window, "Nawras");
console.log(result);

النتيجة هي: Hello dear Nawras

التمرين 5: ارجع إلى التمرين 4؛ استبدل call بـ bind.

function greet(name){
  return `Hello dear ${name}`;
}

var result = greet.bind(window, "Nawras");
console.log(result);

النتيجة كما يلي:

ƒ greet(name){
  return `Hello dear ${name}`;
}

التمرين 6: ارجع إلى التمرين 5; result دالة؛ ما نتيجة استدعائها؟

function greet(name){
  return `Hello dear ${name}`;
}

var result = greet.bind(window, "Nawras");
console.log(result());

النتيجة هي: Hello dear Nawras

الدالة bind()

العامل bind() تُنشئ دالة جديدة قابلة للاستدعاء، مرتبطة بقيمة this وبوسائط محدّدة.

---

تدريبات إضافية

التمرين 7: اربط person1.speaks بـ person2 .

var person1 = {
  name: "Sangeeta",
  languages: "Hindi, Sanskrit, and Tamil",
  speaks: function(){
    return `${this.name} speaks ${this.languages}.`;
  }
};


var person2 = {
  name: "Nada",
  languages: "Arabic, French, Spanish, and English"
}

var result = person1.speaks.bind(person2);
console.log(result);

النتيجة كما يلي:

ƒ (){
    return `${this.name} speaks ${this.languages}.`;
  }

التمرين 8: ارجع إلى التمرين 7؛ ما نتيجة console.dir(result)?

var person1 = {
  name: "Sangeeta",
  languages: "Hindi, Sanskrit, and Tamil",
  speaks: function(){
    return `${this.name} speaks ${this.languages}.`;
  }
};


var person2 = {
  name: "Nada",
  languages: "Arabic, French, Spanish, and English"
}

var result = person1.speaks.bind(person2);
console.dir(result);

النتيجة كما يلي:

ƒ bound speaks()
    arguments: (...)
    caller: (...)
    length: 0
    name: "bound speaks"
    __proto__: ƒ ()
    [[TargetFunction]]: ƒ ()
    [[BoundThis]]: Object
        languages: "Arabic, French, Spanish, and English"
        name: "Nada"
        __proto__: Object
    [[BoundArgs]]: Array(0)
        length: 0
        __proto__: Array(0)

الدالة المرتبطة

الدالة المرتبطة دالة ثُبّتت لها قيمة this مع وسائط محدّدة.

التمرين 9: ارجع إلى التمرين 7; result دالة؛ ما نتيجة استدعائها؟

var person1 = {
  name: "Sangeeta",
  languages: "Hindi, Sanskrit, and Tamil",
  speaks: function(){
    return `${this.name} speaks ${this.languages}.`;
  }
};


var person2 = {
  name: "Nada",
  languages: "Arabic, French, Spanish, and English"
}

var result = person1.speaks.bind(person2);
console.log(result());

النتيجة هي: Nada speaks Arabic, French, Spanish, and English.

التمرين 10: اربط الدالة add على obj وبالوسائط 5, 6, 0, 1.

function add(num1, num2, num3, num4){
  return num1 + num2 + num3 + num4;
}

var obj = {
  a: 1,
  b: 2,
  c: 2
};

var result = add.bind(obj, 5, 6, 0, 1);

console.log(result());

النتيجة هي: 12

التمرين 11: اربط min إلى obj، وبالوسائط obj.a و obj.bعلى الترتيب.

function min(a, b){
  return a < b ? a : b;
}

var obj = {
  a: 5,
  b: 10
}

var boundFunction = min.bind(obj, obj.a, obj.b);
console.log(boundFunction());

النتيجة هي: 5

التمرين 12: ارجع إلى التمرين 11؛ غيّر قيمة obj.a على 20. ما نتيجة استدعاء boundFunction?

function min(a, b){
  return a < b ? a : b;
}

var obj = {
  a: 5,
  b: 10
}
obj.a = 20;

var boundFunction = min.bind(obj, obj.a, obj.b);
console.log(boundFunction());

النتيجة هي: 10

التمرين 13: اربط house إلى {}، وبالوسائط f و a.

function house(floor, area){
  return `A ${area} square meter house with ${floor} floor(s)`;
}

var f = 4;
var a = 200;

var boundFunction = house.bind({}, f, a);
console.log(boundFunction());

النتيجة هي: A 200 square meter house with 4 floor(s)

التمرين 14: اربط checkPassword بـ user .

function checkPassword(pass){
  return this.pass.length > 12 ? "Strong" : "Weak";
}

var user = {
  name: "Ali",
  pass: "14789456",
  email: "ali@mail.com"
};

var boundFunction = checkPassword.bind(user);
console.log(boundFunction());

النتيجة هي: Weak

التمرين 15: ارجع إلى التمرين 14؛ غيّر user.pass على 1234567891234.

function checkPassword(){
  return this.pass.length > 12 ? "Strong" : "Weak";
}

var user = {
  name: "Ali",
  pass: "14789456",
  email: "ali@mail.com"
};
user.pass = "1234567891234";

var boundFunction = checkPassword.bind(user);
console.log(boundFunction());

النتيجة هي: Strong

التمرين 16: اربط counting إلى obj.

var counting = function() {
  for(var i=this.firstNum; i<= this.secondNum; i++){
    console.log(i);
  }
  return "done";
}

var obj = {
  firstNum: 10,
  secondNum: 13
};

var boundFunction = counting.bind(obj);
console.log(boundFunction());

النتيجة كما يلي:

10
11
12
13
done

التمرين 17: اربط obj1.starsNo على obj2.

var obj1 = {
  star1: 1,
  star2: 2,
  starsNo: function(){
    return this.star1 + this.star2 + this.star3;
  }
};

var obj2 = {
  star1: 10,
  star2: 20,
  star3: 30
};

var result = obj1.starsNo.bind(obj2)
console.log(result());

النتيجة هي: 60

التمرين 18: اربط calc إلى obj.

function calc(num1, num2, num3){
  return (num1 + num2 + num3 + 5) / this.count;
}

var obj = {
  count: 5
};

var result = calc.bind(obj, 5, 10, 5);
console.log(result());

النتيجة هي: 5