✅ أولًا: ما معنى new
في JavaScript؟
عند استخدام الكلمة المفتاحية new
، فإنك:
- تنشئ كائنًا فارغًا جديدًا.
- تربطه بدالة منشئة (Constructor Function).
- تضبط
this
داخل تلك الدالة ليشير إلى الكائن الجديد. - تُعيد الكائن تلقائيًا ما لم تُرجع شيئًا آخر يدويًا.
🔧 الصيغة العامة:
function ConstructorFunction() {
this.property = "value";
}
const obj = new ConstructorFunction();
JavaScript📌 مثال عملي:
function Person(name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log("Hello, my name is " + this.name);
};
}
const person1 = new Person("Ali", 25);
const person2 = new Person("Sara", 30);
console.log(person1.name); // "Ali"
person2.sayHello(); // "Hello, my name is Sara"
JavaScript✅ ما الذي حدث عند استخدام new Person(...)
؟
- تم إنشاء كائن جديد فارغ:
{}
. - تم ربط
this
داخل الدالةPerson
بهذا الكائن. - أضفنا خصائص:
name
,age
,sayHello
لهذا الكائن. - تمت إعادة الكائن الجديد وربطه بالمتغير
person1
.
✅ فوائد استخدام new
مع الدوال المنشئة:
الفائدة | الشرح |
---|---|
✅ إعادة الاستخدام | لا حاجة لكتابة نفس الخصائص يدويًا لكل كائن. |
✅ التنظيم | الكود منظم أكثر وأسهل في التوسعة. |
✅ استخدام مع Prototype | يمكن ربط دوال مشتركة لكل الكائنات عن طريق prototype لتوفير الذاكرة. |
🧠 مثال باستخدام prototype (أفضل ممارسة):
function Car(brand, year) {
this.brand = brand;
this.year = year;
}
Car.prototype.getInfo = function() {
return this.brand + " - " + this.year;
};
const car1 = new Car("Toyota", 2020);
console.log(car1.getInfo()); // "Toyota - 2020"
JavaScriptهنا، الدالة getInfo
لا يتم إنشاؤها لكل كائن، بل تتم مشاركتها بينهم.
🔄 مقارنة بين Object Literal و Constructor:
المقارنة | Object Literal | Constructor Function + new |
---|---|---|
✅ سهولة الاستخدام | بسيط وسريع | يحتاج إلى كتابة دالة وإنشاء كائن |
♻️ قابلية التكرار | كل مرة تكتب كائن يدويًا | تستخدم نفس الدالة لأي عدد من الكائنات |
📦 إدارة الذاكرة | الدوال تنسخ لكل كائن | يمكن مشاركة الدوال عبر prototype |
👷♂️ مثالي لـ | كائنات بسيطة وثابتة | كائنات كثيرة ومتغيرة أو ديناميكية |
⚠️ ملاحظات مهمة:
- إذا نسيت تكتب
new
عند استدعاء الـ Constructor:
const x = Person("Ali", 22); // بدون new
console.log(x); // undefined!
JavaScript- فيفي هذه الحالة،
this
لن يشير للكائن الجديد، بل للـwindow
في المتصفح أوundefined
في strict mode.
🧠 هل يمكن استخدامclass
بدلاً منnew + function
؟
نعم! في ES6 ظهر الـ class syntax كبديل أنظف: هذه الحالة،this
لن يشير للكائن الجديد، بل للـwindow
في المتصفح أوundefined
في strict mode.
نعم! في ES6 ظهر الـ class syntax كبديل أنظف:
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log("Hello from " + this.name);
}
}
const p = new Person("Yasin", 26);
p.sayHello();
JavaScriptلكن تحت الغطاء،
class
هي مجرد طريقة حديثة لنفس الفكرة (Constructor + Prototype).