aboutsummaryrefslogtreecommitdiff
path: root/files/ar/learn/javascript/objects/object-oriented_js/index.html
blob: c57bbb13d5b1924f32b61059d82f103edc6d7f56 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
---
title: جافاسكريبت - البرمجة غرضية التوجه للمبتدئين
slug: Learn/JavaScript/Objects/Object-oriented_JS
translation_of: Learn/JavaScript/Objects/Object-oriented_JS
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</div>

<p class="summary" dir="rtl">مع ما تعلمناه من أساسيات، سنركز الآن على جافاسكريبت غرضية التوجه (object oriented programming). او ما يعرف ب (OOP)، سنستعرض في هذه المقالة أساسيات البرمجة غرضية التوجه  نظريا، ثم سنستكشف كيف أن الجافا سكريبت تظاهي الـ object classes المستخدمة في لغات البرمجة الأخرى (php مثلا) عن طريق الـ constructor functions، وأيضا كيفية إنشاء instances من الكائن (أو مثيل الكائن).</p>

<table class="learn-box standard-table" style="height: 217px; width: 584px;">
 <tbody>
  <tr>
   <th dir="rtl" scope="row">المتطلبات الأساسية :</th>
   <td>
    <p dir="rtl">دراية لا باس بها بخصوص الحاسوب، الإلمام بمبادئ وأساسيات الـ HTML وCSS وjavascript (شاهد <a href="/en-US/docs/Learn/JavaScript/First_steps">First steps</a> و <a href="/en-US/docs/Learn/JavaScript/Building_blocks">Building blocks</a>)  وأساسيات بناء الـكائنات OOJS. (شاهد <a href="/en-US/docs/Learn/JavaScript/Object-oriented/Introduction">Introduction to objects</a>).</p>
   </td>
  </tr>
  <tr>
   <th dir="rtl" scope="row">الهدف :</th>
   <td dir="rtl">فهم نظريا الـبرمجة غرضية التوجه (object-oriented programming)، وكيف أن كل شيء في الجافاسكريبت عبارة عن كائن (object) !.<br>
    وأيضا كيفية إنشاء الـ constructors وobject instances.</td>
  </tr>
 </tbody>
</table>

<h2 dir="rtl" id="البرمجة_الكائنية_(أو_البرمجة_غرضية_التوجه)">البرمجة الكائنية (أو البرمجة غرضية التوجه) </h2>

