path: root/files/ar/web/javascript/reference/operators/object_initializer/index.html

---
title: Object initializer تهيئة الكائن
slug: Web/JavaScript/Reference/Operators/Object_initializer
translation_of: Web/JavaScript/Reference/Operators/Object_initializer
---
<div>{{JsSidebar("Operators")}}</div>

<p> </p>

<div style="font-size: 15; font-family: 'tahoma';">
<p dir="rtl">يمكن تهيئة الكائنات باستخدام <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>()</code></a><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object</code></a><code> او <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">()</a><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create</a></code> او باستخدام مهيئ الكائن (<code>Object initializer</code>). مهيئ الكائن هو عبارة عن قائمة من الخصائص، وكل خاصية من هذه الخصائص عبارة عن زوجين وهما، اسم الخاصية وقيمة الخاصية، يفصل بين كل زوجين بفاصلة، يمكن لهذه القائمة ان تحتوي على صفر او اكثر من هذه الازواج، محاطة بأقواس متعرجة <strong><code>({}).</code></strong></p>

<h2 dir="rtl" id="Syntax">Syntax</h2>

<pre class="brush: js">var o = {};
var o = {a: 'foo', b: 42, c: {}};

var a = 'foo', b = 42, c = {};
var o = {a: a, b: b, c: c};

var o = {
  property: function ([parameters]) {},
  get property() {},
  set property(value) {}
};
</pre>

<h3 id="New_notations_in_ECMAScript_2015">New notations in ECMAScript 2015</h3>

<p dir="rtl">يرجى الاطلاع على جدول التوافق اسفل الصفحة. هذه التعليمات البرمجية ستؤدي إلى أخطاء syntax errors، في البيئات الغير الداعمة.</p>

<pre class="brush: js">// Shorthand property names (ES2015)
var a = 'foo', b = 42, c = {};
var o = {a, b, c};

// Shorthand method names (ES2015)
var o = {
  property([parameters]) {},
  get property() {},
  set property(value) {}
};

// Computed property names (ES2015)
var prop = 'foo';
var o = {
  [prop]: 'hey',
  ['b' + 'ar']: 'there'
};</pre>

<h2 dir="rtl" id="الوصف">الوصف</h2>

<p dir="rtl">مهيئ الكائن هو تعبير عن كيفية وصف وتهيئة الكائن {{jsxref("Object")}}. تتكون الكائنات من الخصائص، والتي يتم استخدامها لوصف الكائن. قيمة خاصية الكائن يمكن أن تحتوي على أنواع البيانات الأولية {{Glossary("primitive")}} كما يمكنها ايضا ان تحتوي على كائنات اخرى.</p>

<h3 dir="rtl" id="إنشاء_الكائنات">إنشاء الكائنات</h3>

<p dir="rtl">يمكن إنشاء كائن فارغ بدون خصائص هكذا:</p>

<pre class="brush: js">var object = {};</pre>

<p dir="rtl">ميزة هذا <code>literal</code> او المهئ هي انه يمكنك سريعا من انشاء الكائنات وخصائصها داخل الأقواس المتعرجة. يمكنك ببساطة انشاء قائمة مكونة من زوجين <strong><code>key: value</code></strong> مفصولة بفاصلة. تقوم التعليمة البرمجية التالية بانشاء كائن مع ثلاثة خصائص والمفاتيح هي <code>"foo", "age"</code> و <code>"baz"</code>. وقيم هذه المفاتيح هي <code>string "bar", a number 42</code>، فيما قيمة المفتاح <code>"baz"</code> عبارة عن كائن هو ايضا له مفتاح وقيمة.</p>

<pre class="brush: js">var object = {
  foo: 'bar',
  age: 42,
  baz: {myProp: 12}
}</pre>

<h3 dir="rtl" id="الوصول_إلى_الخصائص">الوصول إلى الخصائص</h3>

<p dir="rtl">حالما تقوم بإنشاء كائن، سترغب في قراءة الخصائص أو تغييرها. يمكن الوصول إلى خصائص الكائن باستخدام نقطة التدوين او عن طريق الاقواس المربعة. راجع <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a> لمزيد من المعلومات.</p>

<pre class="brush: js">object.foo; // "bar"
object['age']; // 42

object.foo = 'baz';
</pre>

<h3 dir="rtl" id="تعريف_الخصائص">تعريف الخصائص</h3>

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

