٦.٥ الوراثة

الأصناف المشتقة

التمرين 1: ادرس المثال التالي.

class Person{

  /* Constructor */
  constructor(name, weight, height){
    this.name = name;
    this.weight = weight; // in KG
    this.height = height; // in cm
  }

  /* Methods */

  /*Height in meters*/
  heightInMeter(){
    return this.height / 100;
  }
  /*Calculate Body Mass Index -BMI- */
  bmi(){
    return this.weight / (this.heightInMeter() ** 2);
  }
}

let person = new Person("Ali", 72, 180);
console.log(person.bmi());

النتيجة هي: 22.2

التمرين 2: ادرس المثال التالي.

class User{

  /* Constructor */
  constructor(name, weight, height){
    this.name = name;
    this.weight = weight; // in KG
    this.height = height; // in cm
  }

  /* Methods */

  //Height in meters
  heightInMeter(){
    return this.height / 100;
  }

  //Calculate Body Mass Index -BMI-
  bmi(){
    return this.weight / (this.heightInMeter() ** 2);
  }

  //Generate a random integer between 0 and 100
  randomNumber(){
    return Math.floor(Math.random() * 100)
  }
  //Generate username
  genTemporaryUsername(){
    return this.name + this.randomNumber();
  }
}

let user = new User("Sanad", 80, 190);
console.log(user);
console.log(user.bmi());
console.log(user.genTemporaryUsername());

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

User {name: "Sanad", weight: 80, height: 190}
22.2
Sanad70

التمرين 3: ادرس المثال التالي.

class Person{

  /* Constructor */
  constructor(name, weight, height){
    this.name = name;
    this.weight = weight; // in KG
    this.height = height; // in cm
  }

  /* Methods */

  //Height in meters
  heightInMeter(){
    return this.height / 100;
  }

  //Calculate Body Mass Index -BMI-
  bmi(){
    return this.weight / (this.heightInMeter() ** 2);
  }
}

class User extends Person{

  /* Methods */

  //Generate a random integer between 0 and 100
  randomNumber(){
    return Math.floor(Math.random() * 100)
  }
  //Generate username
  genTemporaryUsername(){
    return this.name + this.randomNumber();
  }
}

let user = new User("Sanad", 80, 190);
console.log(user);
console.log(user.bmi());
console.log(user.genTemporaryUsername());

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

User {name: "Sanad", weight: 80, height: 190}
22.2
Sanad98

التمرين 4: ادرس المثال التالي.

class Shape{

  /* Constructor */
  constructor(name, sides){
    this.name = name;
    this.sides = sides;
  }

 /* Methods */
 circumference(...sidesLength){
   return sidesLength.reduce((a, b) => a + b, 0);
 }
}

let shape1 = new Shape("Triangle", 3);
let shape2 = new Shape("Rectangular", 4);
let shape3 = new Shape("Square", 4);

console.log(shape1.circumference(5, 6, 7));
console.log(shape2.circumference(2, 4, 2, 4));
console.log(shape3.circumference(10, 10, 10, 10));

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

18
12
40

التمرين 5: ادرس المثال التالي.

class Square{

  /* Constructor */
  constructor(name, sides){
    this.name = name;
    this.sides = sides;
  }

 /* Methods */
 circumference(...sidesLength){
   return sidesLength.reduce((a, b) => a + b, 0);
 }
 area(height){
   return height * height;
 }
}

let sq1 = new Square("Square", 4);
let sq2 = new Square("Square", 4);

console.log(sq1.circumference(10, 10, 10, 10), sq1.area(10));
console.log(sq2.circumference(8, 8, 8, 8), sq1.area(8));

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

40 100
32 64

التمرين 6: ادرس المثال التالي.

class Shape{

  /* Constructor */
  constructor(name, sides){
    this.name = name;
    this.sides = sides;
  }

 /* Methods */
 circumference(...sidesLength){
   return sidesLength.reduce((a, b) => a + b, 0);
 }
}

class Square extends Shape{

  /* Methods */
 area(sideLength){
   return sideLength * sideLength;
 }
}

let sq1 = new Square("Square", 4);
let sq2 = new Square("Square", 4);

console.log(sq1.circumference(10, 10, 10, 10), sq1.area(10));
console.log(sq2.circumference(8, 8, 8, 8), sq1.area(8));

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

40 100
32 64

الأصناف المشتقة

يمكن إنشاء صنف مشتق من صنف أب، فيرث سلوكه وتهيئة خصائصه، ويمكنه إضافة خصائص وطرائق خاصة به.

يمكن إنشاء صنف مشتق باستخدام الكلمة extends.

---

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

التمرين 7: أنشئ صنفًا لكائنات اللغات.

/*
let language = {
  name: null,
  type: null,
  info: function(){
    return `${this.name} is a ${this.type}.`
  }
}
*/

class Language{

  /* Constructor */
  constructor(name, type){
    this.name = name;
    this.type = type;
  }