<div style="font-size: 14px; font-family: 'tahoma';">
<p dir="rtl">لنبدأ، دعونا نقوم بعرض نبذة بسيطة عن ماهي البرمجة غرضية التوجه ( Object-oriented programming ( OOP على مهل. نقول على مهل، لأن فهم واستيعاب البرمجة غرضية التوجه (OOP) على عجل سيكون امر غاية في التعقيد، كأن نعطيك العلاج الكامل الآن على الأرجح سيسبب لك خلطا أكثر مما سيساعدك.   <br>
 الفكرة الأساسية من البرمجة غرضية التوجه OOP هي أن نستخدم أشياءً من عالمنا الحقيقي ونحولها إلى كائنات ونقوم بتمثيلها داخل برامجنا، ونوفر وسائل سهلة للوصول إلى وظائفها، حتى نستفيد منها.</p>

<p dir="rtl">يتكون الكائن من مجموعة من البيانات والتعليمات البرمجية المتصلة فيما بينها. والتي تمثل معلومات عن الشيء الذي نتعامل معه، والوظيفة أو السلوك الذي نريد منه أن يقوم به. بيانات الكائن في كثير من الأحيان تكون عبارة عن وظائف كثيرة يمكن تخزينها بدقة (أو تغليفها) داخل حزمة الكائن (object package). حزمة الكائن يمكن أن تمتلك اسما يشير إليها، وهو ما يسمى في بعض الأحيان ب namespace. ما يجعل من السهل إعادة هيكلتها أو الوصول إليها، كما يمكن أيضا استخدام الكائنات كمخازن للبيانات حتى يمكن إرسالها بسهولة عبر شبكة الاتصال.<br>
  </p>

<h3 dir="rtl" id="تعريف_الـ_object_template">تعريف الـ object template</h3>

<p dir="rtl">دعونا ننظر في برنامج سهل يستعرض معلومات عن الطلاب والمعلمين في المدرسة.<br>
 هنا سوف نبحث في نظرية البرمجة الغرضية التوجه OOP بشكل عام، وليس في سياق أي لغة برمجة معينة.</p>

<p dir="rtl">اولا، دعونا نعود إلى الكائن Person الذي عملنا عليه في الدرس السابق <a href="/ar/docs/Learn/JavaScript/Objects/Basics">قسم اساسيات الكائن في جافاسكريبت</a>، والذي يحدد البيانات العامة والأداء الوظيفي للشخص. هناك الكثير من المواصفات التي يمكن أن يتصف بها اي شخص (عنوانه، الطول، حجم الحذاء، الحمض النووي للشخصية DNA، ورقم جواز السفر، مواصفات شخصية كثيرة...)، في المثال  الذي عملنا عليه في الدرس السابق، ركزنا اهتمامنا فقط على عرض الاسم، والسن والجنس، والاهتمامات، نريد أيضا أن نكون قادرين على كتابة مقدمة قصيرة حول هؤلاء الاشخاص، على أساس هذه البيانات، وجعلهم يقولون مرحبا، وهذا ما يعرف بالتجريد abstraction.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13889/person-diagram.png" style="display: block; height: 219px; margin: 0px auto; width: 610px;"></p>

<p dir="rtl">في بعض لغات البرمجة غرضية التوجه OOP الأخرى (PHP مثلا)، يعرف الكائن عامة بال  class (جافا سكريبت تستخدم مصطلحات وآلية مختلفة، كما سنرى أدناه) - في الواقع هو ليس كائنا، بل هو القالب الذي يعرف خصائص الكائن وكيف ينبغي له أن يكون.</p>

<h3 dir="rtl" id="إنشاء_كائنات_فعلية_-_Creating_actual_objects">إنشاء كائنات فعلية - Creating actual objects </h3>

<p dir="rtl">من خلال الـ class، يمكنك إنشاء object instances  — وهي الكائنات التي تحتوي على البيانات والوظائف المحددة في الـ class (وبالتالي هي مثيلة له). من خلال الـ class Person الخاص بنا، يمكننا الآن إنشاء بعض الأشخاص الفعليين :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13883/MDN-Graphics-instantiation-2.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>

<p dir="rtl">عندما يتم إنشاء object instance من الـ class، ستبدأ الـ constructor function الخاصة بال class بإنشائه،  تسمى عملية إنشاء الـ object instance من الـ class بال instantiation (إنشاء مثيل).<br>
 أي أنَّ الـ object instance هو instantiated (مثيل) من الـ class.</p>

<h3 dir="rtl" id="كلاسات_متخصصة_-_Specialist_classes">كلاسات متخصصة - Specialist classes</h3>

<p dir="rtl">في هذه الحالة لسنا بحاجة للأشخاص بصفة عامة، سنستخدم الأساتذة والطلاب بصفة <strong>خاصة</strong>. في البرمجة غرضية التوجه OOP، يمكنك إنشاء كلاسات بناءً على كلاسات أخرى. مثلا كلاسات الأبناء child الجديدة يمكنها أن ترث البيانات والتعليمات البرمجية من الكلاس الأب parent.<br>
 يمكنك إعادة استخدام وظيفة مشتركة بين جميع أنواع الكائنات بدلاً من الاضطرار إلى تكرار العملية عدة مرات، حيث يختلف الأداء الوظيفي من كلاس لآخر، يمكنك <strong>تخصيص</strong> ميزات معينة لكل منها حسب الحاجة.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13881/MDN-Graphics-inherited-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>

<p dir="rtl">وهذا مفيد حقاً – حيث يتشارك المعلمين والطلاب في الكثير من الخصوصيات المشتركة مثل الاسم ونوع الجنس، والعمر، سيكون من المفيد جدا تعريف تلك الخصوصيات المشتركة مرة واحدة فقط. يمكنك أيضا تعريف نفس تلك الخصوصيات كل على حدة في الكلاسات المختلفة، كما سيتم تعريف كل من هذه الخصوصيات في namespace مختلفة. على سبيل المثال، قد تكون تحية الطالب على هذا الشكل <code>( Yo, I'm [firstName]" ( <em>Hi, I'm Sam</em>"</code>، بينما قد يستخدم المعلم شيئا أكثر رسمية،<br>
 مثل<code>Hello, my name is [Prefix] [lastName] and I teach [Subject]. " )  <em>Hello, My name is Mr Griffiths, and I teach Chemistry</em>)</code>.</p>

<div class="note" dir="rtl">
<p>ملاحظة : قدرة الكائنات المتعددة على تنفيذ نفس الوظائف تسمى <strong>polymorphism</strong> (تعدد الأشكال).</p>
</div>

<p dir="rtl">يمكنك الآن إنشاء object instances من child classes. على سبيل المثال :</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/13885/MDN-Graphics-instantiation-teacher-3.png" style="display: block; height: 743px; margin: 0px auto; width: 700px;"></p>

<p dir="rtl">في باقي المقالة سنبدأ بإلقاء نظرة عملية على البرمجة غرضية التوجه OOP في جافا سكريبت.</p>

<h2 dir="rtl" id="الـ_Constructors_والـ_object_instances">الـ Constructors والـ object instances</h2>

<p dir="rtl">بعض الناس يقولون أن جافاسكريبت ليست لغة كائنية حقيقية، لأنها لا تستخدم الكلمة المحجوزة class لإنشاء الكلاسات مثل العديد من لغات البرمجة الغرضية التوجه OOP. بدلاً من ذلك، الجافاسكريبت تستخدم وظائف خاصة تسمى constructor functions لتعريف الكائنات وميزاتها. هذه الوظائف مفيدة جدا لأنك غالبا ما ستواجه حالات، حيث لا يمكنك معرفة عدد الكائنات التي ستقوم بإنشائها. وبالتالي ستوفر لك الـ constructors الوسائل اللاَّزمة لإنشاء العديد من الكائنات التي تحتاج إليها بطريقة فعالة، وربط البيانات والوظائف كما هو مطلوب.</p>

<p dir="rtl">عندما يتم إنشاء object instance جديد من الـ constructor function، لا يتم نسخ كل الوظائف الى الكائن الجديد مثل الـ «classic OO languages». بدلاً من ذلك يتم تكوين رابط وظيفي بواسطة reference chain تسمى prototype chain  (شاهد <a href="/ar/docs/Learn/JavaScript/Objects/Object_prototypes">Object prototypes</a>). حتى هذا ليس تجسيدًا حقيقـيًّا، إذا توخينا الدقة، فجافاسكريبت تستخدم آلية مختلفة لتبادل الوظائف بين الكائنات.</p>

<div class="note" dir="rtl">
<p><strong>ملاحظة</strong> : عدم وجود الـ "classic OOP" ليس بالضرورة أمرا سيئاً، كما ذكر أعلاه، البرمجة الغرضية التوجه OOP معقدة للغاية، لكن للجافاسكريبت بعض الطرق اللطيفة للاستفادة من ميزات الـ OO  دون الحاجة للتعمق كثيرا فيها.</p>
</div>

<p dir="rtl">لنبدأ بإنشاء كلاسات عن طريق الـ constructors، وإنشاء object instances منها في جافاسكريبت.<br>
 أولاً وقبل كل شيء، نود منك عمل نسخة من الملف التالي <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs.html">oojs.html</a> الذي سبق وأن عملنا عليه في الدرس السابق.</p>

<h3 dir="rtl" id="مثال_سهل">مثال سهل</h3>

<p dir="rtl">دعونا نبدأ بالنظر في كيفية تعريف شخص من خلال دالة عادية. أضف هذه الدالة أدناه إلى التعليمات البرمجية الموجودة لديك:</p>

<pre class="brush: js" dir="rtl">function createNewPerson(name)
{
  var obj = {};
  obj.name = name;
  obj.greeting = function () {
    alert('Hi! I\'m ' + this.name + '.');
  }
  return obj;
}</pre>

<p dir="rtl">يمكنك الآن إنشاء Person جديد بواسطة استدعاء هذه الدالة، حاول إدخال الأسطر التالية في console الجافاسكريبت في المتصفح الخاص بك:</p>

<pre class="brush: js" dir="rtl">var salva = createNewPerson('salva');
salva.name;
salva.greeting();</pre>

<p dir="rtl">يعمل بشكل جيد، ولكنه عمل متعب قليلا. إذا كنا نعرف أننا سننشئ كائنًـا، لماذا نحتاج إلى إنشاء كائن جديد فارغ ونعود إليه  (عبر return)؟ من حسن الحظ، جافاسكريبت تزودنا باختصار مفيد على شكل constructor functions، دعونا الآن ننشئ واحدا !</p>

<p dir="rtl">قم  باستبدال الدالة السابقة بهذه :</p>

<pre class="brush: js">function Person(name)
{
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}</pre>

<p dir="rtl">الـ constructor function هو نسخة الجافاسكريبت فيما يتعلق بال class.<br>
 ستلاحظ أن لديها كافة الميزات التي تتوقعها في الدالة، على الرغم من أنها لا تقوم بإرجاع أي شيء، ولا تقوم بإنشاء كائن، لحد الآن هي مجرد تعريف للـخصائص <code>(properties)</code> والوظائف <code>(methods)</code>، سترى أيضا هذه الكلمة <code>this</code> المستخدمة هنا، فكرتها  أنه كلما تم إنشاء أحد الـ object instances، فإن الـ object's name property سيساوي قيمة الـ name الممررة إلى الـ constructor call،  والوظيفة () greeting ستستخدم قيمة name الممررة إلى الـ constructor call أيضا.</p>

<p dir="rtl"><strong>الـ constructor call هو الذي يكون على هذا الشكل  new Object(parameters) كما سنرى بعد قليل.</strong></p>

<div class="note">
<p dir="rtl"><strong>ملاحظة </strong>: عادة ما يبدأ اسم الـ constructor function بحرف كبير - يتم استخدام هذا التقليد حتى يسهل التعرف على الـ constructor functions في التعليمات البرمجية بسهولة.</p>
</div>

<p dir="rtl">كيف يمكننا استدعاء الـ constructor  لإنشاء بعض الكائنات؟</p>

<p dir="rtl">أضف الأسطر التالية أدناه الى اسفل التعليمات البرمجية الخاص بك:</p>

<pre class="brush: js">var person1 = new Person('Bob');
var person2 = new Person('Sarah');</pre>

<p dir="rtl">احفظ التعليمات البرمجية الخاصة بك واعد تحميل الصفحة، وحاول إدخال الأسطر التالية في حقل المدخلات الخاص بك (كل على حدة) :</p>

<pre class="brush: js" dir="rtl">person1.name
person1.greeting()
person2.name
person2.greeting()</pre>

<p dir="rtl">جميل! اصبح لدينا كائنان جديدان في الصفحة، تم تخزين كل منهما ضمن namespace مختلفين، للوصول إلى الخصائص والوظائف الخاصة بهما، عليك أن تبدأ بالاتصال اما مع person1 أو person2، هما الان مغلفين بدقة، وبالتالي سنضمن عدم تشابك الوظائف مع بعضها، لاحظ ان لديهم نفس الخاصية name ونفس الوظيفة () greeting، الا أن كل واحد منهما سيحصل على القيمة name التي تم تعيينها له. هذا واحد من الاسباب التي تعرفنا على اهمية <code>this</code>، حيث انها ستشير الى الكائن الخاص بها وليس لشئ اخر.</p>

<p dir="rtl">دعونا ننظر في ال constructor calls مرة أخرى :</p>

<pre class="brush: js">var person1 = new Person('Bob');
var person2 = new Person('Sarah');</pre>

<p dir="rtl">في كل حالة من الحالتين، يتم استخدام الكلمة المحجوزة <code>new</code> لاخبار المتصفح بأننا نريد إنشاء object instance جديد، متبوعة باسم الدالة  و ال parameters المطلوبة بين الأقواس، ويتم تخزين النتيجة في متغير، وهي شبيهة جدا بكيفية استدعاء   standard function، ويتم إنشاء كل instance وفقا لهذا التعريف:</p>

<pre class="brush: js">function Person(name) {
  this.name = name;
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name + '.');
  };
}</pre>

<p dir="rtl">بعد أن يتم إنشاء الكائنات الجديدة، فعليا، ستحتوي المتغيرات person1 و person2 على الكائنات التالية على هذا النحو :</p>

<pre class="brush: js">{
  name : 'Bob',
  greeting : function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}

{
  name : 'Sarah',
  greeting : function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
}</pre>

<p dir="rtl">قلنا فعليا لأنه في الواقع الفعلي لا يزال يتم تعريف الوظائف في ال class، وليس في object instances، على عكس ال object literal كما راينا سابقا.</p>

<h3 dir="rtl" id="انشاء_constructor">انشاء  constructor</h3>

<p dir="rtl">المثال الذي راينا اعلاه، كان مجرد مقدمة، دعونا الان ننشئ Person() constructor function. فعلي.</p>

<p dir="rtl">قم بحذف التعليمات البرمجية التي قمت بإدراجها حتى الآن، واضف هذا ال constructor بدلا منه – هو بالضبط نفس المثال البسيط اعلاه من حيث المبدأ، مع القليل من التعقيد :</p>

<pre class="brush: js">function Person(first, last, age, gender, interests) {
  this.name = {
    first,
    last
  };
  this.age = age;
  this.gender = gender;
  this.interests = interests;
  this.bio = function() {
    alert(this.name.first + ' ' + this.name.last + ' is ' + this.age + ' years old. He likes ' + this.interests[0] + ' and ' + this.interests[1] + '.');
  };
  this.greeting = function() {
    alert('Hi! I\'m ' + this.name.first + '.');
  };
};</pre>

<p dir="rtl">الآن أضف ال constructor call التالي، لإنشاء object instance من ال constructor خاصتنا :</p>

<pre class="brush: js">var person1 = new Person('Bob', 'Smith', 32, 'male', ['music', 'skiing']);</pre>

<p dir="rtl">يمكنك الآن الوصول إلى الخصائص والوظائف مثلما فعلنا مع الكائن اعلاه :</p>

<pre class="brush: js">person1['age']
person1.interests[1]
person1.bio()
// etc.</pre>

<div class="note" dir="rtl">
<p><strong>ملاحظة</strong>: إذا كنت تواجه صعوبة في الحصول على هذا العمل، حاول مقارنة التعليمات البرمجية الخاصة بك مع التعليمات الخاصة بنا — see <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-finished.html">oojs-class-finished.html</a> (also <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-finished.html">see it running live</a>).</p>
</div>

