اذهب إلى المحتوى
  • 0

ما هو الفرق بين Factory Function  و Constructor Function

Mohammed Bashr Abou

السؤال

Recommended Posts

  • 0

كلتاهما مقاربة لإنشاء الكائنات في جافاسكربت، 

Constructor Function (دالة البناء):

هي الطريقة التقليدية لإنشاء الكائنات في جافاسكربت، ويتم ذلك عن طريق استنساخ كائن من فئة معينة بوساطة الكلمة المفتاحية new، مثال: 

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person1 = new Person('Ahmed', 30);

الكائن person1 هاهنا هو كائن عن الصنف Person، تم إنشاء بوساطة دالة البناء. 

Factory Function (دالة الصانع):

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

function createPerson(name, age) {
    return {
        name,
        age,
        someMethod() {
            console.log(`مرحبًا، اسمي ${this.name} وأنا عمري ${this.age} عامًا.`);
        }
    };
}

const person2 = createPerson('Ahmed', 30);

الفروقات الرئيسية بينهما هي ببساطة: 

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

  • 0

Factory Function

function createCar(color, speed) {
  return {
    color,
    speed,
    start() {
      console.log(`The ${this.color} car is starting.`);
    }
  };
}

const car1 = createCar("red", 100);
const car2 = createCar("blue", 120);

car1.start(); // سيطبع: "The red car is starting."
car2.start(); // سيطبع: "The blue car is starting."

هنا قمنا بإنشاء Factory Function تقوم بإنشاء كائنات "سيارة" باستخدام هذه الوظيفة. السيارة ستحتوي على خصائص مثل اللون والسرعة، وسيتم إعادة هذه السيارة ككائن.

اما Constructor Function

function Book(title, author) {
  this.title = title;
  this.author = author;
  this.printInfo = function() {
    console.log(`Book Title: ${this.title}, Author: ${this.author}`);
  };
}

const book1 = new Book("JavaScript Basics", "John Doe");
const book2 = new Book("HTML & CSS", "Jane Smith");

book1.printInfo(); // سيطبع: "Book Title: JavaScript Basics, Author: John Doe"
book2.printInfo(); // سيطبع: "Book Title: HTML & CSS, Author: Jane Smith"

وهنا ، نستخدم Constructor Function لإنشاء كائنات "كتاب" باستخدام الكلمة المفتاحية new. الكتاب سيحتوي على خصائص مثل العنوان والمؤلف، وأسلوب الطباعة سيتم تعريفه باستخدام this.


 

Factory Function

  1. Factory Function تُستخدم لإنشاء أشياء جديدة مشابهة.
  2. مثل صنع سيارات بألوان ومواصفات مختلفة.
  3. تستخدم Factory Function كوسيلة سريعة لصنع أشياء.

Constructor Function

  1. Constructor Function تُستخدم لإنشاء شيء واحد مثل بناء منزل.
  2. تستخدم Constructor Function مع "new" لبناء شيء من الصفر.
  3. يمكن استخدام Constructor Function لصنع أشياء مع ميزات وأساليب مشتركة.

ببساطة، Factory Function تستخدم لإنشاء أشياء متشابهة بسرعة، بينما Constructor Function تستخدم لبناء أشياء فريدة من نوعها ولإعطائها ميزات وأساليب خاصة.
بالوفيق ياصديقي .

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

الفرق الرئيسي بين Factory Function و Constructor Function هو أن Factory Function لا تلزم بإنشاء كائن جديد. يمكن أن ترجع Factory Function أي قيمة، بما في ذلك كائن موجود بالفعل. بينما Constructor Function تلزم بإنشاء كائن جديد.

فيما يلي مثال على Factory Function في JavaScript:

function createUser(name, age) {
  return {
    name: name,
    age: age,
  };
}

const user = createUser("John Doe", 30);

في هذا المثال، تُرجع الدالة createUser() كائنًا جديدًا من النوع Object. يحتوي هذا الكائن على خصائص name و age.

فيما يلي مثال على Constructor Function في JavaScript:

class User {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const user = new User("John Doe", 30);
رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...