  /* Methods */
  info(){
    return `${this.name} is a ${this.type} language.`
  }
}

let lang1 = new Language("Arabic", "human");
let lang2 = new Language("Python", "programming");

console.log(lang1.info());
console.log(lang2.info());

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

Arabic is a human language.
Python is a programming language.

التمرين 8: أنشئ صنفًا لكائنات لغات البرمجة.

/*
let programmingLanguage = {
  name: null,
  type: null,
  info: function(){
    return `${this.name} is a ${this.type}.`
  },
  moreInfo: function(designer, firstAppeared){
    return `${this.name} was created by ${designer} in ${firstAppeared}`;
  }
}
*/

class ProgrammingLanguage{

  /* Constructor */
  constructor(name, type){
    this.name = name;
    this.type = type;
  }

  /* Methods */
  info(){
    return `${this.name} is a ${this.type} language.`
  }
  moreInfo(designer, firstAppeared){
    return `${this.name} was created by ${designer} in ${firstAppeared}`;
  }
}

let lang1 = new ProgrammingLanguage("Ruby", "programming");
let lang2 = new ProgrammingLanguage("Python", "programming");

console.log(lang1.info());
console.log(lang1.moreInfo("Yukihiro Matsumoto", 1995));
console.log(".................");
console.log(lang2.info());
console.log(lang2.moreInfo("Guido van Rossum", 1991));

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

Ruby is a programming language.
Ruby was created by Yukihiro Matsumoto in 1995
.................
Python is a programming language.
Python was created by Guido van Rossum in 1991

التمرين 9: ارجع إلى التمرينان 7 و8؛ اجعل ProgrammingLanguage صنفًا مشتقًا من Language .

class Language{

  /* Constructor */
  constructor(name, type){
    this.name = name;
    this.type = type;
  }

  /* Methods */
  info(){
    return `${this.name} is a ${this.type} language.`
  }
}

class ProgrammingLanguage extends Language{

  /* Methods */
  moreInfo(designer, firstAppeared){
    return `${this.name} was created by ${designer} in ${firstAppeared}`;
  }
}

let lang1 = new ProgrammingLanguage("Ruby", "programming");
let lang2 = new ProgrammingLanguage("Python", "programming");

console.log(lang1.info());
console.log(lang1.moreInfo("Yukihiro Matsumoto", 1995));
console.log(".................");
console.log(lang2.info());
console.log(lang2.moreInfo("Guido van Rossum", 1991));

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

Ruby is a programming language.
Ruby was created by Yukihiro Matsumoto in 1995
.................
Python is a programming language.
Python was created by Guido van Rossum in 1991

التمرين 10: ارجع إلى التمرين 9؛ غيّر اسم moreInfo في الصنف المشتق إلى info.

class Language{

  /* Constructor */
  constructor(name, type){
    this.name = name;
    this.type = type;
  }

  /* Methods */
  info(){
    return `${this.name} is a ${this.type} language.`
  }
}

class ProgrammingLanguage extends Language{

  /* Methods */
  info(designer, firstAppeared){
    return `${this.name} was created by ${designer} in ${firstAppeared}`;
  }
}

let lang1 = new ProgrammingLanguage("Ruby", "programming");
let lang2 = new ProgrammingLanguage("Python", "programming");
let lang3 = new Language("Arabic", "human");
let lang4 = new Language("Sanskrit", "human");

console.log(lang1.info("Yukihiro Matsumoto", 1995));
console.log(lang2.info("Guido van Rossum", 1991));
console.log(".................");
console.log(lang3.info());
console.log(lang4.info());

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

Ruby is a programming language.
Ruby was created by Yukihiro Matsumoto in 1995
.................
Arabic is a human language.
Sanskrit is a human language.

التمرين 11: أنشئ صنفًا لكائنات مواقع الويب.

/*
let website = {
  name: null,
  type: null,
  grantAccess: function(location){
    return location !== "Jordan" ? "not allowed" : "allowed";
  }
}
*/

class Website{

  /* constructor */
  constructor(name, type){
    this.name = name;
    this.type = type;
  }

  /* Methods */
  grantAccess(location){
    return location !== "Jordan" ? "not allowed" : "allowed";    
  }
}

let website1 = new Website("Government Online", "government website");
let website2 = new Website("My school", "educational");

console.log(website1.grantAccess("Jordan"));
console.log(website2.grantAccess("USA"));

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

allowed
not allowed

التمرين 12: أنشئ صنفًا لكائنات المدوّنات.

/*
let blog = {
  name: null,
  type: null,
  grantAccess: function(location){
    return location !== "Jordan" ? "not allowed" : "allowed";
  },
  welcomeMessage: function(){
    return `Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.`;
  }
}
*/

class Blog{

  /* constructor */
  constructor(name, type){
    this.name = name;
    this.type = type;
  }

  /* Methods */
  grantAccess(location){
    return location !== "Jordan" ? "not allowed" : "allowed";    
  }
  welcomeMessage(){
    return `Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.`;
  }
}

