Object initializer تهيئة الكائن

يمكن تهيئة الكائنات باستخدام ()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'
};

الوصف

مهيئ الكائن هو تعبير عن كيفية وصف وتهيئة الكائن Object. تتكون الكائنات من الخصائص، والتي يتم استخدامها لوصف الكائن. قيمة خاصية الكائن يمكن أن تحتوي على أنواع البيانات الأولية 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 تكرار اسماء الخصائص سينتج عنها اخطاء 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). على الرغم من أنها تبدو مشابهة، الا ان هنالك اختلافات كبيرة بينهما:

• JSON يسمح بتعريف الخاصية فقط باستخدام  property": value". ويجب أن يكون اسم الخاصية بين مزدوجتين، والتعريف لا يمكن أن يكون مختصر.
• في ال JSON القيم يمكن ان تكون فقط strings, numbers, arrays, true, false, null، او كائن  (JSON) اخر.
• في ال JSON لا يمكن تعيين ال function كقيمة لمفتاح الخاصية.
• الكائنات مثل Date سوف تصبح سلسلة نصية بعد ()JSON.parse.
• ()JSON.parse سوف يرفض اسماء الخصائص المحوسبة، وسينتج عن ذالك اخطاء.