Skip to content

5. الكائنات الحرفية

هنا، نشير إلى الكائنات المحددة حرفياً في الكود باسم "الكائنات الحرفية". تحتوي JavaScript على مفهوم الفئات وكائنات مثيلات الفئات. لذلك، هذا ليس نوع الكائن الذي نناقشه الآن.

Image

5.1. script [obj-01]

نقدم هنا الخصائص الأساسية للكائنات الحرفية. أهمها أن الكائن يتم التعامل معه عبر مؤشر.


'use strict';
// an empty object
const obj1={};
// object properties can be dynamically created
obj1.prop1="abcd";
console.log('obj1=',obj1);
// other property
obj1.prop2=[1,2,3];
console.log("obj1=",obj1);
// another property with a different notation
obj1['prop3']=true;
console.log("obj1=",obj1);
// obj1 is a reference to the object (pointer), not the object itself
const obj2=obj1;
// obj2 and obj1 point to the same object
obj2.prop1="xyzt";
console.log("obj1=",obj1);
console.log("obj2=",obj2);
// properties can be variables
const var1='prop1';
console.log('prop1=',obj1[var1]);

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-01.js"
obj1=[object Object]
obj1= { prop1: 'abcd', prop2: [ 1, 2, 3 ] }
obj1= { prop1: 'abcd', prop2: [ 1, 2, 3 ], prop3: true }
obj1= { prop1: 'xyzt', prop2: [ 1, 2, 3 ], prop3: true }
obj2= { prop1: 'xyzt', prop2: [ 1, 2, 3 ], prop3: true }
prop1= xyzt

تعليقات

  • السطر 3 من الكود: يتم التعامل مع الكائن عبر مؤشر. وبالتالي، فإن [obj1] هو مؤشر. ولا يؤدي تعديل الكائن الذي يشير إليه المؤشر إلى تعديل المؤشر [obj1] نفسه. ولهذا السبب، كما هو الحال مع المصفوفات، يتم إعلان مرجع الكائن باستخدام الكلمة الرئيسية [const]؛
  • السطر 6 من الكود: كما هو الحال مع المصفوفات، يمكن لـ [console.log] عرض الكائنات؛
  • السطر 11 من الكود: يمكن إعادة كتابة obj1.prop3 على النحو التالي: obj1.[‘prop3’]. هذه الصيغة الأخيرة مفيدة عندما يكون ‘prop3’ متغيرًا فعليًا (السطور 20–21)؛
  • الأسطر 13-18 من الكود: توضح أن العبارة [obj2=obj1] هي نسخة من مرجع الكائن وليس من الكائن نفسه؛

5.2. النص البرمجي [obj-02]

يوضح هذا البرنامج النصي أن خصائص الكائن يمكن أن تحتوي على كائن كقيمة لها. وينتج عن ذلك كائنات متعددة المستويات. كما نقدم الكائن العام [JSON]، الذي يتيح تحويل الكائنات إلى سلاسل وتحويل السلاسل إلى كائنات.


'use strict';
// a multi-level object
const personne = {
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  }
}
// access to properties
console.log("prénom personne=", personne.prénom);
console.log("prénom mère=", personne.mère.prénom);
personne.mère.âge = 40;
console.log("âge mère=", personne.mère.âge);
// console.log can display objects
console.log("personne=", personne);
console.log("mère=", personne.mère);
// you can also display the jSON string of the
let json = JSON.stringify(personne);
console.log("jSON=", json);
// you can reread the jSON
let personne2 = JSON.parse(json);
console.log("père=", personne2.père);

تعليقات

  • السطر 24: تحويل كائن JavaScript إلى سلسلة JSON؛
  • السطر 27: تحويل سلسلة JSON إلى كائن JavaScript؛

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-02.js"
prénom personne= martin
prénom mère= micheline
âge mère= 40
personne= { 'prénom': 'martin',
'âge': 12,
'père': { 'prénom': 'paul', 'âge': 45 },
'mère': { 'prénom': 'micheline', 'âge': 40 } }
mère= { 'prénom': 'micheline', 'âge': 40 }
jSON= {"prénom":"martin","âge":12,"père":{"prénom":"paul","âge":45},"mère":{"prénom":"micheline","âge":40}}
père= { 'prénom': 'paul', 'âge': 45 }

تعليقات

  • السطر 10: في سلسلة JSON، يجب أن تكون الخصائص محاطة بعلامات اقتباس، وكذلك القيم النصية؛

5.3. نص برمجي [obj-03]

يقدم هذا البرنامج النصي مفهوم المتغيرات المحددة والقيم المحددة لخاصية كائن ما:


'use strict';
// object getters and setters
const personne = {
  // getter
  get nom() {
    console.log("getter nom");
    return this._nom;
  },
  // setter
  set nom(unNom) {
    console.log("setter nom");
    this._nom = unNom;
  }
};
// setter
personne.nom = "Hercule";
// getter
console.log(personne.nom);
// the object itself
console.log("personne=", personne);
// this does not prevent direct access to property [_nom]
personne._nom = "xyz";
console.log("personne=", personne);

تعليقات

  • السطور 5–7: تعريف [getter]، وهي دالة تعيد عادةً قيمة خاصية الكائن ولكنها يمكن أن تعيد أي شيء في الواقع. يتم استبدال الكلمة الرئيسية [function] بالكلمة الرئيسية [get]؛
  • السطر 7: تُرجع دالة الاسترجاع الخاصية [_name]. لاحظ أن هذه الخاصية لا تحتاج إلى إعلان؛
  • الأسطر 10-13: تعريف [setter]، وهي دالة تقوم عمومًا بتعيين القيمة المستلمة لخاصية كائن، ولكنها يمكن أن تقوم في الواقع بأي شيء. يتم استبدال الكلمة الرئيسية [function] بالكلمة الرئيسية [set]. يمكن استخدام [setter] للتحقق من صحة القيمة التي تم تمريرها كمعلمة إلى [setter]؛
  • السطر 16: سيتم استدعاء الدالة [set name] ضمناً؛
  • السطر 18: سيتم استدعاء الدالة [get name] ضمناً؛
  • السطر 22: يوضح أن استخدام getters/setters يعتمد على تقدير المطور. إذا كان المطور يعرف اسم الخاصية التي يديرها، فيمكنه الوصول إليها مباشرةً؛

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-03.js"
setter nom
getter nom
Hercule
personne= { nom: [Getter/Setter], _nom: 'Hercule' }
personne= { nom: [Getter/Setter], _nom: 'xyz' }

لاحظ السطرين 5–6: [console.log] يعرض أيضًا الخصائص التي هي دالات.

5.4. نص برمجي [obj-04]

يوضح هذا البرنامج النصي ثلاث طرق لكتابة أسماء خصائص الكائن وطريقتين للوصول إليها.


'use strict';
// object property names may be literal [name], surrounded by apostrophes ['name'], or may have a double quotation mark ['name']
// or quotation marks ["name"]
 
// literal
const obj1 = {
  nom: "martin",
  prénom: "jean"
};
console.log("prénom=", obj1.prénom);
 
// surrounded by apostrophes
const obj2 = {
  'nom': "martin",
  'prénom': "jean"
};
console.log("nom=", obj2.nom);
 
// surrounded by quotation marks
const obj3 = {
  "nom": "martin",
  "prénom": "jean"
};
 
// two possible syntaxes for accessing the [name] property
console.log("nom=", obj3.nom);
console.log("nom=", obj3['nom']);

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-04.js"
prénom= jean
nom= martin
nom= martin
nom= martin

5.5. نص برمجي [obj-05]

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


'use strict';
 
// an object can have properties of type [function]
const personne = {
  // properties
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  },
  // method
  toString: function () {
    return JSON.stringify(this);
  }
}
 
// use
console.log("personne=", personne);
console.log("personne.toString=", personne.toString());
  • الأسطر 17–19: طريقة داخلية للكائن. في هذه الطريقة، نصل إلى خصائص الكائن باستخدام الكلمة الرئيسية [this] (السطر 18). تشير [this] إلى الكائن نفسه، وتشير [this.firstName] إلى خاصية [firstName] الخاصة به؛

التنفيذ


[Running] C:\myprograms\laragon-lite\bin\nodejs\node-v10\node.exe "c:\Temp\19-09-01\javascript\objets\obj-05.js"
personne= { 'prénom': 'martin',
'âge': 12,
'père': { 'prénom': 'paul', 'âge': 45 },
'mère': { 'prénom': 'micheline', 'âge': 42 },
toString: [Function: toString] }
personne.toString= {"prénom":"martin","âge":12,"père":{"prénom":"paul","âge":45},"mère":{"prénom":"micheline","âge":42}}

5.6. نص برمجي [obj-06]

يوضح هذا البرنامج النصي كيفية الوصول إلى خصائص كائن ما عندما لا تكون أسماؤها معروفة مسبقًا.


'use strict';
 
// an object can have properties of type [function]
let personne = {
  // properties
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  },
  // method
  toString: function () {
    return JSON.stringify(this);
  }
}
 
