Have an account? Sign in
Login  Register  Facebook
Web Development School
This Page is Under Construction! - If You Want To Help Please Send your CV - Advanced Web Core (BETA)
Quick Table of Contents
[Edit] إنشاء الكائنات بواسطة المبرمج
في الدروس السابقة وضحنا ما هي الكائنات و كيفية التعامل معها و كيف أن الجافا سكريبت تعتمد على مجموعة من الكائنات الموجودة في تكوين اللغة الأساسي .في هذا الدرس سنتعلم كيف نبني كائن ,ولكن لما نحتاج أن نبني كائن ؟؟سأكتفي الآن بأن أقول لك أن البرمجة الحديثة بإستخدام اللغات الموجهة للكائنات Object-Oriented تقوم على تقسيم البرنامج "الكود" الذي تكتبه إلى كائنات ,و لهذا مزايا سنتحدث عنها في آخر الفصل . سأقسم موضوع إنشاء الكائنات إلي قسمين هذا الدرس الذي سأشرح فيه الأساس في بناء الكائنات ,و الدرس التالي الذي سأشرح فيه بعض المهارات و المفاهيم الإضافية الهامة. أولا :إنشاء كائن إستاتيكي تعاملنا مع الكائن الإستاتيكي Math و الموجود داخل بناء الجافا سكريبت أصلا ,الآن سنتعلم كيف نصنع كائنا استاتيكا, و الأمر بسيط للغايه .حيث نستخدم هذه الطريقة : مثل تعريف المتغير نكتب إسم الكائن الذي نريده بعد var ثم بعد علامة الـ"=" نضع قوسي المجموعة . 
var objectname={

}
بين قوسي المجموعة نضع الخواص و المتغيرات التي ستكون داخل الكائن و يتم و ضعها كالتالي :

لإضافة خاصية نضع إسم الخاصية ثم العلامة : ثم البينات (أي القيمة التي تريدها للخاصية)هكذا

propertyName:"value"

لإضافة دالة تكتب إسم الدالة ثم العلامة : ثم function(البرامترز إن كان هناك) ثم قوسي المجموعة هكذا functionName:function(){}

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

إنشاء كائن استاتيكي
<html>

<script language="JavaScript">
  
 //create object  
  
var person={
name:"Ahmed",
age:25,
job:"Engineer",
getProfile:function(){
var string="Name:"+this.name+"<br>"+"Age:"+this.age+"<br>"+"job:"+this.job;
document.write(string)
}
} 
    
//call method.
person.getProfile()
//print value of a property.
  document.write("<hr>")
  person.name="mohamed"
 document.write("<br>The name becomes: "+person.name)
    document.write("<hr>")
   person.getProfile()   
</script>

</html>

Try it yourself »Click on the "Try it yourself" button to see how it works

في الجزء الأعلى من الكود قمنا بإنشاء الكائن من خلال هذا الكود: 
var person={
name:"Ahmed",
age:25,
job:"Engineer",
getProfile:function(){
var string="Name:"+this.name+"<br>"+"Age:"+this.age+"<br>"+"job:"+this.job;
document.write(string)
}
}
و كما ستلاحظ : عرفنا الخواص بالطريقة التي ذكرناها مثل name:"Ahmed". بين كل خاصية و ما يليها أو دالة و ما يليها توضع فاصله "," إلا بعد آخر عنصر . عرفنا الدالة بالطريقة التي ذكرناها كما ترى 
getProfile:function(){
var string="Name:"+this.name+"<br>"+"Age:"+this.age+"<br>"+"job:"+this.job;
document.write(string)
}
ستجد كلمة جديدة داخل الدالة و هي this و الأداة this لابد أن تسبق إسم المتغير الموجود داخل الكائن عندما تستخدمه داخل الكائن , لاحظ أنك عندما تستخدم المتغير خارج الكائن تذكر إسم الكائن قبله مثل person.name ولذا عندما تستخدم المتغير داخل الكائن فأنت تقول أنه في "هذا" الكائن الذي أنا داخله أي أن this تحل محل إسم الكائن داخله هكذا this.name بالأسفل إستدعينا الدالة person.getProfile() و التي تعرض لك النص الذي يظهر لك في الشاشه فيه الإسم و العمر و الوظيفة . في السطر الموجود بالأسفل قليلا غيرنا قيمة الخاصية name هكذا: person.name="mohamed" و لذا عندما قمنا بإستدعاء الدالة person.getProfile() ثانية ستجد ان الإسم المعروض تغير لmohamed و الآن لننتقل إلى إنشاء الكائنات الديناميكية.

ثانيا :إنشاء الكائنات الديناميكية.

تعاملنا في الدروس السابقة مع كائن ديناميكي و هو Date و عرفنا انه لكي تستخدمه لابد أن ننشئ "مثيل" instance بإستخدام الكلمة new و أن هذا المثيل يكون مثل الكائن الإستاتيكي و قد وجدنا أنه عندما نبحث عن نوع الكائن الديناميكي بإستخدام typeof Date فإننا نجد أنه دالة function .

في هذا الدرس سنتعلم كيف ننشئ كائنا ديناميكا و ستجد أنه يتم إنشائه من خلال دالة تسمي بالـ Constructor Function و لكن ما هي الـ Constructor Function؟؟

