الخصائص المحسوبة

جزء من قسم Object Oriented Programming في رحلة JavaScript على Coddy — الدرس 44 من 56.

الخصائص المحسوبة (Computed properties) هي عبارة عن getters تقوم بحساب وإرجاع قيمة بدلاً من مجرد إرجاع البيانات المخزنة. وهي تبدو مثل الخصائص العادية ولكنها تحسب قيمتها بشكل فوري.

دعونا نلقي نظرة على المثال. لدينا كائن بخاصية عادية:

const circle = {
  radius: 5
};

الآن نقوم بإضافة خاصية محسوبة (computed property) باستخدام الـ getter:

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  }
};

إليك كيفية الوصول إلى الخاصية المحسوبة:

console.log(circle.diameter); // المخرجات: 10

إذا قمنا بتحديث نصف القطر، فسيتم تحديث القطر تلقائيًا أيضًا:

circle.radius = 10;
console.log(circle.diameter); // الناتج: 20

تعد الخصائص المحسوبة (Computed properties) مفيدة عندما تعتمد قيمة خاصية ما على خصائص أخرى أو تتطلب عملية حسابية.

التحدي

لقد تم تزويدك بفئة Rectangle تحتوي على خصائص العرض (width) والارتفاع (height). مهمتك هي إضافة خصائص محسوبة (computed properties) للمساحة (area) والمحيط (perimeter).

خاصية محسوبة <strong>area</strong> - تُرجع العرض × الارتفاع
خاصية محسوبة <strong>perimeter</strong> - تُرجع 2 × (العرض + الارتفاع)

ورقة مرجعية

الخصائص المحسوبة (Computed properties) هي دوال جلب (getters) تقوم بحساب وإرجاع قيمة بدلاً من مجرد إرجاع بيانات مخزنة. فهي تقوم بحساب قيمتها بشكل فوري.

قم بتعريف خاصية محسوبة باستخدام الكلمة المفتاحية get:

const circle = {
  radius: 5,
  get diameter() {
    return this.radius * 2;
  }
};

قم بالوصول إلى الخصائص المحسوبة مثل الخصائص العادية (بدون أقواس):

console.log(circle.diameter); // المخرجات: 10

يتم تحديث الخصائص المحسوبة تلقائيًا عندما تتغير الخصائص التي تعتمد عليها:

circle.radius = 10;
console.log(circle.diameter); // المخرجات: 20

جرّب بنفسك

import { Rectangle } from './rectangle.js';

// كود الاختبار - لا تقم بالتعديل
const rect = new Rectangle(5, 10);
console.log(`Area: ${rect.area}`);        // يجب أن تكون النتيجة "Area: 50"
console.log(`Perimeter: ${rect.perimeter}`); // يجب أن تكون النتيجة "Perimeter: 30"