آبجکت Object

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

• عدد ـ Number ـ ممکنه عدد صحیح یا اعشاری باشه
• استرینگ ـ String ـ همون متنه و بین کوتیشن‌مارک یا بک‌تیک قرار می‌گیره
• بولیَن ـ Boolean ـ یعنی true یا false (صحیح یا غلط)
• نال ـ Null ـ مقدارِ خالی
• تعریف‌نشده ـ Undefined ـ متغیر تعریف شده ولی هیچ مقداری نداره
• آرایه ـ Array ـ فهرستی از داده‌ها
• تابع ـ Function
• آبجکت ـ Object

آبجکت آخرین نوع از انواع داده‌س که می‌شه توی جاوااسکریپت تعریف کرد و در واقع خودش یه روشی برای ساختارمند کردن داده‌هاس. آبجکت‌ها به شما کمک می‌کنن تا به کدتون نظم بدید و فرایند برنامه‌نویسی رو آسون‌تر کنید. چند تا راه برای ساختن یه آبجکت وجود داره؛ یکی‌ش اینه که یه متغیر بسازیم و از علامت آکولاد استفاده کنیم (توی انگلیسی بهش می‌گن کِرلی‌برِیس، برنامه‌نویس‌ها توی زبان عامیانه بهش می‌گن سیبیل):

let movie = {}

این آکولادی الان ساختیم، یه آبجکتِ خالیه که داخل متغیرمون ذخیره شده. حالا می‌تونیم به این آبجکت یه ویژگی‌هایی نسبت بدیم و برای هر ویژگی یه «مقدار» تعریف کنیم؛ این طوری:

let movie = {}
movie.title = 'Dune'
movie.rating = 8
movie.director = 'Denis Villeneuve'

console.log(movie)

یه روش راحت‌تر برای درست کردن آبجکت اینه که از همون اول همه این ویژگی‌ها و مقدارها رو توی خود آکولاد تعریف کنیم:

let movie = {
     title: 'Dune',
     rating: 8,
     director: 'Denis Villeneuve'
}

همون طور که می‌بینید، آبجکت‌ها شامل جفت‌هایی از اطلاعات هستن که بهش می‌گن «کلید ـ مقدار» یا همون key-value. مثلاً توی آبجکت بالا که مشخصات یه فیلمو نشون می‌ده، کلید‌ها title و rating و director هستن و مقدارهاشونو 'Dune' و 8 و 'Denis Villeneuve' تعریف کردم. توی هر آبجکت، هر «کلید»ی مسئول نگه‌داری یه «مقدار»ه و هر کدوم از این جفت‌ها، یه «ویژگی» از آبجکت هستن. برای دسترسی به یه مقدار توی یه آبجکت، باید از کلید اون مقدار استفاده کنیم:

let movie = {
     title: 'Dune',
     rating: 8,
     director: 'Denis Villeneuve'
}

console.log(movie.title)
// Dune

مِتُد

توی آبجکت‌ها می‌شه تابع هم تعریف کرد، تابع‌هایی که مخصوص همون آبجکت هستن و با داده‌های داخل اون آبجکت کار می‌کنن؛ در این صورت به اون ویژگی از آبجکت که شامل یه تابعه اصطلاحاً می‌گن مِتُدِ اون آبجکت. با همین آبجکتی که تا الان ساختیم، توی مثال بعد می‌خوام یه مِتُد تعریف کنم و از اون متد استفاده کنم:

let movie = {
     title: 'Dune',
     rating: 8,
     director: 'Denis Villeneuve',
     myFavoriteMovie: function () {
          console.log('My favorite movie is ' + this.title)
     }
}
movie.myFavoriteMovie()

همون طور که توی مثال بالا دیدید، برای این که توی متُد از کلیدی که داخل آبجکت تعریف شده استفاده کنم، از کلیدواژه this استفاده کردم و بعد متُدی که ساختمو فراخونی کردم تا عملیاتی که داخل متُد نوشته شده، انجام بشه؛ دقت کنید که چون داریم یه تابع رو فراخونی می‌کنیم باید بعد از نوشتن اسم اون کلید، از پرانتز استفاده کنیم.

ایده‌ی اصلی آبجکت توی جاوااسکریپت یا هر زبون برنامه‌نویسیِ دیگه، اینه که برنامه‌نویس بتونه از روی اشیای دنیای واقعی، توی برنامه‌ش آبجکت‌هایی رو تعریف کنه که ویژگی‌ها و رفتارهای خاصی دارن. حالا یه تست کنیم ببینیم چطوری می‌شه توی p5.js از آبجکت‌ها استفاده کرد. یه آبجکت درست می‌کنم که ویژگی‌های یه دایره رو داشته باشه و بتونه برامون یه دایره بکشه:

