٤.١٣ النماذج الأولية — الجزء الثاني¶

`.proto` مقابل `.prototype`¶

التمرين 1: أنشئ كائن تاريخ جديدًا. ما نموذجه الأولي؟

var date = new Date();

console.log(date.__proto__);

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

التمرين 2: ارجع إلى التمرين 1؛ هل date.__proto__ يساوي Date.prototype?

var date = new Date();

console.log(date.__proto__ === Date.prototype);

النتيجة هي: true

التمرين 3: أنشئ مصفوفة جديدة. ما نموذجها الأولي؟

var arr = new Array();

console.log(arr.__proto__);

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

التمرين 4: ارجع إلى التمرين 3؛ هل arr.__proto__ يساوي Array.prototype?

var arr = new Array();

console.log(arr.__proto__ === Array.prototype);

النتيجة هي: true

التمرين 5: أنشئ دالة جديدة. ما نموذجها الأولي؟

var func = new Function();

console.log(func.__proto__);

النتيجة هي: ƒ () { [native code] }

التمرين 6: ارجع إلى التمرين 5؛ هل func.__proto__ يساوي Function.prototype?

var func = new Function();

console.log(func.__proto__ === Function.prototype);

النتيجة هي: true

التمرين 7: ما النموذج الأولي لـ laptop1 ؟

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

var laptop1 = new Laptop("i5", "2GB", "0.5TB");

console.log(laptop1.__proto__);

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

التمرين 8: ارجع إلى التمرين 7؛ هل laptop1.__proto__ يساوي Laptop.prototype?

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

var laptop1 = new Laptop("i5", "2GB", "0.5TB");

console.log(laptop1.__proto__ === Laptop.prototype);

النتيجة هي: true

التمرين 9: ما النموذج الأولي لـ book1 ؟

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

var book1 = new Book(0.2, 200);

console.log(book1.__proto__);

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

التمرين 10: ارجع إلى التمرين 9؛ هل book1.__proto__ يساوي Book.prototype?

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

var book1 = new Book(0.2, 200);

console.log(book1.__proto__ === Book.prototype);

النتيجة هي: true

الشرح

يرث الكائن خصائص وطرائق نموذجه الأولي. وعند إنشائه باستخدام new، يرتبط عادةً بخاصية prototype للباني وقت الإنشاء.

يمكن الوصول إلى النموذج الأولي للكائن باستخدام obj.__proto__. ويمكن الوصول إلى خاصية prototype للباني باستخدام constructorName.prototype.

تعديل الدوال البانية — ١¶

التمرين 11: أضف fullName طريقةً إلى كائن المستخدم التالي. قيمتها fullName هي firstName lastName.

var user = {
  firstName: "Ola",
  lastName: "Rasi"
}

user.fullName = function(){
  return (this.firstName + " " + this.lastName);
}

console.log(user.fullName())

النتيجة هي: Ola Rasi

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

/*
var user = {
  firstName: null,
  lastName: null,
}
*/

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

var user1 = new User("Ola", "Rasi");

console.log(user1);

النتيجة هي: User {firstName: "Ola", lastName: "Rasi"}

التمرين 13: ارجع إلى التمرين 12؛ ما النموذج الأولي لـ User ؟ هل User.prototype كائن؟

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

console.log(User.prototype);
console.log(typeof User.prototype);

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

{constructor: ƒ}
object

التمرين 14 ارجع إلى التمرين 13; User.prototype كائن؛ أضف إليه الخاصية groupId بالقيمة 57.

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

User.prototype.groupId = 57;

console.log(User.prototype);

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

التمرين 15 ارجع إلى التمرين 14؛ أنشئ كائنات مستخدمين من User .

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

User.prototype.groupId = 57;

var user1 = new User("Ola", "Rasi");
var user2 = new User("Ali", "Zaki");
var user3 = new User("Nawras", "Ali");

console.log(user1);
console.log(user2);
console.log(user3);

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