بالنسبة للكائن الديناميكي الذي درسناه Date فإن الـ Constructor Function له هي Date() و التي عندما تنشئ مثيل منه "كائن إستاتيكي " بإستخدام كلمة new هكذا now =new Date() فإنها تُنفذ أو تستدعى و تقوم بتعريف الخواص و الدوال للكائن now ,وعملية إنشاء كائن ديناميكي تكون عبارة عن عملية تعريف الـ Constructor Function أي بشكل أبسط عملية إنشاء كائن ديناميكي هي عملية إنشاء دالة و لنوضح ذلك بالمثال .و ليكن إنشاء كائنا ديناميكا مشابها لذلك الإستاتيكي الذي أنشأناه و الذي يحتوى على بيانات شخص ما و دالة لعرضها. و يتم إنشاء هذا الكائن من خلال هذا الكود.
إنشاء كائن ديناميكي 
<html>

<script language="JavaScript">
 //create object   
function  person(p_name ,p_age,p_job){
 
this.type="profile" 
this.name=p_name
this.age=p_age
this.job=p_job
  
this.getProfile=function(){
var string="Name:"+this.name+"<br>"+"Age:"+this.age+"<br>"+"job:"+this.job;
document.write(string)
}
  
} 
 
  ahmed=new person("ahmed","25","Engineer");
  document.write(ahmed.type+"<hr>"); 
  ahmed.getProfile()
</script>
</html>

Try it yourself »Click on the "Try it yourself" button to see how it works

إذا نظرت إلى الكود الذي أمامك ستجد أننا: عرفنا دالة تسمى person و قمنا بتعريف بعض البرامترز لها (name ,age,job) . لإنشاء بعض الخواص type,name,age,job إستخدمنا كلمة this ثم أتبعناها بإسم الخاصية و سنجد أيضا أننا وضعنا كل خاصية مساوية لبرامتر من البرامترز التي عرفناها,ما عدا type و ضعنا لها قيمة ثابته و هي "profile" 
this.type="profile" 
this.name=p_name
this.age=p_age
this.job=p_job
لتعريف دالة method في داخل الكائن إستخدمنا كلمة this ثم بعدها بنقطة وضعنا إسم الدالة ثم وضعنا لها تعبيرا يشبه تعريف الدالة لكن بدون وضع إسمها لأننا وضعناه قبل علامة ال "=" هكذا: 
this.getProfile=function(){
var string="Name:"+this.name+"<br>"+"Age:"+this.age+"<br>"+"job:"+this.job;
document.write(string)
}
بعد تعريف دالة البناء Constructor Function يمكن أن تنشيء كائن إستاتيكي من خلال إستدعاء دالة البناء بإستخدام الكلمة new و هذا ما فعلنا بالسطر التالي : 
ahmed=new person("ahmed","25","Engineer");
لاحظ هنا القيم الموضوعه "ahmed","25","Engineer" ستكون هي قيم p_name ,p_age,p_job على الترتيب و بالتالي ستوضع كقيم للخواص name,age,job على الترتيب من خلال و ضعها مساوية لـ this.name, this.age , this.job ,وهذا يوضح كيف يتم تحديد قيم المتغيرات (الخصائص) الموجوده في الكائن أثناء تعريفه أما قيمة الخاصية type فستبقى كما هي "profile" في كل الكائنات الإستاتيكية التي سننشأها من الكائن person لأننا وضعنا لها قيمة ثابتة في دالة البناء الأصلية . بعد تعريف الكائن person و عمل مثيل له ahmed يمكننا إستخدام الخواص و الدوال التي أصبحت موجوده في ahmed و هذا ما تم هنا : ففي هذا السطر طبعنا قيمة الخاصية type بالأضافة إلى خط أفقي : 
 document.write(ahmed.type+"<hr>");
و يجب أن تجدها كما وضعناها "profile" ثم بعد ذلك إستدعينا الدالة getProfile هكذا: 
ahmed.getProfile()
و ستجد أنها طبعت على الصفحة البيانات التي تم إدخالها في دالة البناء person() كبرامترز عند إنشاء المثيل ahmed . هناك معلومة إضافية أعتقد أنه جاء الأوان لذكرها و هي أن الدوال و الكائنات عبارة عن أنواع من البيانات و لكن ماذا يعني أنهم أنواع من البيانات ؟؟ هذا يعني أنك يمكن أن تضع الدالة أو الكائن داخل متغير و لنوضح كيف يتم ذلك بالمثال :
وضع دالة في متغير
<html>
	
	<script language="javascript" type="text/javascript">
		var mybox=alert
		mybox("hay!");
		
	</script>
		
</html>

Try it yourself »Click on the "Try it yourself" button to see how it works

ستجد في السطر الأول أننا وضعنا الدالة alert في المتغير mybox و لكن بدون أن نضع القوسين () بعدها حيث أن وضع القوسين بعد الدالة يعني أنك تريد تنفيذها أما وضع إسمها فقط فهو يعني أنك تضع الدالة نفسها داخل المتغير فيصير كأنه هي و يتضح ذلك بالأسفل أننا قمنا بإستخدام mybox كأنها alert بالضبط و سيظهر لك صندوق به النص hay! . و يمكننا أن نفعل نفس الشيء مع الكائن Date كما بالمثال :
وضع كائن في متغير
<html>
		
	<script language="javascript" type="text/javascript">
		var mydate=Date
                 now =new mydate()
                 document.write(now)  				
	</script>
	
</html>

Try it yourself »Click on the "Try it yourself" button to see how it works

و ستجد هنا أيضا أن المتغير mydate سيعمل بالضبط كأنه Date. و السبب لذكري هذه المعلومة الآن هو أنها أولا تفسر جزء من الكود الخاص بإنشاء المتغير الديناميكي و هو هذا الجزء: 
this.getProfile=function(){
var string="Name:"+this.name+"<br>"+"Age:"+this.age+"<br>"+"job:"+this.job;
document.write(string)
}
كما أنها ستكون مفيدة لفهم كثير مما سيأتي في الدروس التالية .
November 25, 2011