طريقة كتابة الكلاسات في JavaScript

نعلم أن JavaScript ليس له مفهوم الفئات. جميع نماذج الفئات تورث الخصائص من نفس نموذج الأصل، لذا هو قلب الفئة.

الفئة هي تمثيل عام للنماذج، والنموذج هو نموذج مادي من الفئة. الفئة هي تمثيل عام ولا تأخذ مساحة من الذاكرة، بينما النموذج هو مادي ويأخذ مساحة من المساحة التخزينية. - ويكيبيديا

في بداية احتياجات JavaScript كانت بسيطة، غالبًا ما كانت مكتوبة كدوال، ثم تطبيق الأسلوب الإجرائي، وبعدها تم إدخال مفهوم التطوير الموجه للأحداث، وأخيرًا تطورت إلى كتابة الفئات.

في js، تكون الطبيعة الأساسية للفئات هي مكون من بناء الدوال + الأصل. سنتحدث الآن عن أنواع كتابة الفئات في js.

طريقة بناء الفئات

/**
* فئة Person: تعريف شخص، يمتلك خاصية الاسم و دالة getName
  */
<script>
  function Person(name) {
    this.name = name;
    this.getName = function(){
      return this.name;
    }
  }
  //نحن هنا نؤسس عدة نماذج
  var p1 = new Person("trigkit4");
  var p2 = new Person("mike");
  console.log(p1 instanceof Person); //true
  console.log(p2 instanceof Person); //true
</script>

من خلال النتائج التي تم إخراجها في وحدة التحكم، يمكننا أن نعرف أن p1 و p2 هما نماذج من الفئة Person. يُستخدم عمود instanceof لتحديد ما إذا كان النموذج على يسار العمود هو نموذج من الفئة المحددة.

ميزة هذا الأسلوب هي: يمكننا بناء نماذج مختلفة من الأشخاص بناءً على المعلمات، لكن العيب هو أن كل مرة نقوم بإنشاء نموذج جديد، يتم إنشاء دالة getName مما يؤدي إلى إهدار الذاكرة.

يمكننا استخدام دالة خارجية لتعويض أسلوب الفئة، مما يسمح لمشاركة نفس الأسلوب بين جميع العناصر. يمكن تعديل الفئة كما يلي:

// دالة خارجية
<script>
  function getName() {
    return this.name;
  }
  function Person(name) {
    this.name = name;
    this.getName = getName;
  }
</script>

طريقة الأصناف

<script>
  function Person() {};
  Person.prototype.name = "trigkit4"; // يتم وضع خصائص الفئة على prototype
  Person.prototype.getName = function() {
    return " I'm " + this.name;
  }
  var p1 = new Person();
  var p2 = new Person();
  console.log(p1.name); // trigkit4
  console.log(p2.getName()); // I'm trigkit4
</script>

عيب أسلوب الأصناف هو أنه لا يمكن بناء عناصر تمثيل باستخدام معاملات (عادة ما تكون خصائص العناصر المختلفة)، وله ميزة أن جميع عناصر التمثيل تشارك نفس أسلوب getName (على عكس أسلوب المكونات الأساسية)، مما يمنع إهدار الذاكرة.

طريقة مكونات أساسية + الأصناف
خذ مزايا كلا من الاثنين:
أ: استخدام مكونات أساسية لتحديد خصائص الفئة (المجالات).
ب: استخدام أسلوب الأصناف لتحديد طرق الفئة.

<script>
  function Person(name) {
    this.name = name;
  }
  // خاصية الأصناف يمكن أن تسمح لمشاركة أسلوب getName بين عناصر التمثيل
  Person.prototype.getName = function() {
    return " I'm " + this.name;
  }
</script>

بهذا، يمكننا بناء عناصر مختلفة بخصائص، كما يمكننا مشاركة الأساليب بين عناصر التمثيل، مما يمنع إهدار الذاكرة.

لجعل أسلوب JavaScript أكثر تكدسًا، نقوم بنقل كود واجهة الأصناف إلى داخل قوس الأقواس الخاص بـ function Person.

<script>
  function Person(name) {
    this.name = name;
    Person.prototype.getName = function() {
      return name; // غير مناسبة استخدام this.name
    }
  }
  var p1 = new Person('trigkit4');
  console.log(p1.getName()); // trigkit4
</script>

في هذا السياق، يجب أن نعرف أنواع عدة من تعريف الفئات، بخلاف المكونات الأساسية أعلاه، هناك أيضًا:

طريقة Object.create()
باستخدام هذا الأسلوب، "فئة" هي فقط عنصر، وليس دالة.

 var Person = {
    name : "trigkit4",
    age : 21,
    run: function() {
      alert("أحب الركض");
    }
  }

ثم، استخدم Object.create() لإنشاء المثال مباشرة دون الحاجة إلى استخدام new.

var p1 = Object.create(Person);
  alert(p1.age); //21
  p1.run(); //أحب الركض

هذه الطريقة أكثر بساطة من "طريقة بناء الجسم"، ولكن لا يمكن استخدامها لإنشاء خصائص سرية ومتطلبات سرية، ولا يمكن مشاركة البيانات بين كائنات النموذج، مما يجعل تقليد الفئة غير كامل.

دالة createNew()
لا تحتاج هذه الطريقة إلى استخدام this و prototype، حيث يتم استخدام الكائن لتقليد فئة، ثم يتم تعريف بناء الجسم في الفئة، ثم يتم تعريف كائن النموذج في بناء الجسم، ثم يتم إرجاع كائن النموذج كقيمة العودة.

<script>
  var Person = {
    createNew : function () {
      var person = {};
      person.name = "trigkit4";
      person.run = function(){
        alert("أحب الركض");
      };
      return person;
    }
  }
</script>

عند الاستخدام، يمكنك طلب دالة createNew() للحصول على كائن النموذج.

 var p1 = Person.createNew();
  p1.run(); //أحب الركض

في الواقع، هذا النوع من الكتابة مشابه جدًا لكتابة المفردات الموضوعية، فقط يختلف عنه بوجود فاصلة بينه وبين فاصلة أو نقطة ثانية.

هذا هو نهاية محتوى هذا المقال، نأمل أن يكون قد ساعدكم في التعلم، ونأمل أن تدعموا تعليمية النفخ النافخة.

البيان: محتوى هذا المقال تم جمعه من الإنترنت، ويستخدم حقوق الطبع والنشر لهذه الملكية، ويتم جمعه من قبل المستخدمين عبر الإنترنت من تلقاء نفسه، ويتم تحميله على هذا الموقع دون امتلاك حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل الموقع أي مسؤولية قانونية مرتبطة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق الطبع والنشر، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' بـ '@') لإبلاغنا، وقدم الدليل على الدليل، وسنقوم بإزالة المحتوى المزعوم بعد التحقق من صحة الشكوى.