آموزش رایگان جاوا اسکریپت (JavaScript)

مفاهیم پیشرفته اشیاء در جاوا اسکریپت: مدیریت خصوصیات و متدها

4م مهر 1403 محراب حسن زاده
مفاهیم پیشرفته اشیاء در جاوا اسکریپت: مدیریت خصوصیات و متدها

اشیاء (Objects) در جاوا اسکریپت از مهم‌ترین و پرکاربردترین ساختارهای داده‌ای هستند. آن‌ها به ما اجازه می‌دهند تا مجموعه‌ای از داده‌ها و رفتارها را در قالب یک واحد منظم ذخیره و مدیریت کنیم. در این مقاله، به بررسی مفاهیم پیشرفته اشیاء، شامل خصوصیات (Properties) و متدها (Methods) می‌پردازیم و نحوه استفاده از آن‌ها را با مثال‌های عملی شرح می‌دهیم.

 

ایجاد و تعریف اشیاء

در جاوا اسکریپت، اشیاء می‌توانند با استفاده از سینتکس آبجکت لیترال (Object Literal) یا سازنده‌های (Constructors) جاوا اسکریپت ایجاد شوند.

 

ایجاد اشیاء با استفاده از سینتکس آبجکت لیترال

آبجکت لیترال رایج‌ترین روش برای ایجاد اشیاء در جاوا اسکریپت است. در این روش، اشیاء با استفاده از جفت‌های کلید-مقدار تعریف می‌شوند.


const person = {
  firstName: 'John',
  lastName: 'Doe',
  age: 30
};

 

ایجاد اشیاء با استفاده از سازنده‌های جاوا اسکریپت

همچنین می‌توانید اشیاء را با استفاده از سازنده Object یا توابع سازنده (Constructor Functions) ایجاد کنید.


const person = new Object();
person.firstName = 'John';
person.lastName = 'Doe';
person.age = 30;

 

خصوصیات اشیاء

خصوصیات (Properties) در جاوا اسکریپت مقادیر مرتبط با یک شیء هستند که می‌توانند انواع مختلف داده‌ای مانند اعداد، رشته‌ها، آرایه‌ها، اشیاء دیگر یا حتی توابع باشند.

 

دسترسی به خصوصیات

به خصوصیات یک شیء می‌توان از دو روش دسترسی پیدا کرد:

  • نوتیشن نقطه‌ای (Dot Notation):


console.log(person.firstName); // Output: John

 

  • نوتیشن براکت (Bracket Notation):

 


console.log(person['lastName']); // Output: Doe

 

نوتیشن براکت زمانی مفید است که نام خصوصیت به صورت پویا تعیین شود یا شامل کاراکترهایی باشد که در نوتیشن نقطه‌ای پشتیبانی نمی‌شوند.

 

افزودن و تغییر خصوصیات

شما می‌توانید در هر زمان به یک شیء، خصوصیات جدید اضافه کرده یا خصوصیات موجود را تغییر دهید.


person.middleName = 'William'; // اضافه کردن خصوصیت جدید
person.age = 31; // تغییر مقدار خصوصیت موجود
console.log(person); // Output: { firstName: 'John', lastName: 'Doe', age: 31, middleName: 'William' }

 

حذف خصوصیات

خصوصیات یک شیء را می‌توان با استفاده از عملگر delete حذف کرد.


delete person.age;
console.log(person); // Output: { firstName: 'John', lastName: 'Doe', middleName: 'William' }

 

بررسی وجود یک خصوصیت

برای بررسی وجود یک خصوصیت در یک شیء، می‌توان از عملگر in یا متد hasOwnProperty() استفاده کرد.


console.log('firstName' in person); // Output: true
console.log(person.hasOwnProperty('age')); // Output: false

 

متدهای اشیاء

متدها (Methods) توابعی هستند که به عنوان خصوصیت‌های یک شیء تعریف می‌شوند. آن‌ها به ما اجازه می‌دهند تا رفتارها و عملکردهای مربوط به آن شیء را تعریف کنیم.

 

تعریف و استفاده از متدها

می‌توان متدها را در هنگام تعریف شیء یا بعداً به آن اضافه کرد.


const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  }
};

console.log(calculator.add(5, 3)); // Output: 8
console.log(calculator.subtract(5, 3)); // Output: 2

 

همچنین می‌توان از سینتکس جدیدتر برای تعریف متدها استفاده کرد:


const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  }
};

 

استفاده از this در متدها

کلمه کلیدی this به شیء جاری که متد در آن تعریف شده است اشاره دارد.


const person = {
  firstName: 'John',
  lastName: 'Doe',
  fullName() {
    return this.firstName + ' ' + this.lastName;
  }
};

console.log(person.fullName()); // Output: John Doe

 

استفاده از this به ما اجازه می‌دهد تا به خصوصیات دیگر شیء از داخل متد دسترسی داشته باشیم.

 

تعریف و مدیریت خصوصیات اشیاء

جاوا اسکریپت امکان تعریف خصوصیات اشیاء با ویژگی‌های بیشتری را فراهم می‌کند که با استفاده از متد Object.defineProperty() می‌توان آن‌ها را کنترل کرد. این ویژگی‌ها شامل قابلیت شمارش (enumerable)، قابل تنظیم بودن (configurable)، و قابلیت نوشتن (writable) است.

 

استفاده از Object.defineProperty()

با استفاده از Object.defineProperty() می‌توان ویژگی‌های یک خصوصیت را تنظیم کرد.


const person = {};

Object.defineProperty(person, 'firstName', {
  value: 'John',
  writable: false, // نمی‌توان مقدار خصوصیت را تغییر داد
  enumerable: true, // خصوصیت در حلقه‌ها قابل مشاهده است
  configurable: false // نمی‌توان خصوصیت را حذف کرد
});

