٥.١ الطريقة call()¶

أساسيات call()¶

التمرين 1: أنشئ دالة عادية تعرض Hello في وحدة التحكم.

function displayHello(){
  console.log("Hello");
}

displayHello();

النتيجة هي: Hello

التمرين 2: ارجع إلى التمرين 1؛ استدعِ displayHello باستخدام displayHello.call().

function displayHello(){
  console.log("Hello");
}

displayHello.call();

النتيجة هي: Hello

التمرين 3: أنشئ دالة عادية ترحّب بالمستخدم باسمه.

function greetUser(name){
  console.log(`Hello ${name}`);
}

greetUser("Nawras");

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

التمرين 4: ارجع إلى التمرين 3؛ استدعِ greetUser باستخدام greetUser.call(this, "Nawras").

function greetUser(name){
  console.log(`Hello ${name}`);
}

greetUser.call(this, "Nawras");

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

التمرين 5: أنشئ دالة عادية تُرجع this . استدعِ الدالة باستخدام funcName.call()

function returnsThis(){
  return this;
}

var val = returnsThis.call();

console.log(val);

النتيجة هي: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

التمرين 6: أنشئ دالة عادية تُرجع a * b. استدعِ الدالة باستخدام functionName.call().

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

var res = mul.call(this, 20, 8);
console.log(res);

النتيجة هي: 160

التمرين 7: أنشئ دالة عادية تُرجع num1 + num2 + num3 + num4. استدعِ الدالة باستخدام functionName.call().

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

var res = add.call(this, 5, 6, 0, 1);
console.log(res);

النتيجة هي: 12

التمرين 8: أنشئ دالة تُرجع التمثيل المنطقي لقيمة، واستدعِها باستخدام functionName.call().

function validateValue(value){
  return !!value;
}

var res1 = validateValue.call(this, null);
var res2 = validateValue.call(this, 1);
var res3 = validateValue.call(this, undefined);

console.log(res1, res2, res3);

النتيجة هي: false true false

١. call()

call() طريقة لاستدعاء دالة.

المزيد عن call()¶

التمرين 9: ارجع إلى التمرين 5؛ استدعِ الدالة باستخدام returnsThis.call({})

function returnsThis(){
  return this;
}

var val = returnsThis.call({});

console.log(val);

النتيجة هي: {}

التمرين 10: ارجع إلى التمرين 9؛ استدعِ الدالة باستخدام returnsThis.call(obj).

function returnsThis(){
  return this;
}

var obj = {
  a: 1,
  b: 2,
  c: 3
}
var val = returnsThis.call(obj);

console.log(val);

النتيجة هي: {a: 1, b: 2, c: 3}

التمرين 11: ارجع إلى التمرين 9؛ استدعِ الدالة باستخدام returnsThis.call(window).

function returnsThis(){
  return this;
}

var val = returnsThis.call(window);

console.log(val);

النتيجة هي: Window {window: Window, self: Window, document: document, name: "", location: Location, …}

التمرين 12: ارجع إلى التمرين 7؛ استدعِ الدالة مع this=window.

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

var res = add.call(window, 5, 6, 0, 1);
console.log(res);

النتيجة هي: 12

التمرين 13: ارجع إلى التمرين 12؛ استدعِ الدالة مع this=obj.

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

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

var res = add.call(obj, 5, 6, 0, 1);

console.log(res);

النتيجة هي: 12

التمرين 14: لديك الكائن التالي؛ استدعِ الطريقة returning باستخدام call(window)

var obj = {
  returning: function(){
    return this;
  }
}

var result = obj.returning.call(window);
console.log(result);

النتيجة هي: Window {window: Window, self: Window, document: document, name: "", location: Location, …}

التمرين 15: ارجع إلى التمرين 14؛ استدعِ returning باستخدام call(obj).

var obj = {
  returning: function(){
    return this;
  }
}

var result = obj.returning.call(obj);
console.log(result);

النتيجة هي: {returning: ƒ}

التمرين 16: ارجع إلى التمرين 14؛ استدعِ returning باستخدام call({}).

var obj = {
  returning: function(){
    return this;
  }
}

var result = obj.returning.call({});
console.log(result);

النتيجة هي: {}

التمرين 17: ارجع إلى التمرين 14؛ استدعِ returning باستخدام call(obj2).

var obj = {
  returning: function(){
    return this;
  }
}

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

var result = obj.returning.call(obj2);
console.log(result);

النتيجة هي: {a: 1, b: 2, c: 3}

٢. call()

call() تتيح تحديد القيمة التي تشير إليها this عند استدعاء الدالة.

call() وطرائق الكائنات¶

التمرين 18: لديك الكائنات التالية؛ استدعِ person1.bio على person2 .

var person1 = {
  name: "Ola",
  profession: "doctor",
  hobby: "cooking",
  bio: function(){
    return `${this.name} is a ${this.profession} and she loves ${this.hobby}`;
  }
};

person2 = {
  name: "Ali",
  profession: "joy creator",
  hobby: "Creating new things"
};

var result = person1.bio.call(person2);
console.log(result);