User {firstName: "Ola", lastName: "Rasi"}
User {firstName: "Ali", lastName: "Zaki"}
User {firstName: "Nawras", lastName: "Ali"}

التمرين 16 ارجع إلى التمرين 15؛ ما قيمة groupId في user1, user2، و user3 ؟

function User(fstName, lstName){
  this.firstName = fstName;
  this.lastName = lstName;
}

User.prototype.groupId = 57;

var user1 = new User("Ola", "Rasi");
var user2 = new User("Ali", "Zaki");
var user3 = new User("Nawras", "Ali");

console.log(user1.groupId);
console.log(user2.groupId);
console.log(user3.groupId);

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

57
57
57

تعديل النماذج الأولية — ١

يمكن إضافة خاصية أو طريقة إلى النموذج الأولي باستخدام constructorName.prototype.newKey = value

التمرين 17: أضف languageVerbose طريقةً إلى Epic التالي. قيمة الطريقة هي {name} was written in {language}.

function Epic(name, author, lang){
  this.name = name;
  this.author = author;
  this.language = lang;
}

Epic.prototype.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.languageVerbose());
console.log(".............................")
console.log(epic2.languageVerbose());

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

Mahabharata was written in Sanskrit.
.............................
Ramayana was written in Sanskrit.

التمرين 18: أضف category خاصيةً إلى Video التالي. قيمة الخاصية هي "Education".

function Video(title, lang){
  this.title = title;
  this.language = lang;
}

Video.prototype.category = "Education";

var video1 = new Video("Create a WordPress Theme", "Arabic");
var video2 = new Video("What is FSF?", "Arabic");
var video3 = new Video("Learn JavaScript in 15 Minutes", "Arabic");

console.log(video1, video1.category);
console.log(video2, video2.category);
console.log(video3, video3.category);

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

Video {title: "Create a WordPress Theme", language: "Arabic"} "Education"
Video {title: "What is FSF?", language: "Arabic"} "Education"
Video {title: "Learn JavaScript in 15Min", language: "Arabic"} "Education"

التمرين 19: أضف brand خاصيةً إلى markerPen التالي. قيمة الخاصية هي "Claro".

function MarkerPen(color, price){
  this.color = color;
  this.price = price;
}

MarkerPen.prototype.brand = "Claro";

var markerPen1 = new MarkerPen("red", "2USD");
var markerPen2 = new MarkerPen("Blue", "2.2USD");

console.log(markerPen1, markerPen1.brand);
console.log(markerPen2, markerPen2.brand);

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

MarkerPen {color: "red", price: "2USD"} "Claro"
MarkerPen {color: "Blue", price: "2.2USD"} "Claro"

التمرين 20: أضف course خاصيةً إلى Section التالي. قيمة الخاصية هي "JavaScript Course".

function Section(title, desc){
    this.title = title;
    this.description = desc;
}

Section.prototype.course = "JavaScript Course";

var section1 = new Section("JavaScript Basics", "Learn the basics of JavaScript in such a simple and easy way.");
var section2 = new Section("JavaScript Functions", "Introduction to JavaScript functions and closures.");
var section3 = new Section("JavaScript Arrays", "Learn about JavaScript arrays and array helpers.");


console.log(section1);
console.log(section1.course);
console.log("................")
console.log(section2);
console.log(section2.course);
console.log("................")
console.log(section3);
console.log(section3.course);

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

Section {title: "JavaScript Basics", description: "Learn the basics of JavaScript in such a simple and easy way."}
JavaScript Course
................
Section {title: "JavaScript Functions", description: "Introduction to JavaScript functions and closures."}
JavaScript Course
................
Section {title: "JavaScript Arrays", description: "Learn about JavaScript arrays and array helpers."}
JavaScript Course

٤.١٣ النماذج الأولية — الجزء الثاني¶

.__proto__ مقابل .prototype¶

تعديل الدوال البانية — ١¶

`.proto` مقابل `.prototype`¶