انتقل إلى المحتوى

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

تعديل الدوال البانية — ٢

التمرين 1: احذف fullName من User.prototype التالي. تلميح: استخدم delete User.prototype.fullName

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

User.prototype.fullName = function(){
  return (this.firstName + " " + this.lastName);
}
console.log(User.prototype);

console.log(".................")

delete User.prototype.fullName;
console.log(User.prototype);

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

{fullName: ƒ, constructor: ƒ}
.................
{constructor: ƒ}

التمرين 2: احذف languageVerbose من Epic.prototype التالي.

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

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

{languageVerbose: ƒ, constructor: ƒ}
.............................
{constructor: ƒ}

التمرين 3: احذف category خاصيةً من Video.prototype التالي.

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

Video.prototype.category = "Education";
console.log(Video.prototype);
console.log(".....................")
delete Video.prototype.category;
console.log(Video.prototype);

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

{category: "Education", constructor: ƒ}
.....................
{constructor: ƒ}

التمرين 4: احذف brand خاصيةً من MarkerPen.prototype التالي.

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

MarkerPen.prototype.brand = "Claro";
console.log(MarkerPen.prototype);
console.log(".....................")
delete MarkerPen.prototype.brand;
console.log(MarkerPen.prototype);

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

{brand: "Claro", constructor: ƒ}
.....................
{constructor: ƒ}

التمرين 5: احذف course خاصيةً من Section.prototype التالي.

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

Section.prototype.course = "JavaScript Course";
console.log(Section.prototype);
console.log(".....................")
delete Section.prototype.course;
console.log(Section.prototype);

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

{course: "JavaScript Course", constructor: ƒ}
.....................
{constructor: ƒ}

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

يمكن حذف خاصية أو طريقة من النموذج الأولي باستخدام delete constructorName.prototype.key


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

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

/*
var lesson = {
  title: null,
  difficultyLevel: null
};
*/

function Lesson(title, diffLev){
  this.title = title;
  this.difficultyLevel = diffLev;
}

التمرين 7: ارجع إلى التمرين 6؛ أضف section خاصيةً إلى Lesson.prototype. اضبط section على Section 1.

function Lesson(title, diffLev){
  this.title = title;
  this.difficultyLevel = diffLev;
}

Lesson.prototype.section = "Section 1";
console.log(Lesson.prototype);

النتيجة هي: {section: "Section 1", constructor: ƒ}

التمرين 8: ارجع إلى التمرين 7؛ أضف about طريقةً إلى Lesson.prototype. اضبط about على {title} is {difficultyLevel} and it comes under {section} discussion

function Lesson(title, diffLev){
  this.title = title;
  this.difficultyLevel = diffLev;
}

Lesson.prototype.section = "Section 1";
Lesson.prototype.about = function(){
  return `The difficulty level of ${this.title} is ${this.difficultyLevel} and it comes under ${this.section} discussion.`;
}

var lesson1 = new Lesson("Array Helpers", "Normal");
var lesson2 = new Lesson("Objects", "Easy");

console.log(lesson1.about());
console.log(lesson2.about());

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

The difficulty level of Array Helpers is Normal and it comes under Section 1 discussion.
The difficulty level of Objects is Easy and it comes under Section 1 discussion.

التمرين 9: ارجع إلى التمرين 8؛ اعرض جميع الخصائص والطرائق المضافة إلى lesson.prototype.

function Lesson(title, diffLev){
  this.title = title;
  this.difficultyLevel = diffLev;
}

Lesson.prototype.section = "Section 1";
Lesson.prototype.about = function(){
  return `The difficulty level of ${this.title} is ${this.difficultyLevel} and it comes under ${this.section} discussion.`;
}

for (var prop in Lesson.prototype){
  console.log(`${prop}:${Lesson.prototype[prop]}`);
}

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

section:Section 1
about:function(){
  return `The difficulty level of ${this.title} is ${this.difficultyLevel} and it comes under ${this.section} discussion.`;
}

التمرين 10: ارجع إلى التمرين 9؛ احذف about من Lesson.prototype.

function Lesson(title, diffLev){
  this.title = title;
  this.difficultyLevel = diffLev;
}

Lesson.prototype.section = "Section 1";
Lesson.prototype.about = function(){
  return `The difficulty level of ${this.title} is ${this.difficultyLevel} and it comes under ${this.section} discussion.`;
}

for (var prop in Lesson.prototype){
  console.log(`${prop}:${Lesson.prototype[prop]}`);
}
console.log("......................");
delete Lesson.prototype.about;
for (var prop in Lesson.prototype){
  console.log(`${prop}:${Lesson.prototype[prop]}`);
}

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

section:Section 1
about:function(){
  return `The difficulty level of ${this.title} is ${this.difficultyLevel} and it comes under ${this.section} discussion.`;
}
......................
section:Section 1

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

/*
var quote = {
  author: null,
  source: null,
  theWord: null
};
*/

function Quote(author, src, word){
  this.author = author;
  this.source = src;
  this.theWord = word;
}

التمرين 12: ارجع إلى التمرين 11؛ أضف date خاصيةً إلى Quote.prototype، واضبط date على Date.now().

function Quote(author, src, word){
  this.author = author;
  this.source = src;
  this.theWord = word;
}

Quote.prototype.date = Date.now();

console.log(Quote.prototype);

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

التمرين 13: ارجع إلى التمرين 12؛ أضف mentions خاصيةً إلى Quote.prototype، واضبط mentions على ["book1", "book2", "book3"].

function Quote(author, src, word){
  this.author = author;
  this.source = src;
  this.theWord = word;
}

Quote.prototype.date = Date.now();
Quote.prototype.mentions = ["book1", "book2", "book3"];

console.log(Quote.prototype);

النتيجة هي: {date: 1601195642503, mentions: Array(3), constructor: ƒ}

التمرين 14: ارجع إلى التمرين 13؛ أضف category خاصيةً إلى Quote.prototype، واضبط category على religious.

function Quote(author, src, word){
  this.author = author;
  this.source = src;
  this.theWord = word;
}

Quote.prototype.date = Date.now();
Quote.prototype.mentions = ["book1", "book2", "book3"];
Quote.prototype.category = "religious";

console.log(Quote.prototype);

النتيجة هي: {date: 1601195713013, mentions: Array(3), category: "religious", constructor: ƒ}

التمرين 15: ارجع إلى التمرين 14؛ اعرض جميع الخصائص والطرائق المضافة إلى Quote.prototype.

function Quote(author, src, word){
  this.author = author;
  this.source = src;
  this.theWord = word;
}

Quote.prototype.date = Date.now();
Quote.prototype.mentions = ["book1", "book2", "book3"];
Quote.prototype.category = "religious";

for (var prop in Quote.prototype){
  console.log(`${prop}:${Quote.prototype[prop]}`);
}

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

date:1601195806427
mentions:book1,book2,book3
category:religious

التمرين 16: ارجع إلى التمرين 15؛ احذف category خاصيةً من Quote.prototype.

function Quote(author, src, word){
  this.author = author;
  this.source = src;
  this.theWord = word;
}

Quote.prototype.date = Date.now();
Quote.prototype.mentions = ["book1", "book2", "book3"];
Quote.prototype.category = "religious";

for (var prop in Quote.prototype){
  console.log(`${prop}:${Quote.prototype[prop]}`);
}
console.log(".......");

delete Quote.prototype.category;
for (var prop in Quote.prototype){
  console.log(`${prop}:${Quote.prototype[prop]}`);
}

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

date:1601195925683
mentions:book1,book2,book3
category:religious
.......
date:1601195925683
mentions:book1,book2,book3