راهنمای مبتدی برای اشیاء در جاوا اسکریپت

جاوا اسکریپت یک زبان برنامه نویسی محبوب است که معمولاً در توسعه وب استفاده می شود. به عنوان یک تازه کار در جاوا اسکریپت، ممکن است با این اصطلاح برخورد کرده باشید objects و در مورد اهمیت آن تعجب کرد.

با این حال نگران نباشید، زیرا در این مقاله به روشی جالب و قابل درک در مورد اشیا صحبت خواهیم کرد. همچنین برای درک بهتر مفهوم اشیاء، چند نمونه کد را بررسی خواهیم کرد.

به طور خاص، ما برنامه نویسی شی گرا، روش های شی، نمونه های اولیه، وراثت، سازنده ها و کلاس ها را بررسی خواهیم کرد.

بیایید به موضوع مورد نظر بپردازیم!

اشیاء در جاوا اسکریپت چیست؟

اشیاء در جاوا اسکریپت به گروهی از ویژگی ها اشاره می کنند. ویژگی‌ها از جفت‌های کلید-مقدار تشکیل شده‌اند، جایی که کلید با یک رشته نشان داده می‌شود و مقدار می‌تواند از هر نوع داده‌ای، از جمله شی دیگری باشد. در جاوا اسکریپت تقریباً هر چیزی را می توان به عنوان یک شی در نظر گرفت و هر شی می تواند دارای ویژگی هایی با مقادیر باشد. به زبان ساده، اشیاء مانند راکستار جاوا اسکریپت هستند – به سبکی هستند، در روز صرفه جویی می کنند و داده های شما را مانند یک رئیس سازماندهی می کنند.

بیایید مثال زیر را در نظر بگیریم:

// object literals syntax
const person = {
  firstName: "Adeola";,
  lastName:"Comfort";,
  age: 19;,
  country: 'Nigeria';
};

در این مثال، person یک شی با چهار ویژگی و مقدار به ترتیب است:

• نام – آدئولا
• نام خانوادگی – راحتی
• سن 19
• کشور – نیجریه

دسترسی به ویژگی های اشیاء

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

// accessing object value using the dot notation
console.log(person.firstName) // output: Adeola

بیایید مثال زیر را با استفاده از براکت در نظر بگیریم [] نشانه گذاری:

//using [] to access object value
console.log(person['age'])

در این مثال، person['age'] مقدار ویژگی age را برمی‌گرداند که این است 19.

روش اشیاء

روش ها اعمالی هستند که می توان روی اشیا انجام داد. روش‌ها همچنان توابع هستند، اما روی یک شی تعریف می‌شوند.

بیایید مثال زیر را در نظر بگیریم و یک متد شی ایجاد کنیم:

// object literals syntax
const person = {
  firstName: "Adeola",
  lastName:"Comfort",
  age: 19,
  country: 'Nigeria',
  fullname: function(){
console.log(`Hello, my full name is ${this.firstName} ${this.lastName}`)
};
};
person.fullname()
output: //Hello, my full name is Adeola Comfort 

در جاوا اسکریپت، this کلمه کلیدی یک شی زمینه است که نمایانگر زمینه ای است که کد فعلی در آن اجرا می شود.

گیرندگان و تنظیم کننده ها

از دریافت کننده ها برای دسترسی به خصوصیات اشیاء استفاده می شود و از تنظیم کننده ها برای تغییر یا جهش آنها استفاده می شود.
بیایید این مثال از دریافت کننده ها را در نظر بگیریم:

//Getters
const person = {
  firstName: "Blue",
  lastName: "Doe",
  occupation: "Writer",
  get job() {
    return this.occupation;
  }
};
console.log(person.occupation) // Output: Writer

بیایید این مثال از ستترها را در نظر بگیریم:

//object literals syntax
   const person = {
   firstName: "John",
   lastName: "Doe",
   occupation: "NO",
   set lang(value) {
        this.occupation = value;
      }
    };
    person.lang = "Software Developer";
    console.log(person.occupation)      
//Output: Software Developer

Object.entries

این Object.entries() متد یک شی را به آرایه ای از جفت های کلید-مقدار تبدیل می کند.

بیایید مثال زیر را در نظر بگیریم تا متوجه شویم Object.entries() بهتر:

//Object literals
const user = {
  name: 'Zoe',
  age: 4,
  color:  'Blue',
  email:'[email protected]'
};

// object.entries
console.log(Object.entries(object1))

/* output
 we have a subarray of a key and value pair
[
  [ 'name', 'Zoe' ],
  [ 'age', 4 ],
  [ 'color', 'Blue' ],
  [ 'email', '[email protected]' ]
]
*/

Object.keys