<h3 dir="rtl" id="امتحان_بسيط">امتحان بسيط</h3>

<p dir="rtl">في هذا الامتحان البسيط وجب عليك إضافة بضعة أسطر اضافية الى الكائن Person خاصتك، ومحاولة جلب وإعداد الاعضاء من ناتج ال object instances.</p>

<p dir="rtl">هناك مشكلتين بخصوص الوظيفة ()bio :<br>
 أ- مخرجاتها ستكون دائما عبارة عن الضمير هو "He"، حتى وان كان الشخص انثى.<br>
 ب- الوظيفة bio سترجع اثنين من الاهتمامات (interests) فقط، حتى وان تم تعيين أكثر من ذالك في مصفوفة الاهتمامات interests.<br>
 يمكن العمل على حل هذه المشكلة داخل ال ?( class definition ( constructor.<br>
 يمكنك وضع أي كود تريده داخل ال constructor (على الأرجح سوف تحتاج لبضع جمل شرطية "if..else if...else" وحلقة "for").<br>
 مطلوب منك حل هذه المشكلة آخدا بعين الاعتبار نوع الجنس (ذكر/انثى). وايضا عدد الاهتمامات interests كان تكون 1 أو 2 أو أكثر من 2. </p>

<div class="note" dir="rtl">
<p><strong>ملاحظة </strong>: إذا واجهتك مشكلة، فقد قمنا بتوفير الاجابة، <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-class-further-exercises.html">answer inside our GitHub repo</a> (<a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-class-further-exercises.html">see it live</a>) — ننصح بالاعتماد على نفسك اولا !.</p>
</div>

<h2 dir="rtl" id="طريقة_اخرى_لانشاء_ال_object_instances">طريقة اخرى لانشاء ال object instances</h2>

<p dir="rtl">حتى الآن رأينا طريقتان مختلفتان لإنشاء ال object instance :</p>

<ol dir="rtl">
 <li>باستخدام <a href="/ar/docs/Learn/JavaScript/Objects/Basics#أساسيات_الكائن"> الاعلان عن ال object literal</a> (الدرس السابق).</li>
 <li>باستخدام constructor function (انظر أعلاه).</li>
</ol>

<p dir="rtl">هذا منطقي, ولكن هناك طرق أخرى، نريد ان نجعلها مالوفة لديك في حالة مصادفتها في مكان ما على شبكة الويب.</p>

<h3 dir="rtl" id="The_Object()_constructor">The Object() constructor</h3>

<p dir="rtl">يمكنك استخدام ال <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object()</a></code> constructor لانشاء كائن جديد، نعم، حتى الكائنات العامة تحتوي على constructor والذي بدوره يولد كائنا فارغا.</p>

<p dir="rtl">حاول ادخال السطر التالي في console المتصفح الخاص بك :</p>

<pre class="brush: js" dir="rtl">var person1 = new Object();</pre>

<p dir="rtl">سيقوم هذا بتخزين كائن فارغ في المتغير person1. يمكنك بعد ذالك اضافة الخصائص والوظائف لهدا الكائن،<br>
 باستخدام نقطة الترميز او باستخدام اقواس الترميز، حسب الطلب. جرب هذا المثال :</p>

<pre class="brush: js">person1.name = 'Chris';
person1['age'] = 38;
person1.greeting = function() {
  alert('Hi! I\'m ' + this.name + '.');
}</pre>

<p dir="rtl">يمكنك ايضا تمرير object literal الى ال Object() constructor ك parameter معبأة على شكل properties/methods. جربه بنفسك :</p>

<pre class="brush: js">var person1 = new Object({
  name : 'Chris',
  age : 38,
  greeting : function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
});</pre>

<h3 dir="rtl" id="باستخدام_الوظيفة_()create">باستخدام الوظيفة ()create</h3>

<p dir="rtl">الجافاسكريبت لديها وظيفة مبنية مسبقا   (built-in method) تسمى <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">()</a></code><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">create</a></code>, والتي تسمح لك بإنشاء object instance جديد استناداً إلى كائن موجود.</p>

<p dir="rtl">جرب ادخال هذا السطر في console المتصفح الخاص بك :</p>

<pre class="brush: js">var person2 = Object.create(person1);</pre>

<p dir="rtl">والان جرب هذه :</p>

<pre class="brush: js">person2.name
person2.greeting()</pre>

<p dir="rtl">سترى أن person2 قد تم إنشاؤه استناداً إلى person1 — فاصبح يمتلك نفس الخصائص والوظائف المتاحة لل person1 وهذا مفيد جداً، حيث أنه سيسمح لك بإنشاء object instances جديد، دون الحاجة إلى تعريف ال constructor.<br>
 الجانب السلبي هو أن ال <code>()create</code> غير مدعومة من قبل بعض المتصفحات، فيما يتعلق بالعودة ك constructors ( <span class="short_text" id="result_box" lang="ar"><span>IE8</span> وما قبله</span> لا يدعم هذه الوظيفة ) ، بالإضافة إلى ذلك يعتقد البعض أن ال constructors  تمنح التعليمات البرمجية الخاصة بك مميزات اكثر. يمكنك إنشاء constructors خاصة بك  في مكان واحد، ومن ثم إنشاء instances حسب الحاجة،</p>

<p dir="rtl">ومع ذلك، إذا لم تكن قلقا جداً بشأن دعم المتصفحات القديمة حقاً، وتحتاج فقط لبضع نسخ من الكائن، فان انشاء constructor قد يكون مبالغة بالنسبة للتعليمات البرمجية الخاصة بك. الأمر متروك لك ولما تفضله. ببساطة بعض الناس يجدون ال <code>()create</code>. سهلة في الفهم والاستخدام.</p>

<p dir="rtl">سوف نستكشف ال <code>()create</code> بمزيد من التفصيل في وقت لاحق.</p>

<h2 dir="rtl" id="ملخص">ملخص</h2>

<p dir="rtl">قدمت هذه المقالة طريقة مفصلة حول ال object-oriented نظريا، هذه ليست القصة بأكملها، ولكنها تعطيك فكرة عن ما نتعامل معه هنا. باﻹضافة إلى ذلك، فقد راينا الكيفية التي ترتبط بها جافا سكريبت، وكيف انها تختلف عن مفهوم ال "classic OOP"، راينا كذالك، كيفية تنفيذ ال الكلاسات classes في الجافاسكريبت باستخدام ال constructor functions، وطرق مختلفة لتوليد ال object instances.</p>
</div>

<p dir="rtl"><strong>ان شاء الله في الدرس القادم سوف نستكشف prototypes الجافا سكريبت.</strong></p>

<p>{{PreviousMenuNext("Learn/JavaScript/Objects/Basics", "Learn/JavaScript/Objects/Object_prototypes", "Learn/JavaScript/Objects")}}</p>