<pre class="brush: js">var a = 'foo',
    b = 42,
    c = {};

var o = {
  a: a,
  b: b,
  c: c
};</pre>

<p dir="rtl">ECMAScript 2015، جاءت بطريقة مختصرة لتحقيق نفس الغرض:</p>

<pre class="brush: js">var a = 'foo',
    b = 42,
    c = {};

// Shorthand property names (ES2015)
var o = {a, b, c};

// In other words,
console.log((o.a === {a}.a)); // true
</pre>

<h4 dir="rtl" id="أسماء_الخصائص_المكررة">أسماء الخصائص المكررة</h4>

<p dir="rtl">عند استخدام الخصائص باسماء مكررة، سوف تقوم الخاصية الثانية بالكتابة فوق  الأولى.</p>

<pre class="brush: js">var a = {x: 1, x: 2};
console.log(a); // {x: 2}
</pre>

<p dir="rtl">في ECMAScript 5 strict mode تكرار اسماء الخصائص سينتج عنها اخطاء {{jsxref("SyntaxError")}}.</p>

<pre class="brush: js">function haveES2015DuplicatePropertySemantics() {
  'use strict';
  try {
    ({prop: 1, prop: 2});

    // No error thrown, duplicate property names allowed in strict mode
    return true;
  } catch(e) {
    // Error thrown, duplicates prohibited in strict mode
    return false;
  }
}</pre>

<h3 dir="rtl" id="تعريف_الوظائف">تعريف الوظائف</h3>

<p dir="rtl">خاصية الكائن يمكن أن تشير أيضا إلى الوظائف <a href="/en-US/docs/Web/JavaScript/Reference/Functions">function</a> او <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> او <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p>

<pre class="brush: js">var o = {
  property: function ([<var>parameters]) {},
  get property() {},
  set property(value) {}
};</var></pre>

<p dir="rtl">في ECMAScript 2015، اصبح الاختصار متاحا، حيث أن الكلمة المحجوزة <code>function</code> لم تعد ضرورية.</p>

<pre class="brush: js">// Shorthand method names (ES2015)
var o = {
  property([parameters]) {},
  get property() {},
  set property(<var>value) {},
  * generator() {}
};
</var></pre>

<p dir="rtl">في ECMAScript 2015، هناك طريقة لاختصار تعريف الخصائص التي قيمها <code>generator functions</code> :</p>

<pre class="brush: js">var o = {
  * generator() {
    ...........
  }
};</pre>

<p dir="rtl">في ECMAScript 5، سوف تكتب هكذا (لكن لاحظ أن ES5 قد لا توجد مولدات):</p>

<pre class="brush: js">var o = {
  generator: function *() {
    ...........
  }
};</pre>

<p dir="rtl">لمزيد من المعلومات والأمثلة حول الوظائف، راجع <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p>

<h3 dir="rtl" id="أسماء_الخصائص_المحوسبة">أسماء الخصائص المحوسبة</h3>

<p dir="rtl">ابتداءا من ECMAScript 2015، مهئ الكائن اصبح يدعم اسماء الخصائص المحوسبة. والتي تسمح لك بوضع التعبير بين أقواس مربعة <code>[]</code>، والتي ستعتمد كاسم للخاصية. وهي متسقة مع الاقواس المربعة التي تستخدم للوصول الى الخصائص، <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessor</a> والتي قد تستخدم بالفعل لقراءة وتعيين الخصائص. الآن يمكنك استخدام نفس التعبير المستخدم في <code>object literals</code>، هكذا:</p>