النتيجة هي: Ali is a joy creator and she loves Creating new things

التمرين 19: لديك الكائنات التالية؛ استدعِ song1.description على song2 .

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.call(song2);
console.log(result);

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

التمرين 20: لديك الكائنات التالية؛ استدعِ lang1.stableReleaseVerbose على lang2 .

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.call(lang2);
console.log(result);

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

٣. call()

call() تتيح استدعاء طريقة كائن مع كائن آخر بوصفه this.

call() مع الوسائط¶

التمرين 21: لديك الكائنات التالية؛ استدعِ epic1.comment على epic2 مع epic2.author="Valmiki".

var epic1 = {
  name: "Mahabharata",
  author: "Vyasa",
  language: "Sanskrit",
  verses: 200000,
  comment: function(){
    return `${this.name} is a worth-reading epic. It is written in the ${this.language} language by ${this.author}.`
  }
};

var epic2 = {
  name: "Ramayana",
  language: "Sanskrit"
};

var result = epic1.comment.call(epic2, epic2.author="Valmiki");
console.log(result);

النتيجة هي: Ramayana is a worth-reading epic. It is written in the Sanskrit language by Valmiki.

التمرين 22: لديك الكائن التالي؛ استدعِ obj1.average على {total:60} مع count=3.

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

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

النتيجة هي: 20

التمرين 23: لديك الكائن التالي؛ استدعِ obj1.calc على {a: 5, b: 2}} مع randomNumber=10.

var obj1 = {
  a: 1,
  b: 2,
  calc: function(randomNumber){
    return this.a + this.b + randomNumber;
  }
};

var result = obj1.calc.call({a: 5, b: 2}, 10);
console.log(result);

النتيجة هي: 17

التمرين 24: لديك الكائنات التالية؛ استدعِ user1.more على user2 object بـ group="group nine".

var user1 = {
  name: "Sanad",
  more: function(group){
    return `${this.name} is from ${group}`
  }
};

var user2 = {
  name: "Jad"
};

var result = user1.more.call(user2, "group nine");
console.log(result);

النتيجة هي: Jad is from group nine

التمرين 25: لديك الكائنات التالية؛ استدعِ galaxy1.info على galaxy2 مع user1, user2، و user3 وسائطَ.

var galaxy1 = {
  name: "Milky Way",
  desc: "the galaxy containing the solar system, sun and earth",
  info: function(user1, user2, user3){
    return `${this.name} is ${this.desc}. Here is what people say about this galaxy: ${user1.comment}, ${user2.comment}, ${user3.comment}...etc.`
  }
}

var galaxy2 = {
  name: "Large Magellanic Cloud",
  desc: "visible only from the southern hemisphere"
}

var user1 = {
  name: "Jad",
  comment: "It is amazing"
};

var user2 = {
  name: "Sanad",
  comment: "Wow!"
};

var user3 = {
  name: "Ali",
  comment: "I love stars!"
};


var result = galaxy1.info.call(galaxy2, user1, user2, user3);
console.log(result);

النتيجة هي: Large Magellanic Cloud is visible only from the southern hemisphere. Here is what people say about this galaxy: It is amazing, Wow!, I love stars!...etc.

٤. call()

call() تتيح استدعاء طريقة مع كائن آخر وتمرير وسائط منفصلة.

call() وإعادة استخدام البواني¶

التمرين 26: تأمّل الشيفرة التالية.

function Food(group){
  this.group = group;
}

function Fruit(name, group){
  Food.call(this, group)
  this.name = name;
}

var apple = new Fruit("apple", "fruits");
console.log(apple.name);
console.log(apple.group);

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

apple
fruits

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

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

function Organization(name, goal){
  this.goal = goal;
  Entity.call(this, name);
}

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

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

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

UN
To achieve international cooperation

التمرين 28: استدعِ Device داخل الباني WashingMachine باستخدام Call().

function Device(name, energyUsed){
  this.name = name;
  this.energyUsed = energyUsed;
}

function WashingMaching(name, energyUsed, automatic){
  this.automatic = automatic;
  Device.call(this, name, energyUsed);
}

var wM1= new WashingMaching("Washing Machine", "Electrical", true);

console.log(wM1.name);
console.log(wM1.energyUsed);
console.log(wM1.automatic);

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

Washing Machine
Electrical
true

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

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.call(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", …}

التمرين 30: استدعِ Thing داخل الباني Laptop باستخدام Call().

function Thing(name, func){
  this.name = name;
  this.func = func;
}

function Laptop(name, func, processor, priceRange){
  this.processor = processor;
  this.priceRange = priceRange;
  Thing.call(this, name, func);
}

var laptop1 = new Laptop("Laptop", "computation", "Intel i7", "500-1000USD");

console.log(laptop1);

النتيجة هي: Laptop {processor: "Intel i7", priceRange: "500-1000USD", name: "Laptop", func: "computation"}

٥. call()

استدعاء باني داخل باني آخر باستخدام call() يعيد استخدام تهيئة الخصائص على الكائن الحالي، لكنه لا يربط سلسلة النماذج الأولية تلقائيًا.