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

 

يمكن تهيئة الكائنات باستخدام ()new Object او ()Object.create او باستخدام مهيئ الكائن (Object initializer). مهيئ الكائن هو عبارة عن قائمة من الخصائص، وكل خاصية من هذه الخصائص عبارة عن زوجين وهما، اسم الخاصية وقيمة الخاصية، يفصل بين كل زوجين بفاصلة، يمكن لهذه القائمة ان تحتوي على صفر او اكثر من هذه الازواج، محاطة بأقواس متعرجة ({}).

Syntax

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) {}
};

New notations in ECMAScript 2015

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

// 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'
};

الوصف

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

إنشاء الكائنات

يمكن إنشاء كائن فارغ بدون خصائص هكذا:

var object = {};

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

var object = {
  foo: 'bar',
  age: 42,
  baz: {myProp: 12}
}

الوصول إلى الخصائص

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

object.foo; // "bar"
object['age']; // 42

object.foo = 'baz';

تعريف الخصائص

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

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

var o = {
  a: a,
  b: b,
  c: c
};

ECMAScript 2015، جاءت بطريقة مختصرة لتحقيق نفس الغرض:

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

أسماء الخصائص المكررة

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

var a = {x: 1, x: 2};
console.log(a); // {x: 2}

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

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;
  }
}

تعريف الوظائف

خاصية الكائن يمكن أن تشير أيضا إلى الوظائف function او getter او setter.

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

في ECMAScript 2015، اصبح الاختصار متاحا، حيث أن الكلمة المحجوزة function لم تعد ضرورية.

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

في ECMAScript 2015، هناك طريقة لاختصار تعريف الخصائص التي قيمها generator functions :

var o = {
  * generator() {
    ...........
  }
};

في ECMAScript 5، سوف تكتب هكذا (لكن لاحظ أن ES5 قد لا توجد مولدات):

var o = {
  generator: function *() {
    ...........
  }
};

لمزيد من المعلومات والأمثلة حول الوظائف، راجع method definitions.

أسماء الخصائص المحوسبة

ابتداءا من ECMAScript 2015، مهئ الكائن اصبح يدعم اسماء الخصائص المحوسبة. والتي تسمح لك بوضع التعبير بين أقواس مربعة []، والتي ستعتمد كاسم للخاصية. وهي متسقة مع الاقواس المربعة التي تستخدم للوصول الى الخصائص، property accessor والتي قد تستخدم بالفعل لقراءة وتعيين الخصائص. الآن يمكنك استخدام نفس التعبير المستخدم في object literals، هكذا:

// 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}

Prototype mutation

الخاصية المعرفة على هذا الشكل  proto__: value__ او proto__": value__" لا تقوم بإنشاء خاصية جديدة باسم  __proto__. بل تقوم  بتغيير [[Prototype]] الكائن نفسه، وذالك من خلال اسناد قيمة له تكون عبارة عن كائن اخر او null. (إذا كانت القيمة المسندة ليست كائن أو null، فلا يتم تغيير شئ في الكائن) على سبيل المثال:

var obj1 = {x: 10};

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

تبين التعليمة البرمجية التالية، بعض التحققات من بعض انواع التغييرات:

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

لا يسمح بتغيير ال prototype الا مرة واحدة في object literal، واكثر من تغيير في ال prototype سيؤدي الى syntax error.

الخواص التي لا تستخدم النقطتين (:) تصبح خواص عادية وتتصرف كاي اسم اخر، وليس لها علاقة بتغيير ال prototype:

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);

Object literal notation vs JSON

ال object literal notation ليس هو نفسه JavaScript Object Notation (JSON). على الرغم من أنها تبدو مشابهة، الا ان هنالك اختلافات كبيرة بينهما:

Specifications

Specification Status Comment
{{SpecName('ES1')}} {{Spec2('ES1')}} initial definition.
{{SpecName('ES5.1', '#sec-11.1.5', 'Object Initializer')}} {{Spec2('ES5.1')}} getter and setter added.
{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}} {{Spec2('ES2015')}} Shorthand method/property names and computed property names added.
{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}} {{Spec2('ESDraft')}}  

Browser compatibility

{{CompatibilityTable}}
Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{CompatChrome(1.0)}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.0")}} 1 1 1
Computed property names {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("34")}} {{CompatNo}} 34 7.1
Shorthand property names {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("33")}} {{CompatNo}} 34 9
Shorthand method names {{CompatChrome(42.0)}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("34")}} {{CompatNo}} 34 9
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile("1.0")}} 1 1 1 {{CompatChrome(1.0)}}
Computed property names {{CompatNo}} {{CompatVersionUnknown}} {{CompatGeckoMobile("34")}} {{CompatNo}} 34 7.1 {{CompatNo}}
Shorthand property names {{CompatNo}} {{CompatVersionUnknown}} {{CompatGeckoMobile("33")}} {{CompatNo}} 34 9 {{CompatNo}}
Shorthand method names {{CompatNo}} {{CompatChrome(42.0)}} {{CompatGeckoMobile("34")}} {{CompatNo}} 34 9 {{CompatChrome(42.0)}}

See also