<pre class="brush: js">// Computed property names (ES2015)
var i = 0;
var a = {
  ['foo' + ++i]: i,
  ['foo' + ++i]: i,
  ['foo' + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

var param = 'size';
var config = {
  [param]: 12,
  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};

console.log(config); // {size: 12, mobileSize: 4}</pre>

<h3 id="Prototype_mutation">Prototype mutation</h3>

<p dir="rtl">الخاصية المعرفة على هذا الشكل  <strong><code>proto__: value__ او proto__": value__</code></strong><strong><code>" </code></strong>لا تقوم بإنشاء خاصية جديدة باسم  <code>__proto__</code>. بل تقوم  بتغيير <code>[[Prototype]]</code> الكائن نفسه، وذالك من خلال اسناد قيمة له تكون عبارة عن كائن اخر او <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>. (إذا كانت القيمة المسندة ليست كائن أو <code>null</code>، فلا يتم تغيير شئ في الكائن) على سبيل المثال:</p>

<pre class="brush: js">var obj1 = {x: 10};

var obj2 = {
	y: 20,
    __proto__: obj1
};
console.log( obj2.x ); // log: 10 </pre>

<p dir="rtl">تبين التعليمة البرمجية التالية، بعض التحققات من بعض انواع التغييرات:</p>

<pre class="brush: js">var obj1 = {};
assert(Object.getPrototypeOf(obj1) === Object.prototype);  // true

var obj2 = {__proto__: null};
assert(Object.getPrototypeOf(obj2) === null);              // true

var protoObj = {};
var obj3 = {'__proto__': protoObj};
assert(Object.getPrototypeOf(obj3) === protoObj);          // true

var obj4 = {__proto__: 'not an object or null'};
assert(Object.getPrototypeOf(obj4) === Object.prototype);  // true
assert(!obj4.hasOwnProperty('__proto__'));                 // true
</pre>

<p dir="rtl">لا يسمح بتغيير ال <code>prototype</code> الا مرة واحدة في <code>object</code> <code>literal،</code> واكثر من تغيير في ال <code>prototype</code> سيؤدي الى syntax error.</p>

<p dir="rtl">الخواص التي لا تستخدم النقطتين <code>(:)</code> تصبح خواص عادية وتتصرف كاي اسم اخر، وليس لها علاقة بتغيير ال <code>prototype</code>:</p>

<pre class="brush: js">var __proto__ = 'variable';

var obj1 = {__proto__};
assert(Object.getPrototypeOf(obj1) === Object.prototype);
assert(obj1.hasOwnProperty('__proto__'));
assert(obj1.__proto__ === 'variable');

var obj2 = {__proto__() { return 'hello'; }};
assert(obj2.__proto__() === 'hello');

var obj3 = {['__prot' + 'o__']: 17};
assert(obj3.__proto__ === 17);
</pre>

<h2 id="Object_literal_notation_vs_JSON">Object literal notation vs JSON</h2>

<p dir="rtl">ال <strong><code>object</code> <code>literal</code> <code>notation</code></strong> ليس هو نفسه <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/en-US/docs/Glossary/JSON">JSON</a>). على الرغم من أنها تبدو مشابهة، الا ان هنالك اختلافات كبيرة بينهما:</p>

<ul dir="rtl">
 <li><strong><code>JSON</code></strong> يسمح بتعريف الخاصية فقط باستخدام  <strong><code>property":</code> <code>value".</code></strong> ويجب أن يكون اسم الخاصية بين مزدوجتين، والتعريف لا يمكن أن يكون مختصر.</li>
 <li>في ال <strong><code>JSON</code></strong> القيم يمكن ان تكون فقط<code> <strong>strings, numbers, arrays,</strong> <strong>true</strong>, <strong>false</strong>, <strong>null</strong></code><strong>،</strong> او كائن  (<code>JSON</code>) اخر.</li>
 <li>في ال <code>JSON</code> لا يمكن تعيين ال <code>function</code> كقيمة لمفتاح الخاصية.</li>
 <li>الكائنات مثل {{jsxref("Date")}} سوف تصبح سلسلة نصية بعد {{jsxref("()JSON.parse")}}.</li>
 <li>{{jsxref("()JSON.parse")}} سوف يرفض اسماء الخصائص المحوسبة، وسينتج عن ذالك اخطاء.</li>
</ul>
</div>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES1')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>initial definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> added.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td>Shorthand method/property names and computed property names added.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Browser compatibility</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(1.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.0")}}</td>
   <td>1</td>
   <td>1</td>
   <td>1</td>
  </tr>
  <tr>
   <td>Computed property names</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td>Shorthand property names</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("33")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>9</td>
  </tr>
  <tr>
   <td>Shorthand method names</td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>9</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.0")}}</td>
   <td>1</td>
   <td>1</td>
   <td>1</td>
   <td>{{CompatChrome(1.0)}}</td>
  </tr>
  <tr>
   <td>Computed property names</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>7.1</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Shorthand property names</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("33")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>9</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Shorthand method names</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(42.0)}}</td>
   <td>{{CompatGeckoMobile("34")}}</td>
   <td>{{CompatNo}}</td>
   <td>34</td>
   <td>9</td>
   <td>{{CompatChrome(42.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="See_also">See also</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li>
 <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Method definitions</a></li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li>
</ul>