Object.keys آرایه ای از نام ویژگی شی را برمی گرداند. برای مثال، بیایید کد زیر را در نظر بگیریم تا متوجه شویم Object.keys:

const user = {
  name: 'Zoe',
  age: 4,
  color:  'Blue',
  email:'[email protected]'
};
console.log(Object.keys(user))

/*output
 we have the array of those property name
[ 'name', 'age', 'color', 'email' ]
*/

شیء. ارزش ها

Object.values آرایه ای از مقادیر شی را برمی گرداند. بیایید مثال زیر را در نظر بگیریم:

const user = {
  name: 'Zoe',
  age: 4,
  color:  'Blue',
  email:'[email protected]'
};
console.log(Object.values(user))

/* output
[ 'Zoe', 4, 'Blue', '[email protected]' ]
*/

برنامه نویسی شی گرا یک الگوی برنامه نویسی است که به جای توابع، حول اشیا متمرکز است.

OOP یک زبان برنامه نویسی نیست بلکه یک سبک برنامه نویسی است.

در جاوا اسکریپت، objects برای مدل‌سازی دنیای واقعی استفاده می‌شوند و به آن‌ها ویژگی می‌دهند. به عنوان مثال، یک لپ تاپ را در نظر بگیرید: یک لپ تاپ دارای ویژگی های شی مانند ساخت، مدل، سیستم عامل (OS)، مشخصات RAM، و غیره و روش هایی مانند on()، off() و غیره است.

اشیاء را می توان با استفاده از کارخانه یا توابع سازنده تعریف کرد. ایجاد یک شی با نحو تحت اللفظی شی تنها در صورتی مشکل است که شی دارای رفتار باشد.

توابع سازنده برای ایجاد اشیاء جدید با ویژگی ها و روش های خاص استفاده می شود. برنامه نویسی شی گرا اغلب از آنها برای ایجاد چندین نمونه از یک شی با ویژگی ها و روش های یکسان استفاده می کند.

بیایید مثال یک تابع سازنده شی را در نظر بگیریم:

function Person(name, interest) {
  this.name = name;
  this.interest = interest;
  this.greet = function() {
    console.log("Hello, my name is " + this.name + " and  I love " + this.interest);
  }
}

// create new objects from the constructor
let person1 = new Person("John", "Slepping"); 
let person2 = new Person("Jane", "Writing");

//access properties in the created object
person1.greet(); //Output:Hello, my name is John and  I love Slepping
person2.greet(); //Output:Hello, my name is Jane and  I love Writing

در ایجاد یک سازنده، قرارداد نامگذاری که برای تابع سازنده استفاده می کنیم متفاوت است، حرف اول باید بزرگ باشد.

در مثال فوق الف را تعریف می کنیم Person تابع سازنده که دو پارامتر می گیرد، name و interest. در داخل تابع سازنده، ما از this کلمه کلیدی برای ایجاد خصوصیات روی شی جدید ایجاد شده. سپس دو نمونه از را ایجاد می کنیم Person شی با استفاده از new کلمه کلیدی و عبور در پارامترهای مناسب.

وقتی به خصوصیات موجود در شی ایجاد شده دسترسی پیدا می کنیم person1.greet andperson2.greet`، می بینیم که آنها حاوی مقادیر مورد انتظار همانطور که در قطعه کد بالا نشان داده شده است.

در مثال فوق الف را تعریف می کنیم Person تابع سازنده که دو پارامتر می گیرد، name و interest. در داخل تابع سازنده، ما از this کلمه کلیدی برای ایجاد خصوصیات روی شی جدید ایجاد شده. سپس دو نمونه از را ایجاد می کنیم Person شی با استفاده از new کلمه کلیدی و عبور در پارامترهای مناسب.

وقتی به خصوصیات موجود در شی ایجاد شده دسترسی پیدا می کنیم person1.greet and person2.greet`، می بینیم که آنها حاوی مقادیر مورد انتظار همانطور که در قطعه کد بالا نشان داده شده است.

هر شی در جاوا اسکریپت دارای یک ویژگی نمونه اولیه است که امکان ارث بردن شی را فراهم می کند. ویژگی نمونه اولیه یک شی است که به عنوان یک الگو یا طرح اولیه برای ایجاد اشیاء جدید عمل می کند.

هنگامی که یک ویژگی یا متد بر روی یک شی فراخوانی می شود، جاوا اسکریپت ابتدا آن ویژگی یا متد را مستقیماً روی خود شی جستجو می کند. اگر نتواند خاصیت یا متد را روی شی پیدا کند، به ویژگی نمونه اولیه شی برای ویژگی یا متد نگاه می کند. اگر ویژگی یا روش هنوز پیدا نشد، زنجیره اولیه را جستجو می‌کند تا به انتهای زنجیره برسد، یعنی همان Object.prototype هدف – شی.