let blog1 = new Blog("Learn With Naw Blog", "blog");
let blog2 = new Blog("Linux Blog", "blog");

console.log(blog1);
console.log(blog1.grantAccess("Palestine"));
console.log(blog1.welcomeMessage());
console.log("..............")
console.log(blog2);
console.log(blog2.grantAccess("Iraq"));
console.log(blog2.welcomeMessage());

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

Blog {name: "Learn With Naw Blog", type: "blog"}
not allowed
Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.
..............
Blog {name: "Linux Blog", type: "blog"}
not allowed
Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.

التمرين 13: ارجع إلى التمرينان 11 و12؛ اجعل Blog صنفًا مشتقًا من Website .

class Website{

  /* constructor */
  constructor(name, type){
    this.name = name;
    this.type = type;
  }

  /* Methods */
  grantAccess(location){
    return location !== "Jordan" ? "not allowed" : "allowed";    
  }
}

class Blog extends Website{

  /* Methods */
  welcomeMessage(){
    return `Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.`;
  }
}

let blog1 = new Blog("Learn With Naw Blog", "blog");
let blog2 = new Blog("Linux Blog", "blog");

console.log(blog1);
console.log(blog1.grantAccess("Palestine"));
console.log(blog1.welcomeMessage());
console.log("..............")
console.log(blog2);
console.log(blog2.grantAccess("Iraq"));
console.log(blog2.welcomeMessage());

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

Blog {name: "Learn With Naw Blog", type: "blog"}
not allowed
Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.
..............
Blog {name: "Linux Blog", type: "blog"}
not allowed
Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.

التمرين 14: ارجع إلى التمرين 13؛ أضف التالي grantAcess بـ Blog .

/*
grantAccess(){
  return "All the countries are allowed";
}
*/

class Website{

  /* constructor */
  constructor(name, type){
    this.name = name;
    this.type = type;
  }

  /* Methods */
  grantAccess(location){
    return location !== "Jordan" ? "not allowed" : "allowed";    
  }
}

class Blog extends Website{

  /* Methods */
  welcomeMessage(){
    return `Welcome everyone to my blog. Hope you enjoy your time reading my awesome content.`;
  }
  grantAccess(){
    return "All the countries are allowed";
  }
}

let website1 = new Website("College Website", "educational");
let website2 = new Website("Local Restaurant", "local business");
let blog1 = new Blog("Learn With Naw Blog", "blog");
let blog2 = new Blog("Linux Blog", "blog");


console.log(website1.grantAccess("Palestine"));
console.log(website2.grantAccess("Iraq"));
console.log("..............")
console.log(blog1.grantAccess("Palestine"));
console.log(blog2.grantAccess("Iraq"));

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

not allowed
not allowed
..............
All the countries are allowed
All the countries are allowed

التمرين 15: أنشئ صنفًا لكائنات القوالب.

/*
let theme = {
  name: null,
  domain: null,
  author: null,
  backgroundColor: function(){
    return "Set the background elements to red";
  }
}
*/

class Theme{

  /* constructor */
  constructor(name, domain, author){
    this.name = name;
    this.domain = name;
    this.author = author;
  }

  /* Methods */
  backgroundColor(){
    return "Set the background elements to red";
  }
}

let theme1 = new Theme("Learn With Naw", "learn-with-naw", "Nawras");

console.log(theme1.backgroundColor());

النتيجة هي: Set the background elements to red

التمرين 16: أنشئ صنفًا لكائنات القوالب الفرعية.

/*
let childTheme = {
  name: null,
  domain: null,
  author: null,
  backgroundColor: function(){
    return "Set the background elements to blue";
  }
}
*/

class ChildTheme{

  /* constructor */
  constructor(name, domain, author){
    this.name = name;
    this.domain = name;
    this.author = author;
  }

  /* Methods */
  backgroundColor(){
    return "Set the background elements to blue";
  }
}

let childTheme1 = new ChildTheme("Learn With Naw Child", "learn-with-naw-child", "Nawras");

console.log(childTheme1.backgroundColor());

النتيجة هي: Set the background elements to blue

التمرين 17: ارجع إلى التمرينان 15 و16؛ اجعل ChildThme صنفًا مشتقًا من Theme .

class Theme{

  /* constructor */
  constructor(name, domain, author){
    this.name = name;
    this.domain = name;
    this.author = author;
  }

  /* Methods */
  backgroundColor(){
    return "Set the background elements to red";
  }
}

class ChildTheme extends Theme{

  /* Methods */
  backgroundColor(){
    return "Set the background elements to blue";
  }
}

let childTheme1 = new ChildTheme("Learn With Naw Child", "learn-with-naw-child", "Nawras");

console.log(childTheme1.backgroundColor());

النتيجة هي: Set the background elements to blue

إعادة تعريف طرائق الصنف الأب

يمكن إعادة تعريف طرائق الصنف الأب داخل الصنف المشتق.