٤.١٠ تدريبات إضافية

this وطرائق الكائنات

التمرين 1: أنشئ كائنًا بثلاث خصائص هي originalValue, double، و thrice وقيمها 5, originalValue * 2، و originalValue * 3على الترتيب.

var obj = {
  originalValue: 5,
  double: function(){
    return this.originalValue * 2;
  },
  thrice: function(){
    return this.originalValue * 3;
  }
}

console.log(obj.double());
console.log(obj.thrice());

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

10
15

التمرين 2: أعد إنشاء كائن المستخدم التالي، وأضف طريقة باسم fullName بالقيمة firstName LastName.

/*
var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}
*/

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com",
  fullName: function(){
    return this.firstName + " " + this.lastName;
  }
}

console.log(user.fullName());

النتيجة هي: Ali Zaki

التمرين 3: أعد إنشاء كائن الشخص التالي، وأضف طريقة باسم bio بالقيمة {name} is a {profession} and she loves {hobby}.

/*
var person = {
  name: "Ola",
  profession: "Doctor",
  hobby: "Cooking"
}
*/

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

console.log(person.bio());

النتيجة هي: Ola is a doctor and she loves cooking

التمرين 4: أعد إنشاء كائن الأغنية التالي، وأضف طريقة باسم description بالقيمة A beautiful song by {artist} from his {album} album..

/*
var song = {
  title: "Orobroy",
  artist: "Dorantes",
  album: "PASSO A DUE"
}
*/

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

console.log(song.description());

النتيجة هي: A beautiful song by Dorantes from his PASSO A DUE album.

التمرين 5: أعد إنشاء كائن الملحمة التالي، وأضف طريقة باسم comment بالقيمة {name} is a worth-reading epic. It is written in the {language} language by {author}. It has {verses} verses. {summary}.

/*
var epic = {
  name: "Mahabharata",
  author: "Vyasa",
  language: "Sanskrit",
  verses: 200000,
  summary: "It narrates the struggle between two groups of cousins in the Kurukshetra War and the fates of the Kaurava and the Pāṇḍava princes and their successors."
}
*/

var epic = {
  name: "Mahabharata",
  author: "Vyasa",
  language: "Sanskrit",
  verses: 200000,
  summary: "It narrates the struggle between two groups of cousins in the Kurukshetra War and the fates of the Kaurava and the Pāṇḍava princes and their successors.",
  comment: function(){
    return `${this.name} is a worth-reading epic. It is written in the ${this.language} language by ${this.author}. It has ${this.verses} verses. ${this.summary}`;
  }
}

console.log(epic.comment());

النتيجة هي: Mahabharata is a worth-reading epic. It is written in the Sanskrit language by Vyasa. It has 200000. It narrates the struggle between two groups of cousins in the Kurukshetra War and the fates of the Kaurava and the Pāṇḍava princes and their successors.

التمرين 6: أعد إنشاء الكائن programmingLanguage التالي، وأضف طريقة باسم stableReleaseVerbose بالقيمة The stable release of {name} is {stableRelease}..

/*
var programmingLanguage = {
  name: "Python",
  designer: "Guido van Rossum",
  developer: "Python Software Foundation",
  license: "Python Software Foundation License",
  os: " Linux, macOS, and Windows",
  filenameExtension: ".py",
  paradigm: "Multi-paradigm: functional, imperative, object-oriented, structured, reflective",
  stableRelease: "3.8.5"
}
*/

var programmingLanguage = {
  name: "Python",
  designer: "Guido van Rossum",
  developer: "Python Software Foundation",
  license: "Python Software Foundation License",
  os: " Linux, macOS, and Windows",
  filenameExtension: ".py",
  paradigm: "Multi-paradigm: functional, imperative, object-oriented, structured, reflective",
  stableRelease: "3.8.5",
  stableReleaseVerbose: function(){
    return `The stable release of ${this.name} is ${this.stableRelease}.`;
  }
}

console.log(programmingLanguage.stableReleaseVerbose())

النتيجة هي: The stable release of Python is 3.8.5.

التمرين 7: ارجع إلى التمرين 6؛ أضف طريقة جديدة باسم supportedPlatforms بالقيمة {os} support {name}..

var programmingLanguage = {
  name: "Python",
  designer: "Guido van Rossum",
  developer: "Python Software Foundation",
  license: "Python Software Foundation License",
  os: " Linux, macOS, and Windows",
  filenameExtension: ".py",
  paradigm: "Multi-paradigm: functional, imperative, object-oriented, structured, reflective",
  stableRelease: "3.8.5",
  stableReleaseVerbose: function(){
    return `The stable release of ${this.name} is ${this.stableRelease}.`;
  },
  supportedPlatforms: function(){
    return `${this.os} systems support ${this.name}.`
  }
}

console.log(programmingLanguage.supportedPlatforms());

النتيجة هي: Linux, macOS, and Windows systems support Python.

---

this والدوال السهمية

التمرين 8: أعد تنفيذ التمرين 1 باستخدام دالة سهمية.

var obj = {
  originalValue: 5,
  double: () => this.originalValue * 2,
  thrice: () => this.originalValue * 3
}

console.log(obj.double());
console.log(obj.thrice());

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

NaN
NaN

التمرين 9: أعد تنفيذ التمرين 8، أرجع this من double .

var obj = {
  originalValue: 5,
  double: () => this,
  thrice: () => this.originalValue * 3
}

console.log(obj.double());
console.log(obj.thrice());

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

Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
NaN

this والدوال السهمية

عند استخدام this داخل دالة سهمية ضمن كائن، فإن this لا ترتبط بالكائن تلقائيًا؛ بل تحتفظ بقيمتها من السياق المحيط، وهو هنا window .

---

this والدوال البانية

التمرين 10: افحص نتيجة الشيفرة التالية.

function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

var song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");

console.log(song1);

النتيجة هي: Song {title: "Orobroy", artist: "Dorantes", album: "PASSO A DUE"}

الدالة البانية

عند استخدام الكلمة this داخل دالة كما في التمرين 10، ثم استدعاء الدالة باستخدام new، تعمل بوصفها دالة بانية.

وكغيرها من البواني مثل Object, Array, Function, Date، يمكن إنشاء نسخ باستدعائها باستخدام الكلمة new .

this داخل الدوال البانية

this تشير داخل الباني إلى الكائن الجديد الذي يُنشأ عند الاستدعاء باستخدام new.

التمرين 11: ارجع إلى التمرين 10؛ ما نوع song1?

function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

var song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");

console.log(`The type of song1: ${typeof song1}`);

النتيجة هي: The type of song1: object

التمرين 12: ارجع إلى التمرين 10؛ ما الدالة البانية لـ song1?

function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

var song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");

console.log(`The constructor of song1: ${song1.constructor}`);

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

The constructor of song1: function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

التمرين 13: ارجع إلى التمرين 10؛ هل song1 نسخة من Object?

function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

var song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");

console.log(`song1 is an instance of Object: ${song1 instanceof Object}`);

النتيجة هي: song1 is an instance of Object: true

التمرين 14: ارجع إلى التمرين 10؛ هل song1 نسخة من Song?

function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

var song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");

console.log(`song1 is an instance of Song: ${song1 instanceof Song}`);

النتيجة هي: song1 is an instance of Song: true

نسخ الدوال البانية المخصصة

في هذه الأمثلة، تكون الكائنات المنشأة من البواني المخصصة نسخًا من كل من Object و CustomConstructor .