بیایید مثال زیر را در نظر بگیریم:

// create the constructor
function Students(name, age, grade) {
  this.name = name;
  this.age = age;
  this.grade = grade;
  this.register = function() {
    console.log("Hello, " + this.name + " you have been registered");
  }
}
// creating a method using the prototype keyword
Students.prototype.greet = function() {
  console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
}
// generate new objects from the constructor
let person1 = new Students("July", 30); 
let person2 = new Students("Jane", 35);

person1.register(); // "Hello, July you have been registered"
person2.register(); // "Hello, Jane you have been registered"

person1.greet(); // "Hello, my name is July and I'm 30 years old."
person2.greet(); // "Hello, my name is Jane and I'm 35 years old."

کد داده شده یک تابع سازنده به نام تعریف می کند Students. تابع سازنده سه پارامتر (name، age، و grade) و آنها را به عنوان ویژگی های شی جدید ایجاد شده با استفاده از this کلمه کلیدی. همچنین متدی به نام تعریف می کند register() که پیامی را به کنسول ثبت می‌کند و از دانش‌آموز با نام خوش آمد می‌گوید و به او اطلاع می‌دهد که ثبت‌نام شده است.

سپس با استفاده از prototype ویژگی تابع سازنده، متد دیگری را به نام تعریف می کند greet(). این greet() متد یک پیام را به کنسول ثبت می کند و دانش آموز را با نام و سن آنها معرفی می کند.

در نهایت، کد دو نمونه از را ایجاد می کند Students هدف – شی، person1 و person2، با استفاده از new کلمه کلیدی و ارسال مقادیر مناسب برای ویژگی های هر دانش آموز.
وقتی که register() متد بر روی هر شیء فراخوانی می شود، پیام خوش آمدگویی را به کنسول ثبت می کند. به طور مشابه، زمانی که greet() متد بر روی هر شیء فراخوانی می شود، یک پیام مقدماتی را به کنسول ثبت می کند.

در جاوا اسکریپت، کلاس ها راهی برای تعریف یک طرح اولیه برای ایجاد اشیاء با ویژگی ها و روش های مشابه ارائه می دهند. کلاس ها قند نحوی بر روی سیستم ارثی مبتنی بر نمونه اولیه موجود در جاوا اسکریپت هستند.

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

//create the  class constructor
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
}
const student2 = new Person('Adeola', '30')
console.log(student2)

وراثت به توانایی یک شی برای به ارث بردن خواص و روش ها از یک شی والد اشاره دارد. وراثت در کلاس های جاوا اسکریپت با استفاده از کلمه کلیدی extends برای ایجاد یک کلاس فرزند که از یک کلاس والد ارث می برد، پیاده سازی می شود.

ایده وراثت، قابلیت استفاده مجدد کد است. ارث بردن از کلاس Parent باعث می شود کلاس Child بتواند از تمام متدها و ویژگی های کلاس والد استفاده کند.

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

// create the constructor
class Person {
  constructor(name, age, grade) {
    this.name = name;
    this.age = age;
    this.grade = grade;
  }

  greet() {
    console.log("Hello, my name is " + this.name + " and I'm " + this.age + " years old.");
  }
}
class Student extends Person {

  study() {
    console.log(this.name + " is studying hard for his " +  this.grade + ' grade');
  }
}
const student1 = new Student("John", 18, '12th');

student1.greet(); // Output: "Hello, my name is John and I'm 18 years old."
student1.study(); // Output: "John is studying hard for his 12th grade."

در نتیجه، درک شی برای توسعه وب ضروری است. توسعه دهندگان با دانستن اینکه یک شی شامل چه چیزی است و چگونه قابل اجرا است، می توانند کد کارآمدتر و موثرتر بنویسند.

برای واضح بودن، من در این موضوعات متخصص نیستم. من به سادگی آنچه را که در این مسیر به من آموزش داده شده و یاد گرفته ام به اشتراک می گذارم. امیدوارم کمی دانش کسب کرده باشید.

من به شدت توصیه می کنم منابع زیر را بررسی کنید، که مفاهیم توضیح داده شده بیشتر را پوشش می دهد:

از پرسیدن سوال یا نظر دادن در مورد این پست دریغ نکنید. من در دسترس هستم توییتر، لینکدین یا گیت هاب. مواظب پست وبلاگ آتی من باشید که در آن قسمت مهم دیگری از توسعه وب را بررسی خواهم کرد. به عنوان یک توسعه دهنده، خوشحالم که اطلاعات بیشتری را ارائه دهم. تا آن زمان، کد نویسی مبارک، و مراقب باشید!