console.log(person.firstName); // Output: John
person.firstName = 'Jane';
console.log(person.firstName); // Output: John (چون خصوصیت writable نیست)

 

خصوصیت با Object.defineProperties()

با استفاده از متد Object.defineProperties() می‌توان چند خصوصیت را به طور همزمان تعریف و مدیریت کرد.


const person = {};

Object.defineProperties(person, {
  firstName: {
    value: 'John',
    writable: true
  },
  lastName: {
    value: 'Doe',
    writable: true
  }
});

console.log(person.firstName); // Output: John
console.log(person.lastName); // Output: Doe

 

متدهای داخلی اشیاء

جاوا اسکریپت دارای چندین متد داخلی است که به ما اجازه می‌دهد خصوصیات و متدهای اشیاء را مدیریت کنیم.

 

Object.keys()

این متد آرایه‌ای از کلیدهای (خصوصیات) شیء را برمی‌گرداند.


const person = { firstName: 'John', lastName: 'Doe' };
console.log(Object.keys(person)); // Output: ['firstName', 'lastName']

 

Object.values()

این متد آرایه‌ای از مقادیر خصوصیات شیء را برمی‌گرداند.


console.log(Object.values(person)); // Output: ['John', 'Doe']

 

Object.entries()

این متد آرایه‌ای از جفت‌های کلید-مقدار به عنوان آرایه‌های جداگانه برمی‌گرداند.


console.log(Object.entries(person)); // Output: [['firstName', 'John'], ['lastName', 'Doe']]

 

Object.assign()

این متد یک یا چند شیء منبع را به یک شیء هدف کپی می‌کند.


const target = { a: 1 };
const source = { b: 2, c: 3 };
const returnedTarget = Object.assign(target, source);

console.log(returnedTarget); // Output: { a: 1, b: 2, c: 3 }

 

نتیجه‌گیری

اشیاء در جاوا اسکریپت ابزارهای قدرتمندی برای مدیریت داده‌ها و تعریف رفتارهای مرتبط با آن‌ها هستند. با یادگیری و استفاده از مفاهیم پیشرفته اشیاء، مانند خصوصیات و متدها، می‌توانید برنامه‌های خود را بهتر سازماندهی کنید و کدهایی پویا و انعطاف‌پذیر بنویسید. به طور خلاصه، درک عمیق از اشیاء به شما کمک می‌کند

پرسش و پاسخ

نظری یافت نشد

مطالب مشابه

آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)
15م مرداد 1404

آموزش ساختار کامپوننت در Vue.js (راهنمای کامل همراه مثال)

مطالعه بیشتر
اصول پایه React.js: آشنایی با کامپوننت‌ها، وضعیت و رندرینگ
28م شهریور 1402

اصول پایه React.js: آشنایی با کامپوننت‌ها، وضعیت و رندرینگ

مطالعه بیشتر
آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی
4م آبان 1403

آموزش ساخت ماشین حساب با جاوا اسکریپت: راهنمای کامل با مثال‌های کاربردی

مطالعه بیشتر
معرفی جاوا اسکریپت و نحوه استفاده از آن برای توسعه وب تعاملی: راهنمای جامع
27م شهریور 1402

معرفی جاوا اسکریپت و نحوه استفاده از آن برای توسعه وب تعاملی: راهنمای جامع

مطالعه بیشتر
آموزش قالب‌بندی متن در HTML: استفاده از تگ‌ها و CSS برای استایل‌دهی
23م مرداد 1402

آموزش قالب‌بندی متن در HTML: استفاده از تگ‌ها و CSS برای استایل‌دهی

مطالعه بیشتر
آموزش ایجاد و حذف المان‌های DOM به صورت داینامیک با جاوا اسکریپت: راهنمای جامع و کاربردی
2م آبان 1403

آموزش ایجاد و حذف المان‌های DOM به صورت داینامیک با جاوا اسکریپت: راهنمای جامع و کاربردی

مطالعه بیشتر
آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر
11م آبان 1403

آموزش کار با flex-grow، flex-shrink و flex-basis در CSS Flexbox: مدیریت اندازه و فضای عناصر

مطالعه بیشتر
آموزش کامل ساخت و افزودن تقویم فارسی به Input (کامل و استاندارد)
14م خرداد 1405

آموزش کامل ساخت و افزودن تقویم فارسی به Input (کامل و استاندارد)

مطالعه بیشتر
جمع‌بندی، مرور مطالب و پروژه نهایی: ایجاد یک اپلیکیشن وب کامل با جاوا اسکریپت - راهنمای گام به گام
5م آبان 1403

جمع‌بندی، مرور مطالب و پروژه نهایی: ایجاد یک اپلیکیشن وب کامل با جاوا اسکریپت - راهنمای گام به گام

مطالعه بیشتر
استفاده از visibility و opacity در CSS برای مخفی‌سازی عناصر: راهنمای کامل و کاربردی
11م آبان 1403

استفاده از visibility و opacity در CSS برای مخفی‌سازی عناصر: راهنمای کامل و کاربردی

مطالعه بیشتر
آموزش کار با Local Storage و Session Storage در جاوا اسکریپت: ذخیره‌سازی داده‌ها در مرورگر
3م آبان 1403

آموزش کار با Local Storage و Session Storage در جاوا اسکریپت: ذخیره‌سازی داده‌ها در مرورگر

مطالعه بیشتر
آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها
5م شهریور 1402

آموزش تغییر نوع و اندازه فونت و رنگ متن با CSS: استایل‌دهی حرفه‌ای به متن‌ها

مطالعه بیشتر

تمامی حقوق معتلق به ناشر سایت است و کپی از آن پیگرد قانونی دارد