٤.١١ الدوال البانية المخصصة

إنشاء دوال بانية

التمرين 1: مثّل حاسوبًا محمولًا بمعالج Intel i5 وذاكرة 2GB وتخزين 0.5TB.

var laptop = {
  processor: "i5",
  ram: "2GB",
  storage: "0.5TB"
};

التمرين 2: أنشئ بانيًا لحواسيب بمواصفات مختلفة. تلميح: استخدم خصائص التمرين 1.

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(laptop1);
console.log(laptop2);
console.log(laptop3);

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

Laptop {processor: "i5", ram: "2GB", storage: "0.5TB"}
Laptop {processor: "i3", ram: "2GB", storage: "1TB"}
Laptop {processor: "i7", ram: "8GB", storage: "2TB"}

تسمية الدوال البانية

من الأعراف بدء اسم الدالة البانية بحرف كبير.

التمرين 3: أنشئ بانيًا للمستخدمين اعتمادًا على الكائن التالي.

/*
var user = {
  firstName: null,
  lastName: null,
  username: null,
  email: null,
  fullName: function(){
    return this.firstName + " " + this.lastName;
  }
}
*/

function User(fstName, lstName, usrname, email){
  this.firstName = fstName;
  this.lastName = lstName;
  this.username = usrname;
  this.email = email;
  this.fullName = function(){
    return this.firstName + " " + this.lastName;
  };
}

var user1 = new User("Ali", "Zaki", "AliZaki88", "alizaki@mail.com");

console.log(user1);
console.log(user1.fullName());

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

User {firstName: "Ali", lastName: "Zaki", username: "AliZaki88", email: "alizaki@mail.com", fullName: ƒ}
Ali Zaki

التمرين 4: أنشئ بانيًا للملاحم اعتمادًا على الكائن التالي.

/*
var epic = {
  name: null,
  author: null,
  language: null,
  languageVerbose: function(){
    return `${this.name} was written in ${this.language}.`
  }
}
*/

function Epic(name, author, lang){
  this.name = name;
  this.author = author;
  this.language = lang;
  this.languageVerbose =  function(){
    return `${this.name} was written in ${this.language}.`
  }
}

var epic1 = new Epic("Mahabharata", "Vyasa", "Sanskrit");
var epic2 = new Epic("Ramayana", "Valmiki", "Sanskrit");

console.log(epic1);
console.log(epic1.languageVerbose());
console.log(".............................")
console.log(epic2);
console.log(epic2.languageVerbose());

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

Epic {name: "Mahabharata", author: "Vyasa", language: "Sanskrit", languageVerbose: ƒ}
Mahabharata was written in Sanskrit.
.............................
Epic {name: "Ramayana", author: "Valmiki", language: "Sanskrit", languageVerbose: ƒ}
Ramayana was written in Sanskrit.

التمرين 5: أنشئ بانيًا لمقاطع الفيديو اعتمادًا على الكائن التالي.

/*
var video = {
  length: null,
  host: null,
  category: null,
  title: null,
  language: null
};
*/

function Video(title, len, h, lang, cat){
  this.title = title;
  this.length = len;
  this.host = h;
  this.language = lang;
  this.category = cat;
}

var video1 = new Video("Create a WordPress Theme", "30min", "Nawras Ali", "Arabic", "Education");

console.log(video1);

النتيجة هي: Video {title: "Create a WordPress Theme", length: "30min", host: "Nawras Ali", language: "Arabic", category: "Education"}

التمرين 6: أنشئ بانيًا للغات اعتمادًا على الكائن التالي.

/*
var programmingLanguage = {
  name: null,
  os: null,
  filenameExtension: null
  stableRelease: null,
  stableReleaseVerbose: function(){
    return `The stable release of ${this.name} is ${this.stableRelease}.`;
  }
}
*/

function Language(name, os, ext, stableRel){
  this.name = name;
  this.os = os;
  this.extension = ext;
  this.stableRelease = stableRel;
  this.stableReleaseVerbose =  function(){
    return `The stable release of ${this.name} is ${this.stableRelease}.`;
  }
}