let myCircle

function setup() {
     createCanvas(windowWidth, windowHeight)
     myCircle = {
          x: width/2,
          y: height/2,
          size: 50,
          draw: function() {
               ellipse(this.x, this.y, this.size, this.size)
          }
     }
}
function draw() {
     myCircle.draw()
}

ممکنه پیش خودتون فک کنید این بی‌خاصیت‌ترین کاریه که می‌شه با یه آبجکت انجام داد چون خیلی راحت می‌شد توی draw از تابع آماده ellipse استفاده کرد و این همه دردسر هم برای ساختن یه آبجکت نکشید. اما این تازه شروع کاره. الان یه متُدِ دیگه اضافه می‌کنیم تا هر وقت فراخونی شد یه واحد اندازه دایره رو افزایش بده:

let myCircle

function setup() {
     createCanvas(windowWidth, windowHeight)
     myCircle = {
          x: width/2,
          y: height/2,
          size: 50,
          draw: function() {
               ellipse(this.x, this.y, this.size, this.size)
          },
          grow: function() {
               if(this.size < 200) {
                    this.size += 1
               }
          }
     }
}
function draw() {
     strokeWeight(3)
     myCircle.draw()
     myCircle.grow()
}

تابع سازنده

یه راه دیگه برای ساختن آبجکت‌ها استفاده کردن از روش تابعِ سازنده‌س؛ این بار موقع تعریف کردن آبجکت، از یه تابع استفاده می‌کنیم؛ این طوری:

let MyCircle
let circle1

function setup() {
     createCanvas(windowWidth, windowHeight)

     // 1. a constructor function
     MyCircle = function () {
          this.x = windowWidth/2
          this.y = windowHeight/2
          this.size = 50
          this.draw = function() {
               ellipse(this.x, this.y, this.size, this.size)
          }
          this.grow = function() {
               if(this.size < 200) {
                    this.size += 1
               }
          }
     }

     // 2. new circle object
     circle1 = new MyCircle()
  
}
function draw() {

     // 3. using the object
     circle1.draw()

}

توی جاوااسکریپت به تابعی که داره یه آبجکت تولید می‌کنه، اصطلاحاً می‌گن تابعِ سازنده. تابعِ سازنده تابعیه که مثل یه قالب عمل می‌کنه برای تولید آبجکت‌هایی که ویژگی‌هاشونو از تابعِ سازنده‌شون به ارث می‌برن. توی مثال بالا توی مرحله اول، یه تابع سازنده تعریف شده و توی متغیر MyCircle قرار گرفته. بعد با کلیدواژه new از تابعِ سازنده یه آبجکت ساختیم و در نهایت، توی مرحله سوم از اون آبجکت استفاده کردیم. هر وقت نیاز باشه که از تابعِ سازنده یه آبجکتِ جدید بسازیم، باید از کلیدواژه new قبل از اسمِ اون تابع استفاده کنیم؛ زیبایی این روش اینه که می‌تونیم از یه قالبِ ثابت، تعداد زیادی آبجکت بسازیم که هر کدوم ویژگی‌های مختلف و متنوعی دارن. ببینید:

let MyCircle
let circle1
let circle2
let circle3

function setup() {
     createCanvas(windowWidth, windowHeight)

     // a constructor function
     MyCircle = function () {
          this.x = windowWidth/2
          this.y = windowHeight/2
          this.size = 50
          this.draw = function() {
               ellipse(this.x, this.y, this.size, this.size)
          }
          this.grow = function() {
               if(this.size < 200) {
                    this.size += 1
               }
          }
     }

     // new circle object
     circle1 = new MyCircle()
     circle2 = new MyCircle()
     circle3 = new MyCircle()
  
}
function draw() {
     circle2.x = windowWidth/2
     circle1.draw()
     circle2.x = windowWidth/2 - 100
     circle2.draw()
     circle3.x = windowWidth/2 + 100
     circle3.draw()
}

توی مثال بالا از طریق کلیدواژه new سه تا آبجکت مختلف از تابعِ سازنده‌ی MyCircle به وجود آوردیم و توی draw ویژگی‌هاشونو تغییر دادیم؛ یه نکته خیلی مهم این جا وجود داره: اگه دقت کرده باشید، من برای نام‌گذاری تابع سازنده، با حرفِ بزرگ شروع به نوشتن کردم؛ این کار اجباری نیست ولی بازم یه جور قراردادِ نانوشته برای انتخاب نامِ توابعِ سازنده‌س؛ این طوری به خودمون یادآوری می‌کنیم که این تابع، یه تابعِ سازنده‌س و برای استفاده کردنش باید از کلیدواژه new استفاده بشه.