// use
console.log(personne);
// properties
console.log("-----------------------");
for (const key in personne) {
  if (personne.hasOwnProperty(key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}
// to escape the eslint warning (1)
console.log("-----------------------");
for (const key in personne) {
  if (Object.prototype.hasOwnProperty.call(personne, key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}
// to escape the eslint warning (2)
console.log("-----------------------");
for (const key in personne) {
  // eslint-disable-next-line no-prototype-builtins
  if (personne.hasOwnProperty(key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}

تعليقات

  • الأسطر 26–31: الكود الذي يسترد قائمة خصائص (باستثناء الطرق) كائن ما. يثير هذا الكود تحذيرًا من ESLint:

Image

  • الأسطر 32–39: الكود الذي يسمح لنا بتجاوز تحذير ESLint. نستخدم النموذج الأولي لفئة [Object]؛
  • الأسطر 41–47: أو يمكننا ببساطة تعطيل التحذير (السطر 43)؛

5.7. البرنامج النصي [obj-07]

يوضح البرنامج النصي [obj-07] القدرة على تفكيك كائن:


'use strict';
// destructuring
 
// literal
const obj1 = {
  nom: "martin",
  prénom: "jean"
};
 
// destructuring obj1 into variables [n,p]
const { nom: n, prénom: p } = obj1;
console.log("n=", n, "p=", p);
 
// destructure obj1 in variables [n2,p2]
function f({ nom: n2, prénom: p2 }) {
  console.log("f-n2=", n2, "f-p2=", p2);
}
f(obj1);
 
// destructuring obj1 into variables [last name,first name]
function g({ nom: nom, prénom: prénom }) {
  console.log("g-nom=", nom, "g-prénom=", prénom);
}
g(obj1);
 
// destructuring obj1 into variables [last name,first name]
// with shortened notation equivalent to h({name:surname,firstname:firstname})
function h({ nom, prénom }) {
  console.log("h-nom=", nom, "h-prénom=", prénom);
}
h(obj1);

تعليقات

  • السطر 11: تسمح الأقواس المتعرجة {} بإجراء عملية تفكيك. بناء الجملة 

const { nom: n, prénom: p } = obj1

تنشئ متغيرين [n] و [p] وهي تعادل:


const n = obj1.nom
const p = obj1.prénom

يمكن كتابة الإعلان على النحو التالي:


const { nom => n, prénom => p } = obj1

للإشارة إلى أن قيم السمتين [lastName، firstName] تُخزّن في المتغيرين [n، p]؛

  • تتكرر عملية التفكيك في الأسطر 15 و21 و28. في كل مرة، يشير وجود الأقواس المتعرجة {} إلى أن كائنًا ما سيتم تفكيكه إلى متغيرات؛
  • قد يكون السطر 28 مربكًا. إنه اختصار للترميز: 

function h({ nom : nom, prénom : prénom })

نتائج التنفيذ هي كما يلي:

1
2
3
4
n= martin p= jean
f-n2= martin f-p2= jean
g-nom= martin g-prénom= jean
h-nom= martin h-prénom= jean

5.8. نص [obj-08]

يوضح البرنامج النصي [obj-08] كيفية الحصول على نسخة من كائن:


'use strict'
 
// object cloning
const obj1 = {
  nom: "martin",
  prénom: "jean"
};
 
// clone (copy) of obj1 with the spread operator
const obj2 = { ...obj1 }
 
// checks
// obj2 points to a copy of obj1
console.log("obj2===obj1 :", obj1 === obj2)
console.log("obj2=", obj2)
  • السطر 10: عملية نسخ الكائن [obj1]. يُسمى عامل ... عامل الانتشار؛

نتائج التنفيذ هي كما يلي:

1
2
obj2===obj1 : false
obj2= { nom: 'martin', 'prénom': 'jean' }
  • السطر 1: يوضح أن المرجعين [obj1] و [obj2] لا يشيران إلى نفس الكائن؛
  • السطر 2: يوضح أن الكائن الذي تشير إليه [obj2] هو نسخة من الكائن الذي تشير إليه [obj1]؛

5.9. الخلاصة

أظهرت البرامج النصية في هذا القسم أن الكائن الحرفي في JavaScript مشابه لكائن مثيل الفئة في اللغات الموجهة للكائنات. يمكنك تعريف الخصائص والطرق ووحدات الحصول/التعيين عليه. إنه كائن ديناميكي يمكن تعريف خصائصه في وقت التشغيل. ثم يتصرف كقاموس يمكن أن تكون عناصره من أي نوع، بما في ذلك نوع [function].

https://stahe.github.io
هذا البرنامج التعليمي الذي كتبه Serge Tahé متاح للجمهور وفقًا لشروط Creative Commons Attribution – Non-Commercial – ShareAlike 3.0 Unported.