var lang1 = new Language("Python", "Linux, macOS, and Windows", "py", "3.8.3");
var lang2 = new Language("PHP", "Unix-like, Windows", "php", "7.4.10");

console.log(lang1);
console.log(lang1.stableReleaseVerbose());
console.log(".......................")
console.log(lang2);
console.log(lang2.stableReleaseVerbose());

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

Language {name: "Python", os: "Linux, macOS, and Windows", extension: "py", stableRelease: "3.8.3", stableReleaseVerbose: ƒ}
The stable release of Python is 3.8.3.
.......................
Language {name: "PHP", os: "Unix-like, Windows", extension: "php", stableRelease: "7.4.10", stableReleaseVerbose: ƒ}
The stable release of PHP is 7.4.10.

التمرين 7: أنشئ بانيًا للكتب اعتمادًا على الكائن التالي.

/*
var book = {
  weight: null,
  pages: null
};
*/

function Book(weight, pages){
  this.weight = weight;
  this.pages = pages;
}

var book1 = new Book(0.2, 200);

console.log(book1);

النتيجة هي: Book {weight: 0.2, pages: 200}

---

النموذج الأولي (Prototype)

التمرين 8: ارجع إلى التمرين 2؛ ما الدالة البانية لـ laptop1 ؟

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(laptop1.constructor);

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

ƒ Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

التمرين 9: ارجع إلى التمرين 2؛ هل laptop1 نسخة من Laptop ؟

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(laptop1 instanceof Laptop);

النتيجة هي: true

التمرين 10: ارجع إلى التمرين 2؛ هل laptop1 نسخة من Object ؟

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(laptop1 instanceof Object);

النتيجة هي: true

التمرين 11: ارجع إلى التمرين 2؛ هل Laptop هل الباني نفسه نسخة من Object ؟

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(Laptop instanceof Object);

النتيجة هي: true

الدوال كائنات

تعلّمنا أن الدوال كائنات. والباني دالة، لذا يكون في هذه الأمثلة أيضًا نسخة من Object.

التمرين 12: ابحث في قاموس عن معنى كلمة prototype.

الـ نموذج الأولي نسخة أولية لشيء تُبنى عليها نسخ أخرى.

التمرين 13: ارجع إلى التمرين 2؛ ما النموذج الأولي لـ Laptop؟ تلميح: استخدم Laptop.prototype.

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(Laptop.prototype);

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

التمرين 14: ارجع إلى التمرين 2؛ ما نوع Laptop ؟ تلميح: استخدم typeof Laptop.prototype.

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(typeof Laptop.prototype);

النتيجة هي: object

النموذج الأولي (Prototype)

النموذج الأولي كائن تستطيع كائنات أخرى وراثة خصائصه وطرائقه.

يمكن الوصول إلى خاصية prototype للدالة البانية باستخدام constructorName.prototype.

التمرين 15: ما النموذج الأولي لـ Date ؟

console.log(Date.prototype);

النتيجة هي: {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}

التمرين 16: ارجع إلى التمرين 15؛ ما نوع Date.prototype؟

console.log(typeof Date.prototype);

النتيجة هي: object

التمرين 17: ما النموذج الأولي لـ Array ؟

console.log(Array.prototype);

النتيجة هي: [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

التمرين 18: ارجع إلى التمرين 17؛ ما نوع Array.prototype؟

console.log(typeof Array.prototype);

النتيجة هي: object

التمرين 19: ما النموذج الأولي لـ Object ؟

console.log(Object.prototype);

النتيجة هي: {constructor: ƒ, defineGetter: ƒ, defineSetter: ƒ, hasOwnProperty: ƒ, lookupGetter: ƒ, …}

التمرين 20: ارجع إلى التمرين 19؛ ما نوع Object.prototype؟

console.log(typeof Object.prototype);

النتيجة هي: object