٦.٦ الكلمة المفتاحية super¶
الخصائص والطرائق¶
التمرين 1: ادرس المثال التالي.
class Person{
/* Constructor */
constructor(fn, ln){
this.firstName = fn;
this.lastName = ln;
}
/* Methods */
fullName(){
return this.firstName + " " + this.lastName;
}
}
class User extends Person{
/* Methods */
prefix(p){
return p + " " + super.fullName();
}
}
let u1 = new User("Nawras", "Ali");
console.log(u1.prefix("Ms."));
النتيجة هي: Ms. Nawras Ali
التمرين 2: ادرس المثال التالي.
class Laptop{
/* Constructor */
constructor(ram, ar){
this.ram = ram;
this.additionalRam = ar;
}
/* Methods */
totalRam(){
return this.ram + this.additionalRam;
}
}
class SuperLaptop extends Laptop{
/* Methods */
upgradableRam(extendedRamSize){
return super.totalRam() + extendedRamSize;
}
}
let laptop1 = new SuperLaptop(2, 4);
console.log(laptop1.upgradableRam(6));
النتيجة هي: 12
super — ١
يمكن الوصول إلى طرائق الصنف الأب من الصنف المشتق باستخدام super .
التمرين 3: أنشئ الأصناف Video و ShortVideo اعتمادًا على الكائنات التالية. تلميح: طبّق مبدأ DRY.
/*
let video = {
title: null,
category: null,
description: function(){
return "The is a generic video";
}
};
let shortVideo = {
title: null,
category: null,
info: function(){
return "This a generic video" + ", but it is a short video";
}
}
*/
class Video{
/*Constructor*/
constructor(title, category){
this.title = title;
this.category = category;
}
/* Methods */
description(){
return "The is a generic video";
}
}
class ShortVideo extends Video{
/* Methods */
info(){
return super.description() + ", but it is a short video";
}
}
let video1 = new ShortVideo("Create a WordPress Theme", "Education");
console.log(video1.info());
النتيجة هي: The is a generic video, but it is a short video
التمرين 4: أنشئ الأصناف Bundle و PremiumBundle اعتمادًا على الكائنات التالية. تلميح: طبّق مبدأ DRY.
/*
let bundle = {
name: null,
noOfItems: null,
itemPrice: null,
bundlePrice: function(){
return (this.itemPrice * noOfItems) - (this.itemPrice);
}
};
let premiumBundle = {
name: null,
noOfItems: null,
itemPrice: null,
premiumBundlePrice: function(){
return (this.itemPrice * this.noOfItems) - (this.itemPrice) - 20;
}
}
*/
class Bundle{
/* constructor */
constructor(name, noOfItems, itemPrice){
this.name = name;
this.noOfItems = noOfItems;
this.itemPrice = itemPrice;
}
/* Methods */
bundlePrice(){
return (this.itemPrice * this.noOfItems) - (this.itemPrice);
}
}
class PremiumBundle extends Bundle{
/* Methods */
premiumBundlePrice(){
return super.bundlePrice() - 20;
}
}
let b1 = new PremiumBundle("The complete bundle", 20, 2);
console.log(b1.premiumBundlePrice());
النتيجة هي: 18
الخصائص والطرائق الساكنة¶
التمرين 5: ادرس المثال التالي.
class Person{
/* Static Properties */
static info = "This class provides basic information about a person.";
}
class User extends Person{
/* Static Properties */
static info = super.info + " It also displays the user information.";
}
console.log(Person.info);
console.log(User.info);
النتيجة كما يلي:
This class provides basic information about a person.
This class provides basic information about a person. It also displays the user information.
التمرين 6: ادرس المثال التالي.
class Student{
/* Static Properties & Methods */
static passMark = 60;
}
class ForeignStudent extends Student{
/* Static Properties & Methods */
static passMark = super.passMark + 5;
}
console.log(Student.passMark);
console.log(ForeignStudent.passMark);
النتيجة كما يلي:
60
65
التمرين 7: ادرس المثال التالي.
class Person{
/* constructor */
constructor(age){
this.age = age;
}
/* Static Properties */
static info = "This class provides basic information about a person.";
/* Static Methods */
static isOlderThan50(p){
return p.age > 50;
}
}
class User extends Person{
/* Static Properties */
static info = super.info + " It also displays the user information.";
/* Static Methods */
static salaryPromotion(u){
return super.isOlderThan50(u) ? 100 : 30;
}
}
let u1 = new User(51);
let u2 = new User(35);
console.log(User.salaryPromotion(u1));
console.log(User.salaryPromotion(u2));
النتيجة كما يلي:
100
30
التمرين 8: ادرس المثال التالي.
class Student{
/* Static Properties */
static passMark = 60;
/* Static Methods */
static sumOfAllMarks(avg, noOfStudents){
/*
avg: the average of all the students' marks
noOfStudents: the number of all the students.
*/
return avg * noOfStudents;
}
}
class ForeignStudent extends Student{
/* Static Properties */
static passMark = super.passMark + 5;
/* Static Methods */
static foreignToAll(foreignAvg, fn, allAvg, all){
/*
foreignAvg: the average of the foreign students marks
fn: the number of the foreign students.
allAvg: the average of all the students' marks
all: the number of all the students.
*/
let sum = foreignAvg * fn;
return (sum / super.sumOfAllMarks(allAvg, all)) * 100;
}
}
console.log(ForeignStudent.foreignToAll(70, 10, 80,100));
النتيجة هي: 8.75
super — ٢
يمكن الوصول إلى خصائص الأب وطرائقه الساكنة من السياق الساكن للصنف المشتق باستخدام super .
التمرين 9: استدعِ طريقة الأب docs داخل الصنف المشتق.
class Device{
/* Static Methods */
static docs(){
return `This is the documentation of the generic device`;
}
}
class WashingMachine extends Device{
/* Static Methods */
static howToUse(){
console.log("Before you use, please read the documentation of the generic device.");
console.log(super.docs());
return "Thank you!";
}
}
console.log(WashingMachine.howToUse());
النتيجة كما يلي:
Before you use, please read the documentation of the generic device.
This is the documentation of the generic device
Thank you!
التمرين 10: استدعِ طريقة الأب taxPercentage داخل الصنف المشتق.
class Item{
/* Static Properties */
static taxPercentage = 5;
}
class SubItem extends Item{
/* Static Properties */
static taxApplied = super.taxPercentage + 2 + "%";
}
console.log(SubItem.taxApplied);
النتيجة هي: 7%
التمرين 11: استدعِ طريقة الأب appliedDiscount داخل الصنف المشتق.
class Item{
/* Static Methods */
static appliedDiscount(){
return "50%";
};
}
class SubItem extends Item{
/* Static Methods */
static notifyAllUsers(){
return `The ${super.appliedDiscount()} discount is canceled`;
};
}
console.log(SubItem.notifyAllUsers());
النتيجة هي: The 50% discount is canceled
التمرين 12: استدعِ طريقة الأب whatIs داخل الصنف المشتق.
class Shape{
/* Static Properties */
static whatIs = "deals with different geometric shapes";
}
class Square extends Shape{
/* Static Properties */
static info = "This class is an extension of the shape class, which " + super.whatIs;
}
console.log(Square.info);
النتيجة هي: This class is an extension of the shape class, which deals with different geometric shapes
التمرين 13: استدعِ طريقة الأب about داخل الصنف المشتق.
class Language{
/* Static Methods */
static about(name, type){
return `${name} is a ${type} language.`;
}
}
class ProgrammingLanguage extends Language{
/* Static Methods */
static info(name, type="programming"){
return super.about(name, type) + " Humans create programming languages";
}
}
console.log(ProgrammingLanguage.info("Python"));
النتيجة هي: Python is a programming language. Humans create programming languages
التمرين 14: استدعِ طريقة الأب about داخل الصنف المشتق.
class Website{
/* Static Methods */
static countriesAllowed(){
return "Iraq, Palestine, Kuwait, and Morocco";
}
}
class Blog extends Website{
/* Static Methods */
static welcomeMessage(){
return `People from ${super.countriesAllowed()} are the most welcomed here`;
}
}
console.log(Blog.welcomeMessage());
النتيجة هي: People from Iraq, Palestine, Kuwait, and Morocco are the most welcomed here
الدوال البانية¶
التمرين 15: ادرس المثال التالي.
class Person{
/* Constructor */
constructor(name, age){
this.name = name;
this.age = age;
}
}
class User extends Person{
/* Constructor */
constructor(name, age, username){
super(name, age);
this.username = username;
}
}
let user = new User("Sanad", 18, "Sanad14");
console.log(user.name);
console.log(user.age);
console.log(user.username);
النتيجة كما يلي:
Sanad
18
Sanad14
التمرين 16: ادرس المثال التالي.
class Language{
/* Constructor */
constructor(name, type){
this.name = name;
this.type = type;
}
}
class ProgrammingLanguage extends Language{
/* Constructor */
constructor(name, designer, firstAppeared){
super(name);
this.designer = designer;
this.firstAppeared = firstAppeared;
}
}
let lang1 = new ProgrammingLanguage("Ruby", "Yukihiro Matsumoto", 1995);
let lang2 = new ProgrammingLanguage("Python", "Guido van Rossum", 1991);
console.log(lang1.name, lang1.designer, lang1.firstAppeared);
console.log(lang2.name, lang2.designer, lang2.firstAppeared);
النتيجة كما يلي:
Ruby Yukihiro Matsumoto 1995
Python Guido van Rossum 1991
super — ٣
يمكن استدعاء باني الأب لتهيئة خصائص النسخة داخل باني الصنف المشتق باستخدام super . يجب استدعاء super قبل استخدام this في باني الصنف المشتق.
التمرين 17: أنشئ الأصناف Website و Blog اعتمادًا على الكائنات التالية، مع تطبيق مبدأ DRY.
/*
let website = {
name: null;
type: null;
}
let blog = {
name: null;
type: null;
articlesNo: null;
isPublic: null;
}
*/
class Website{
/* constructor */
constructor(name, type){
this.name = name;
this.type = type;
}
}
class Blog extends Website{
/* constructor */
constructor(name, type, n, p){
super(name, type);
this.articlesNo = n;
this.isPublic = p;
}
}
let blog1 = new Blog("Learn With Naw", "blog", 150, true);
let blog2 = new Blog("Linux", "blog", 800, false);
console.log(blog1.name, blog1.type, blog1.articlesNo, blog1.isPublic);
console.log(blog2.name, blog2.type, blog2.articlesNo, blog2.isPublic);
النتيجة كما يلي:
Learn With Naw blog 150 true
Linux blog 800 false
التمرين 18: أنشئ الأصناف Theme و ChildTheme اعتمادًا على الكائنات التالية، مع تطبيق مبدأ DRY.
/*
let theme = {
name: null,
domain: null,
author: null
}
let childTheme = {
name: null,
domain: null,
author: null,
hasFrontPage: null,
isBlogTheme: null
}
*/
class Theme{
/* constructor */
constructor(name, domain, author){
this.name = name;
this.domain = name;
this.author = author;
}
}
class ChildTheme extends Theme{
/* constructor */
constructor(name, domain, author, hasFrontPage, isBlogTheme){
super(name, domain, author);
this.hasFrontPage = hasFrontPage;
this.isBlogTheme = isBlogTheme;
}
}
let childTheme1 = new ChildTheme("Learn With Naw Child", "learn-with-naw-child", "Nawras", "Yes", "Yes");
console.log(childTheme1);
النتيجة هي: ChildTheme {name: "Learn With Naw Child", domain: "Learn With Naw Child", author: "Nawras", hasFrontPage: "Yes", isBlogTheme: "Yes"}
التمرين 19: أنشئ الأصناف Student و ForeignStudent اعتمادًا على الكائنات التالية، مع تطبيق مبدأ DRY.
/*
let student = {
name: null,
studentClass: null
};
let foreignStudent = {
name: null,
studentClass: null,
scholarshipType: null
};
*/
class Student{
/* Constructor */
constructor(name, studentClass){
this.name = name;
this.studentClass = studentClass;
}
}
class ForeignStudent extends Student{
/* Constructor */
constructor(name, studentClass, scholarshipType){
super(name, studentClass);
this.scholarshipType = scholarshipType;
}
}
let student = new ForeignStudent("Lolo", "class B", "foreign exchange student");
console.log(student);
النتيجة هي: ForeignStudent {name: "Lolo", studentClass: "class B", scholarshipType: "foreign exchange student"}
التمرين 20: أنشئ الأصناف Item و FreeItem اعتمادًا على الكائنات التالية، مع تطبيق مبدأ DRY.
/*
let item = {
name: null,
price: null,
};
let FreeItem = {
name: null,
price: 0,
}
*/
class Item{
/* Constructor */
constructor(n, p){
this.name = n;
this.price = p;
}
}
class FreeItem extends Item{
/* Constructor */
constructor(n){
super(n);
this.price = 0;
}
}
var i1 = new FreeItem("Ebook: how to do this?")
console.log(i1.name);
console.log(i1.price);
النتيجة كما يلي:
Ebook: how to do this?
0