٦.٣ دوال جلب القيم وتعيينها

بادئة الشرطة السفلية

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

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this.width = width;
    this.height = height;
    this.thickness = thickness;
    this.material = material;
  }

  /*Getters*/
  get width(){
    return this.width;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.width);

النتيجة هي: Uncaught TypeError: Cannot set property width of # < Door > which has only a getter at new Door

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

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this.height = height;
    this.thickness = thickness;
    this.material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.width);

النتيجة هي: 0.9

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

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this.$width = width;
    this.height = height;
    this.thickness = thickness;
    this.material = material;
  }

  /*Getters*/
  get width(){
    return this.$width;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.width);

النتيجة هي: 0.9

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

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this.Owidth = width;
    this.height = height;
    this.thickness = thickness;
    this.material = material;
  }

  /*Getters*/
  get width(){
    return this.Owidth;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.width);

النتيجة هي: 0.9

معلومة

عندما تتعارض أسماء خاصية التخزين ودالة الجلب كما في المثال، قد نحصل على خطأ.

نميّز خاصية التخزين ببادئة، لكي تختلف عن دالة الجلب.

يمكن اختيار بادئة مناسبة، ومن الأعراف استخدام _ بادئةً.

---

دوال جلب القيم (Getters)

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

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.height);

النتيجة هي: 2.1

التمرين 6: ارجع إلى التمرين 5؛ أضف دالة جلب للخاصية thickness في الصنف التالي.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.thickness);

النتيجة هي: 0.24

التمرين 7: ارجع إلى التمرين 6؛ أضف دالة جلب للخاصية material في الصنف التالي.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
  get material(){
    return this._material;
  }
}

let door1 = new Door(0.9, 2.1, 0.24, "Wood");

console.log(door1.material);

النتيجة هي: Wood

---

دوال تعيين القيم (Setters)

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

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
  get material(){
    return this._material;
  }

  /*Setters*/
  set width(w){
    this._width = w;
  }
}

let door1 = new Door();
door1.width = 1.1;
console.log(door1.width);

النتيجة هي: 1.1

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

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
  get material(){
    return this._material;
  }

  /*Setters*/
  set width(w){
    this._width = w;
  }
  set height(h){
    this._height = h;
  }
}

let door1 = new Door();
door1.height = 1.5;
console.log(door1.height);

النتيجة هي: 1.5

التمرين 10: أضف دالة تعيين للخاصية thickness في الصنف التالي.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
  get material(){
    return this._material;
  }

  /*Setters*/
  set width(w){
    this._width = w;
  }
  set height(h){
    this._height = h;
  }
  set thickness(t){
    this._thickness = t;
  }
}

let door1 = new Door();
door1.thickness = 0.2;
console.log(door1.thickness);

النتيجة هي: 0.2

التمرين 11: أضف دالة تعيين للخاصية material في الصنف التالي.

class Door{

  /*Constructors*/
  constructor(width, height, thickness, material){
    this._width = width;
    this._height = height;
    this._thickness = thickness;
    this._material = material;
  }

  /*Getters*/
  get width(){
    return this._width;
  }
  get height(){
    return this._height;
  }
  get thickness(){
    return this._thickness;
  }
  get material(){
    return this._material;
  }

  /*Setters*/
  set width(w){
    this._width = w;
  }
  set height(h){
    this._height = h;
  }
  set thickness(t){
    this._thickness = t;
  }
  set material(m){
    this._material = m;
  }
}

let door1 = new Door();
door1.material = "Iron";
console.log(door1.material);

النتيجة هي: Iron

عرف التسمية

عادةً تحمل دالتا get وset الاسم العام للخاصية، وتحمل خاصية التخزين اسمًا مختلفًا مثل الاسم المسبوق بشرطة سفلية.

---

الاستخدام الأساسي

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

class User{

  /*constructor*/
  constructor(name, password){
    this._name = name;
    this._password = password;
  }

  /*Methods*/
  validatePassword(password){
    return password.toString().length > 12 ? true : false;
  }

  /*Setters*/
  set password(p){
    if(this.validatePassword(p)){
      this._password = p;
    }
  }

  /*Getters*/
  get password(){
    return this._password;
  }
}

let user1 = new User("Nawras", "sjdkspabhfsd");
user1.password = "123";

console.log(user1.password);

النتيجة هي: sjdkspabhfsd

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

class User{

  /*constructor*/
  constructor(name, password){
    this._name = name;
    this._password = password;
  }

