5. ابجکت‌های صریح

در اینجا، منظور ما از «ابجکت‌های صریح» (literal objects)، ابجکت‌هایی است که به صورت صریح در داخل کد تعریف شده‌اند. جاوااسکریپت مفهوم کلاس‌ها و ابجکت‌های نمونه کلاس را دارد. بنابراین، در حال حاضر به این نوع ابجکت اشاره نمی‌کنیم.

5.1. script [obj-01]

در اینجا ویژگی‌های اصلی اشیاء صریح را تشریح می‌کنیم. مهم‌ترین ویژگی این است که به شیء از طریق یک نشانگر دسترسی پیدا می‌شود.


'use strict';
// یک شیء خالی
const obj1={};
// ویژگی‌های یک شی می‌توانند به‌صورت پویا ایجاد شوند
obj1.prop1="abcd";
console.log('obj1=',obj1);
// ویژگی دیگر
obj1.prop2=[1,2,3];
console.log("obj1=",obj1);
// ویژگی دیگر با استفاده از نحو متفاوت
obj1['prop3']=true;
console.log("obj1=",obj1);
//obj1 یک مرجع به شیء (اشاره‌گر) است، نه خود شیء
const obj2=obj1;
//obj2 و obj1 به یک شی اشاره می‌کنند
obj2.prop1="xyzt";
console.log("obj1=",obj1);
console.log("obj2=",obj2);
//ویژگی‌ها می‌توانند متغیر باشند
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

توضیحات

خط ۳ کد: یک شیء از طریق یک نشانگر قابل دسترسی است. بنابراین، [obj1] یک نشانگر است. تغییر شیء مورد اشاره، نشانگر [obj1] را تغییر نمی‌دهد. به همین دلیل، همانند آرایه‌ها، یک مرجع شیء با استفاده از کلمه کلیدی [const] اعلام می‌شود؛
خط ۶ کد: همانند آرایه‌ها، [console.log] می‌تواند اشیاء را نمایش دهد؛
خط ۱۱ کد: obj1.prop3 را می‌توان به obj1.[‘prop3’] بازنویسی کرد. این نگاشت دوم زمانی مفید است که 'prop3' در واقع یک متغیر باشد (خطوط ۲۰–۲۱)؛
خطوط ۱۳–۱۸ کد نشان می‌دهند که دستور [obj2=obj1] کپی مرجع شیء است و نه خود شیء؛

5.2. اسکریپت [obj-02]

این اسکریپت نشان می‌دهد که ویژگی‌های یک شی می‌توانند خود یک شی باشند. این امر منجر به ایجاد اشیاء چندسطحی می‌شود. ما همچنین شی جهانی [JSON] را معرفی می‌کنیم که امکان تبدیل بین اشیاء و رشته‌های کاراکتری را فراهم می‌آورد.


''use strict';
//یک شی چندسطحی
const personne = {
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  }
}
// دسترسی به ویژگی‌ها
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);
// QZXW2HTMLCY29uc29sZS.sb2cZQX می‌تواند اشیاء را نمایش دهد
console.log("personne=", personne);
console.log("mère=", personne.mère);
//رشتهٔ شیء jSON نیز می‌تواند نمایش داده شود
let json = JSON.stringify(personne);
console.log("jSON=", json);
// می‌توان jSON را دوباره خواند
let personne2 = JSON.parse(json);
console.log("père=", personne2.père);

توضیحات

خط ۲۴: تبدیل یک شیء جاوااسکریپت به یک رشته jSON;
خط ۲۷: تبدیل یک رشته به یک شی JavaScript jSON؛

اجرا


