٥.٢ الطريقة apply()

المقارنة بين apply() وcall()

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

function returnOne(){
  return 1;
}

var result = returnOne.call();
console.log(result);

النتيجة هي: 1

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

function returnOne(){
  return 1;
}

var result = returnOne.apply();
console.log(result);

النتيجة هي: 1

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

function calc(num){
  return num / 2;
};

var result = calc.call(this, 100);
console.log(result);

النتيجة هي: 50

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

function calc(num){
  return num / 2;
};

var result = calc.apply(this, 100);
console.log(result);

النتيجة هي: Uncaught TypeError: CreateListFromArrayLike called on non-object

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

function calc(num){
  return num / 2;
};

var result = calc.apply(this, [100]);
console.log(result);

النتيجة هي: 50

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

function calc(num1, num2, num3){
  return (num1 + num2) / num3;
}

var result = calc.call(this, 4, 6, 2);
console.log(result);

النتيجة هي: 5

التمرين 7: ارجع إلى التمرين 7؛ استبدل call بـ apply. تلميح: مرّر الوسائط داخل مصفوفة.

function calc(num1, num2, num3){
  return (num1 + num2) / num3;
}

var result = calc.apply(this, [4, 6, 2]);
console.log(result);

النتيجة هي: 5

apply()

apply() تؤدّي وظيفة مشابهة لـ call()، لكن apply تستقبل الوسائط في مصفوفة أو كائن شبيه بالمصفوفة.

---

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

التمرين 8: استدعِ obj.allWords باستخدام apply.

var obj = {
  firstWord: "Mama",
  secondWord: "Papa",
  allWords: function(){
    return `${this.firstWord}, ${this.secondWord}...etc.`
  }
};

var result = obj.allWords.apply(obj);
console.log(result);

النتيجة هي: Mama, Papa...etc.

التمرين 9: استدعِ Entity داخل الباني Organization باستخدام apply().

function Entity(name){
  this.name = name;
}

function Organization(name, goal){
  this.goal = goal;
  Entity.apply(this, [name]);
}

var org1 = new Organization("UN", "To achieve international cooperation");

console.log(org1.name);
console.log(org1.goal);

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

UN
To achieve international cooperation

التمرين 10: استدعِ Person داخل الباني Programmer باستخدام apply().

function Person(name, height, weight, eyesColor, country){
  this.name = name;
  this.height = height;
  this.weight = weight;
  this.eyesColor = eyesColor;
  this.country = country;
}

function Programmer(name, height, weight, eyesColor, country, languagesUsed, yearsOfExperience){
  this.languagesUsed = languagesUsed;
  this.yearsOfExperience = yearsOfExperience;
  Person.apply(this, [name, height, weight, eyesColor, country]);
}

var programmer1 = new Programmer("Ali", "100cm", "30KG", "blue", "Jordan", "secretLanguage", 4);

console.log(programmer1);

النتيجة هي: Programmer {languagesUsed: "secretLanguage", yearsOfExperience: 4, name: "Ali", height: "100cm", weight: "30KG", …}

التمرين 11: لديك الكائنات التالية؛ استدعِ song1.description على song2 باستخدام apply().

var song1 = {
  title: "Orobroy",
  artist: "Dorantes",
  album: "PASSO A DUE",
  description: function(){
    return `A beautiful song by ${this.artist} from his ${this.album} album.`;
  }
};

var song2 = {
  album: "Purple Rain",
  artist: "Prince"
};

var result = song1.description.apply(song2);
console.log(result);

النتيجة هي: A beautiful song by Prince from his Purple Rain album.

التمرين 12: لديك الكائنات التالية؛ استدعِ lang1.stableReleaseVerbose على lang2 باستخدام apply().

var lang1 = {
  name: "Python",
  stableRelease: "3.8.3",
  stableReleaseVerbose:  function(){
    return `The stable release of ${this.name} is ${this.stableRelease}.`;
  }
};

var lang2 = {
  name: "PHP",
  stableRelease: "7.4.10"
};

var result = lang1.stableReleaseVerbose.apply(lang2);
console.log(result);

النتيجة هي: The stable release of PHP is 7.4.10.

التمرين 13: لديك الكائن التالي؛ استدعِ obj1.average على {total:60} مع count=3. تلميح: استخدم apply().

var obj1 = {
  total: 80,
  average: function(count){
    return this.total/count;
  }
};

var result = obj1.average.apply({total:60}, [3]);
console.log(result);

النتيجة هي: 20