  /*Methods*/
  validatePassword(password){
    return password.toString().length > 12 ? true : false;
  }

  /*Setters*/
  set password(p){
    if(this.validatePassword(p)){
      this._password = p;
    }
  }

  /*Getters*/
  get password(){
    return this._password;
  }
}

let user1 = new User("Nawras", "sjdkspabhfsd");
user1.password = "imverystrongpassword";

console.log(user1.password);

النتيجة هي: imverystrongpassword

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

class Student{

  /* Constructor */
  constructor(id, name, mark1, mark2, mark3, mark4){
    this.id = id;
    this.name = name;
    this.mark1 = mark1;
    this.mark2 = mark2;
    this.mark3 = mark3;
    this.mark4 = mark4;
  }

  /* Methods */
  studentAverage(){
    return (this.mark1 + this.mark2 + this.mark3 + this.mark4) / 4;
  }
  passed(){
    return this.studentAverage() >= 60 ? "has passed" : "has failed";
  }
  _info(){
    return `The student ${this.name} of the id ${this.id} got an average of ${this.studentAverage()}%. ${this.name} ${this.passed()}.`
  }

  /* Getters */
  get info(){
    return this._info();
  }
}

let student1 = new Student(56, "Ali Ali", 60, 50, 70, 90);
console.log(student1.info);

النتيجة هي: The student Ali Ali of the id 56 got an average of 67.5%. Ali Ali has passed.

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

class diskSpace{

  /* Constructor */
  constructor(id, size){
    this.id = id;
    this.size = size; // in bytes
  }

  /* Methods */
  sizeInKB(){
      return this.size / 1024;
  }
  sizeInMB(){
      return this.size / 1024 / 1024;
  }
  sizeInGB(){
      return this.size / 1024 / 1024 / 1024;
  }

  /* Getters */
  get KB(){
    return this.sizeInKB();
  }
  get MB(){
    return this.sizeInMB();
  }
  get GB(){
    return this.sizeInGB();
  }
}

let space1 = new diskSpace(45, 1024);
let space2 = new diskSpace(55, 2048000);
let space3 = new diskSpace(87, 5000000540);

console.log(space1.KB);
console.log(space2.MB);
console.log(space3.GB);

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

1
1.953125
4.656613375991583

هل نستخدم دوال الجلب والتعيين في الصنف؟

يمكن استخدامها من أجل:

1. التحقّق من القيم قبل تخزينها.
2. إخفاء تفاصيل معالجة القيم وتخزينها.

---

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

التمرين 16: مثّل المركبات بصنف JavaScript.

/*
let vehicle = {
  name: null,
  type: null,
  color: null
}
*/

class Vehicle{

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

let vehicle1 = new Vehicle("Alfa Romeo", "car", "red");
let vehicle2 = new Vehicle("Honda", "truck", "white");

console.log(vehicle1);
console.log(vehicle2);

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

Vehicle {name: "Alfa Romeo", type: "car", color: "red"}
Vehicle {name: "Honda", type: "truck", color: "white"}

التمرين 17: ارجع إلى التمرين 16؛ أضف وحدة info بـ Vehicle .

/*
let vehicle = {
  name: null,
  type: null,
  color: null,
  info: function(){
    return `The ${this.color} ${this.name} is an amazing ${this.type} vehicle`;
  }
}
*/

class Vehicle{

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

  /* Methods */
  info(){
    return `The ${this.color} ${this.name} is an amazing ${this.type} vehicle`;
  }
}

let vehicle1 = new Vehicle("Alfa Romeo", "car", "red");
let vehicle2 = new Vehicle("Honda", "truck", "white");

console.log(vehicle1.info());
console.log(vehicle2.info());

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

The red Alfa Romeo is an amazing car vehicle
The white Honda is an amazing truck vehicle

التمرين 18: ارجع إلى التمرين 17؛ أضف دالة جلب إلى info .

class Vehicle{

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

  /* Methods */
  _info(){
    return `The ${this.color} ${this.name} is an amazing ${this.type} vehicle`;
  }

  /* Getters */
  get info(){
    return this._info();
  }
}

let vehicle1 = new Vehicle("Alfa Romeo", "car", "red");
let vehicle2 = new Vehicle("Honda", "truck", "white");

console.log(vehicle1.info);
console.log(vehicle2.info);

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

The red Alfa Romeo is an amazing car vehicle
The white Honda is an amazing truck vehicle