مقدمه
جاوا اسکریپت یک زبان برنامهنویسی شیءگرا محسوب میشود، و اشیاء (Objects) یکی از مهمترین اجزای آن هستند. اگر تا به حال با دادههای پیچیدهای کار کرده باشید، حتماً متوجه شدهاید که ذخیره آنها در متغیرهای ساده مثل string یا number کافی نیست. اینجاست که اشیاء وارد عمل میشوند. اما اشیاء دقیقاً چیستند و چگونه کار میکنند؟ بیایید این موضوع را بررسی کنیم.
اشیاء در جاوا اسکریپت چیست؟
اشیاء در جاوا اسکریپت نوعی داده هستند که میتوانند مجموعهای از ویژگیها (properties) و متدها (methods) را در خود جای دهند. ویژگیها همان متغیرها و مقادیر داخل شیء هستند، در حالی که متدها توابعی هستند که روی آن شیء اعمال میشوند.
نحوه ایجاد اشیاء در جاوا اسکریپت
روشهای مختلفی برای ایجاد اشیاء در جاوا اسکریپت وجود دارد:
1. استفاده از نشانهگذاری شیء (Object Literal)
let person = {
name: "علی",
age: 25,
job: "برنامهنویس"
};
2. استفاده از تابع سازنده (Constructor Function)
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}
let ali = new Person("علی", 25, "برنامهنویس");
3. استفاده از کلاسها (ES6 Classes)
class Person {
constructor(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
}
}
let sara = new Person("سارا", 22, "طراح");
4. استفاده از Object.create()
let personPrototype = {
greet: function() {
console.log("سلام، من " + this.name + " هستم!");
}
};
let ali = Object.create(personPrototype);
ali.name = "علی";
دسترسی به مقادیر اشیاء
1. استفاده از نقطه (Dot Notation)
console.log(person.name);
2. استفاده از براکت (Bracket Notation)
console.log(person["age"]);
افزودن، ویرایش و حذف ویژگیهای اشیاء
برای افزودن ویژگی جدید:
person.city = "تهران";
برای تغییر مقدار ویژگی:
person.age = 30;
برای حذف ویژگی:
delete person.job;
متدهای اشیاء و استفاده از this
let person = {
name: "علی",
greet: function() {
console.log("سلام، من " + this.name + " هستم!");
}
};
person.greet();
حلقهها و اشیاء در جاوا اسکریپت
1. استفاده از for...in برای پیمایش اشیاء
for (let key in person) {
console.log(key + ": " + person[key]);
}
2. استفاده از Object.keys(), Object.values() و Object.entries()
console.log(Object.keys(person)); // دریافت کلیدها
console.log(Object.values(person)); // دریافت مقادیر
console.log(Object.entries(person)); // دریافت کلیدها و مقادیر
مقایسه اشیاء در جاوا اسکریپت
1. مقایسه مستقیم (== و ===)
let obj1 = { name: "علی" };
let obj2 = { name: "علی" };
console.log(obj1 === obj2); // false
2. استفاده از JSON.stringify() برای مقایسه اشیاء
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
شیء سازی در جاوا اسکریپت (Prototypes)
1. مفهوم Prototype و اهمیت آن
Person.prototype.sayHello = function() {
console.log("سلام " + this.name);
};
ali.sayHello();
شیء اینترفیس در جاوا اسکریپت
1. کپی کردن اشیاء با Object.assign
let newPerson = Object.assign({}, person);
2. جلوگیری از تغییر اشیاء با Object.freeze و Object.seal
Object.freeze(person);
person.age = 40; // مقدار تغییر نمیکند
شیوههای پیشرفته ایجاد و مدیریت اشیاء در جاوا اسکریپت
۱. استفاده از Object.create() برای ایجاد اشیاء
یکی از روشهای پیشرفته برای ایجاد اشیاء در جاوا اسکریپت، استفاده از Object.create() است. این روش به شما امکان میدهد یک شیء جدید بسازید که از یک شیء دیگر به عنوان پروتوتایپ خود استفاده میکند.
const person = {
greet: function () {
console.log(`سلام، من ${this.name} هستم!`);
},
};
const user = Object.create(person);
user.name = "علی";
user.greet(); // خروجی: سلام، من علی هستم!
با این روش، user متد greet را از person به ارث میبرد، که این موضوع در بهینهسازی حافظه و ساختار برنامه اهمیت دارد.
۲. ایجاد اشیاء با استفاده از Object.assign()
گاهی اوقات نیاز دارید که مقادیر چند شیء را در یک شیء جدید ادغام کنید. برای این کار، متد Object.assign() بسیار مفید است.
const obj1 = { name: "رضا" };
const obj2 = { age: 25 };
const merged = Object.assign({}, obj1, obj2);
console.log(merged); // { name: "رضا", age: 25 }
با این روش، میتوان به راحتی چندین شیء را ترکیب کرده و مدیریت دادهها را آسانتر کرد.
۳. مدیریت پیشرفته ویژگیهای شیء با Object.defineProperty()
در برخی مواقع نیاز است که ویژگیهای یک شیء را کنترل کنیم. متد Object.defineProperty() این امکان را فراهم میکند تا مشخص کنیم که یک ویژگی قابل تغییر یا قابل مشاهده باشد یا خیر.
const product = {};
Object.defineProperty(product, "price", {
value: 1000,
writable: false, // نمیتوان مقدار را تغییر داد
enumerable: true, // این ویژگی در لیست حلقهها نمایش داده شود
});
console.log(product.price); // 1000
product.price = 2000; // تغییر انجام نمیشود
console.log(product.price); // همچنان 1000
این ویژگی در مدیریت دادههای حساس بسیار کاربردی است.
بررسی دقیقتر متدهای مهم کار با اشیاء
۱. متد Object.keys() برای دریافت کلیدهای یک شیء
متد Object.keys() تمام کلیدهای یک شیء را به صورت آرایه برمیگرداند که برای پیمایش دادهها بسیار کاربردی است.
const user = { name: "محمد", age: 30, city: "تهران" };
console.log(Object.keys(user)); // ["name", "age", "city"]
۲. متد Object.values() برای دریافت مقادیر ویژگیهای شیء
برای دریافت مقادیر یک شیء، متد Object.values() استفاده میشود.
console.log(Object.values(user)); // ["محمد", 30, "تهران"]
۳. متد Object.entries() برای تبدیل اشیاء به آرایهای از زوجهای کلید-مقدار
گاهی نیاز است که یک شیء را به یک آرایه قابل پردازش تبدیل کنیم.
console.log(Object.entries(user));
// [["name", "محمد"], ["age", 30], ["city", "تهران"]]
۴. استفاده از Object.freeze() برای قفل کردن شیء
با Object.freeze() میتوان از تغییر ویژگیهای یک شیء جلوگیری کرد.
const settings = { theme: "dark", language: "fa" };
Object.freeze(settings);
settings.theme = "light"; // تغییر انجام نمیشود
console.log(settings.theme); // "dark"
این متد برای جلوگیری از تغییر تنظیمات حساس بسیار مفید است.
مکمل سوم: کار با this و نحوه بایند کردن آن در اشیاء جاوا اسکریپت (هفته سوم)
۱. مفهوم this در اشیاء جاوا اسکریپت
کلمه کلیدی this در جاوا اسکریپت به شیئی اشاره میکند که در آن اجرا شده است. در اشیاء، معمولاً به خود شیء اشاره دارد.
const user = {
name: "زهرا",
sayHello: function () {
console.log(`سلام، من ${this.name} هستم!`);
},
};
user.sayHello(); // سلام، من زهرا هستم!
۲. مشکل this در توابع تو در تو
وقتی از توابع تو در تو در اشیاء استفاده میکنید، this ممکن است رفتار غیرمنتظرهای داشته باشد.
const user = {
name: "مینا",
sayHello: function () {
setTimeout(function () {
console.log(`سلام، من ${this.name} هستم!`);
}, 1000);
},
};
user.sayHello(); // خروجی: سلام، من undefined هستم!
۳. حل مشکل this با bind()
یکی از راههای حل این مشکل استفاده از bind() است.
const user = {
name: "مینا",
sayHello: function () {
setTimeout(
function () {
console.log(`سلام، من ${this.name} هستم!`);
}.bind(this),
1000
);
},
};
user.sayHello(); // خروجی: سلام، من مینا هستم!
۴. استفاده از arrow function برای حل مشکل this
راه دیگر استفاده از تابعهای پیکانی (arrow functions) است که مقدار this را از محیط بالاتر به ارث میبرند.
const user = {
name: "مینا",
sayHello: function () {
setTimeout(() => {
console.log(`سلام، من ${this.name} هستم!`);
}, 1000);
},
};
user.sayHello(); // خروجی: سلام، من مینا هستم!
این روش باعث خوانایی و کارایی بیشتر کد میشود.
نتیجهگیری
در این مقاله، با اشیاء در جاوا اسکریپت آشنا شدیم و روشهای مختلف ایجاد، تغییر و استفاده از آنها را بررسی کردیم. اشیاء بخش حیاتی جاوا اسکریپت هستند که به ما امکان مدیریت بهتر دادهها را میدهند.