[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',
''age': 12,
'پدر': { 'نام': 'پل', 'سن': ۴۵ },
''mother': { 'first name': 'micheline', 'age': 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 }

توضیحات

خط ۱۰: در یک رشته jSON، ویژگی‌ها باید در گیومه قرار گیرند، و همین‌طور مقادیر رشته‌ای؛

5.3. اسکریپت [obj-03]

این اسکریپت مفهوم گترها و سترها برای ویژگی یک شیء را معرفی می‌کند:


''use strict';
// گیرنده و تنظیم‌کنندهٔ یک شیء
const personne = {
  // گیرنده
  get nom() {
    console.log("getter nom");
    return this._nom;
  },
  // setter
  set nom(unNom) {
    console.log("setter nom");
    this._nom = unNom;
  }
};
// setter
personne.nom = "Hercule";
// گیرنده
console.log(personne.nom);
// خود شیء
console.log("personne=", personne);
// این مانع دسترسی مستقیم به ویژگی [_nom] نمی‌شود
personne._nom = "xyz";
console.log("personne=", personne);

توضیحات

خطوط ۵–۷: تعریف یک [getter]، تابعی که معمولاً مقدار ویژگی یک شیء را برمی‌گرداند اما در واقع می‌تواند هر چیزی را بازگرداند. کلمه کلیدی [function] با کلمه کلیدی [get] جایگزین می‌شود؛
خط ۷: گتر مقدار [_nom] را برمی‌گرداند. می‌بینیم که نیازی به اعلام آن نیست؛
خطوط ۱۰–۱۳: تعریف [setter]، تابعی که معمولاً مقدار دریافتی را به خصوصیتی از شیء تخصیص می‌دهد اما در واقع می‌تواند هر کاری انجام دهد. کلیدواژه [function] با کلیدواژه [set] جایگزین می‌شود. [setter] می‌تواند برای بررسی اعتبار مقداری که به عنوان پارامتر به [setter] ارسال می‌شود، استفاده شود؛
خط ۱۶: تابع [set nom] به‌طور ضمنی فراخوانی خواهد شد؛
خط ۱۸: تابع [get nom] به‌طور ضمنی فراخوانی خواهد شد؛
خط ۲۲: نشان می‌دهد که استفاده از گترها و سترها به صلاحدید توسعه‌دهنده بستگی دارد. اگر توسعه‌دهنده نام خاصیتی را که توسط این‌ها مدیریت می‌شود بداند، می‌تواند مستقیماً به آن دسترسی پیدا کند؛

اجرا


[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' }

توجه کنید خطوط ۵–۶: [console.log] همچنین ویژگی‌هایی را نمایش می‌دهد که تابع هستند.

5.4. اسکریپت [obj-04]

این اسکریپت سه روش برای نوشتن نام ویژگی‌های یک شیء و دو روش برای دسترسی به آن‌ها را نشان می‌دهد.


'use strict';
// نام‌های ویژگی‌های یک شیء می‌توانند عبارت‌های ثابت [nom] باشند که در گیومهٔ تکی ['nom'] محصور شده‌اند
//یا در علامت‌های نقل قول ["nom"]

// دقیقه‌ها
const obj1 = {
  nom: "martin",
  prénom: "jean"
};
console.log("prénom=", obj1.prénom);

// در گیومهٔ تکی محصور شده
const obj2 = {
  'نام خانوادگی': "martin",
  'first_name: "jean"
};
console.log("nom=", obj2.nom);

// در گیومه قرار گرفته
const obj3 = {
  "nom": "martin",
  "prénom": "jean"
};

//دو سینتکس ممکن برای دسترسی به خاصیت [nom]
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. script [obj-05]

این اسکریپت نشان می‌دهد که ویژگی‌های یک عبارت شیء می‌توانند تابع باشند. این بسیار شبیه به یک شیء نمونه کلاس است که هم ویژگی‌ها و هم متدها دارد.


'use strict';

//یک شی می‌تواند دارای خواص از نوع [function] باشد
const personne = {
  // ویژگی‌ها
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  },
  // روش
  toString: function () {
    return JSON.stringify(this);
  }
}

// استفاده
console.log("personne=", personne);
console.log("personne.toString=", personne.toString());

خطوط 17–19: یک متد داخلی شیء. در داخل این متد، به خواص شیء از طریق کلمه کلیدی [this] (خط 18) دسترسی پیدا می‌شود. [this] به خود شیء اشاره دارد، [this.prénom] به خصوصیت آن یعنی [prénom] اشاره می‌کند؛

اجرا


[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',
''سن': 12,
'پدر': { 'نام': 'پل', 'سن': ۴۵ },
'مادر': { 'نام': 'میشلین', 'سن': 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';

//یک شیء می‌تواند دارای ویژگی‌هایی از نوع [function] باشد
let personne = {
  // ویژگی‌ها
  prénom: "martin",
  âge: 12,
  père: {
    prénom: "paul",
    âge: 45
  },
  mère: {
    prénom: "micheline",
    âge: 42
  },
  // روش
  toString: function () {
    return JSON.stringify(this);
  }
}

// استفاده
console.log(personne);
// ویژگی‌ها
console.log("-----------------------");
for (const key in personne) {
  if (personne.hasOwnProperty(key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}
// برای اجتناب از هشدار ESLint (1)
console.log("-----------------------");
for (const key in personne) {
  if (Object.prototype.hasOwnProperty.call(personne, key)) {
    const element = personne[key];
    console.log(key, "=", element);
  }
}
// برای جلوگیری از هشدار ESLint (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);
  }
}

توضیحات

خطوط ۲۶–۳۱: کدی که فهرست ویژگی‌های یک شیء را بدون روش‌های آن بازمی‌گرداند. این کد موضوع هشداری از ESLint است:

خطوط ۳۲–۳۹: کدی که به شما امکان می‌دهد هشدار ESLint را دور بزنید. این کار از طریق پروتوتایپ کلاس [Object] انجام می‌شود؛
خطوط ۴۱–۴۷: یا می‌توانیم به‌سادگی هشدار را غیرفعال کنیم (خط ۴۳);

5.7. اسکریپت [obj-07]

اسکریپت [obj-07] نشان می‌دهد چگونه یک شیء را از حالت فشرده خارج کنید:


''use strict';
// تفکیک ساختار

// ثوابت
const obj1 = {
  nom: "martin",
  prénom: "jean"
};

// تفکیک obj1 به متغیرها [n,p]
const { nom: n, prénom: p } = obj1;
console.log("n=", n, "p=", p);

// تفکیک obj1 به متغیرها [n2,p2]
function f({ nom: n2, prénom: p2 }) {
  console.log("f-n2=", n2, "f-p2=", p2);
}
f(obj1);

// باز کردن obj1 در متغیرها [nom,prénom]
function g({ nom: nom, prénom: prénom }) {
  console.log("g-nom=", nom, "g-prénom=", prénom);
}
g(obj1);

// تفکیک obj1 به متغیرها [nom,prénom]
// استفاده از نشانه‌گذاری اختصاری معادل h({surname:surname,first_name:first_name})
function h({ nom, prénom }) {
  console.log("h-nom=", nom, "h-prénom=", prénom);
}
h(obj1);

نظرات

خط ۱۱: این کروشه‌های منحنی {} هستند که امکان تفکیک ساختار را فراهم می‌کنند. نحو


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

تا نشان دهد که مقادیر ویژگی‌های [nom, prénom] به متغیرهای [n, p] تخصیص داده می‌شوند؛

عملیات تفکیک در خطوط ۱۵، ۲۱ و ۲۸ تکرار می‌شود. هر بار، وجود پرانتزهای منحنی {} نشان می‌دهد که یک شیء باید به متغیرها تفکیک شود؛
خط ۲۸ ممکن است گیج‌کننده باشد. این یک شکل مخفف برای نگاشت زیر است:


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

نتایج اجرای برنامه به شرح زیر است:

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'

// کلا‌نه‌سازی اشیاء
const obj1 = {
  nom: "martin",
  prénom: "jean"
};

// کپی (نسخه) obj1 با استفاده از اپراتور spread
const obj2 = { ...obj1 }

//بررسی‌ها
// obj2 به یک کپی از obj1 اشاره می‌کند
console.log("obj2===obj1 :", obj1 === obj2)
console.log("obj2=", obj2)

خط ۱۰: عملیاتی برای کپی کردن شی [obj1]. عملگر ... به عنوان عملگر پخش شناخته می‌شود؛

نتایج اجرای کد به شرح زیر است:

1 2	`obj2===obj1 : false obj2= { nom: 'martin', 'prénom': 'jean' }`

خط ۱: نشان می‌دهد که اشاره‌گرهای [obj1] و [obj2] به یک شیء یکسان اشاره نمی‌کنند؛
خط ۲: نشان می‌دهد که شیء اشاره شده توسط [obj2] کپی شیء اشاره شده توسط [obj1] است؛

5.9. Conclusion

اسکریپت‌های این بخش نشان داده‌اند که شیء صریح جاوااسکریپت مشابه شیء نمونه کلاس در زبان‌های شیءگرا است. می‌توان ویژگی‌ها، متدها و گترها/ستورها را روی آن تعریف کرد. این یک شیء پویا است که ویژگی‌های آن می‌توانند در زمان اجرا تعریف شوند. سپس مانند یک فرهنگ لغت رفتار می‌کند که عناصر آن می‌توانند از هر نوعی باشند، از جمله نوع [fonction].