اشیا یک ساختمان داده مهم در جاوا اسکریپت است که به صورت کلید مقدار یک سری داده (Data or Property) و یک سری عملکرد (Functionality or Method) مرتبط به یک موجودیت را درخود جای داده است . این نوع داده بسیار کاربردی خواهد بود اگر داده ها و عملیات های موجود در برنامه بسیار نزدیک به هم باشند (جایگزین متغیر ها و توابع فراوان برای برنامه خواهد بود) . بسیاری از امکاناتی که مفسر جاوا اسکرپیت در اختیار شما قرار می دهد در قالب شئ است (Date , Math , Set , Map , Proxy , Symbol , String , Number , Boolean , Array , …)

همه چیز در جاوا اسکریپت شئ است و اگر شما مفهوم اشیا را در جاوا اسکریپت فرابگیرید جاوا اسکریپت را فراگرفته اید.

ساختار شئ‌ به این صورت است که کلید های آن باید از جنس رشته یا عدد ( String or Number ) است و مقدار آن می تواند از هر یک از ساختار های Primitive , none Primitive باشد . مثلا می تواند یک شئ‌ باشد .همچنین اشیا می تواند در داخل یک آرایه قرار بگیرد که گاها آن را با JSON Array می نامیم. در صورتی که نیاز دارید که در کلید ها نیز بتوان از ساختار پیشرفته استفاده کرد باید از نوع داده Map استفاده کنید.

Object Literal

معمولا برای تعریف یک شئ یک متغیر باید تعریف کنیم. ممکن است شئ ما به صورت تحت الحفظ تولید گردد (Object Literal) و یا این که از روی یک قالب دیگر Instance گردد (Instanciate or inheritance) که در هر دو صورت از یک Object Prototype ارث بری می کند. (initialize and evaluate object)

const ali = {
   name: 'Ali',
   famil: 'Alavi',
   age: 21,
   job: 'sfs',
   introduce(){
      console.log(`Hello i'm ${this.name} and ${this.age}`)
   }
}

همان طور که در مثال بالا مشاهده می کنید ساختار یک شئ از یک سری داده (name,famil,age,job) و یک سری عملیات مرتبط با داده ها (introduce) تشکیل شده است . همچنین کلمه کلیدی this در داخل اشیا به منزله شئ جاری یا همان Prototype می باشد . به همین دلیل زمانی که یک متد را می خواهیم توصیف کنیم ازObject.Prototype.{method} استفاده می کنیم.

شئ بالا از نوع (Object Literal) یا یک شئ است که از Object Prototype ارث بری می کند و معنی تحت الحفظ این است که به ضمن تعریف مقدار دهی شده است و از روی شئ دومی برگرفته نشده است .

معمولا به ازای هر ویژگی (Property) یک getter , setter به صورت متد خواهیم داشت . به طور مثال اگر name باشد getName , setName را خواهیم داشت. همچنین الزامی وجود ندارد که همه Property ها یا Method ها را در زمان تعریف مقدار دهی کنیم . می توان بعد از تعریف با Dot Notation , Bracket Notation این موارد را تعریف و مقدار دهیم کرد.

Dot Notation

کاراکتر dot یکی از مرسوم ترین ، خلاصه تر و خوش syntax ترین راه های دسترسی به Property , Method های موجود در یک شئ است . در این حالت گویی که نام شئ مثل namespace عمل می کند . این جاست که می توان گفت که هر شئ‌ متشکل از یک سری داده مرتبط به هم با namespace نام شئ است.

const ali = {
  name: 'ali',
  famil: 'alavi',
  age: 21,
  job: 'sfs',

  walk(){
    console.log('walking...')
  },
  introduce(){
    console.log(`Hello my name is ${this.name}`)
  }
}

console.log('Properties==============================')
console.log(
  'Name: ',ali.name,
  'Famil: ',ali.famil,
  'Age: ',ali.age,
)

console.log('Methods=================================')
ali.walk()
ali.introduce()

با همین syntax می توان مقدار یک Property را نیز عوض کرد. ali.name = "Alireza" .

Bracket Notation

براکت [] یکی دیگر از راه های دستیابی و بروزرسانی مقادیر اشیا می باشد که در مواقع خاص ( حالت هایی که قرار است مقادیر به صورت Dynamic مقدار دهی یا دسترسی داشته باشند) الزامی است .

const ali = {
  name: 'ali',
  famil: 'alavi',
  age: 21,
  job: 'sfs',

  walk(){
    console.log('walking...')
  },
  introduce(){
    console.log(`Hello my name is ${this.name}`)
  }
}

console.log('Properties==============================')
console.log(
  'Name: ',ali['name'],
  'Famil: ',ali['famil'],
  'Age: ',ali['age'],
)

console.log('Methods=================================')
ali['walk']()
ali['introduce']()

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

const persons = [
  {
    name: 'ali',
    famil: 'alavi',
  } ,
  {
    name: 'ahmad',
    famil: 'ahmadi',
  } , 
  {
    name: 'mohamad',
    famil: 'mohamadi',
  }
]

function getProp(propName){
  for(let person of persons){
    console.log(person[propName])		
  }
}

console.log('Poperty `name`=======================')
getProp('name')

console.log('Property `famil`=====================')
getProp('famil')

this in Objects

کلمه کلیدی this به طور مستقیم به شئ جاری در اشیا اشاره می کند و معادل Prototype ارث بری شده از شئ‌ مورد نظر است . کاربرد اصلی this زمانی است که ما یک شئ قالب را تعریف کنیم و با استفاده از آن بتوانیم میان عملیات ها در اشیا که از روی این شئ جاری ارث بری شده اند به ویژگی ها دسترسی داشته باشیم.(عملا چند شئ‌ داشته باشیم – create more than object from single defination)

const ali = {
  name: 'Ali',
  introduce = function() {
    console.log(`Hello my name is ${this.name}`)
  }
}

Constructor

همه چیز در جاوا اسکریپت شئ است . به توابع Constructor می گوییم به گونه ای که یک تابع یک شئ در درون خود دارد (this) و یک سری مقادیر را می تواند به عنوان ورودی فی الواقع زمانی که فراخوانی می شود و یا Instance گرفته می شود در خود تعریف کند. پیش از معرفی ساختمان داده Class در ES6 برای ساخت اشیا از function استفاده می کردیم و بسیاری از اشیا جاری در مرورگر که مرتبط به Browser Object Api می باشد نظیر Date و String … با همین روش ساخته شده است . ( دقت داشته باشید که منظور نوع داده هایی که Constructor داشته باشند . به طور مثال Math در خود Constructor ندارد و اگر به صورت new ساخته شود خطا خواهیم گرفت ).

روش ساخت شئ تحت الفظ یا Object Literal برای زمانی خوب است که بخواهیم یک شئ ایجاد کنیم. در صورتی که بخواهیم از یک شئ چند مورد ایجاد کنیم باید از روش های دیگر نظیر Class , Constructor استفاده کنیم.

ما به دو روش می توانیم یک شئ را از روی یک Constructor ایجاد کنیم. روش اول این که تابع را فراخوانی کنیم و حتما در بدنه تابع به عنوان اتمام this را برگردانیم. در روش دوم می توانیم از کلمه کلیدی new استفاده کنیم.

const Person = (iname) => {
  this.name = iname
  this.introduce = function() {
    console.log(`Hello my name is ${this.name}`)
  }
  return this
}

const ali = Person('ali')
console.log(ali)
ali.introduce()

function Person(iname){
  this.name = iname
  this.introduce = function(){
    console.log(`Hello my name is ${this.name}`)
  }
}

const ali = new Person('ali')
console.log(ali)
ali.introduce()

به کلمه کلیدی this در بدنه تابع باید دقت کنید که اگر قرار است ویژگی از این تابع در اشیا آن قابل دسترس باشد باید در this تعریف گردد.

Every things is Object

همه چیز در جاوا اسکریپت شئ است . Primitive ,none Primitive همگی اشیا هستند که از نوع داده های موجود در جاوا اسکریپت ساخته شده اند. به این ترتیب می توان گفت که ما زمانی که یک بلوک کد در یک برنامه داریم که حاوی یک سری داده هاست همه آن داده ها یک نوع خاص از اشیا جاوا اسکریپت خواهند بود.

همچنین زمانی که یک متد از یک رشته را فراخوانی می کنید دقیقا از syntax اشیا استفاده می کنید .  زمانی که شما یک رشته را تعریف می کنید جاوا اسکریپت به صورت اتوماتیک یک شئ از String می سازد و بلافاصله Property/Method های رشته ها در آن موجود خواهد بود.

let string = 'hello world'
string.split(' ')
//Array [ "hello", "world" ]
'hello world'.split(' ')
//Array [ "hello", "world" ]

این اشیا یک سری متد Dynamic دارند و یک سری متد Static که در هر ساختمان داده مربوط به مفصلا توضیح داده شده است. به طور مثال splite از متد های Dynamic از موجودیت String است.

let str = new String
let num = new Number
let bool = new Boolean
let obj = new Object
let arr = new Array

let d = new Date 

console.log(str,num,bool,obj,arr,d)

همچنین هر node از یک سند dom یک شئ می تواند باشد که یک سری ویژگی یا داده خاص – Attribute – دارد و همچنین به ازای Event های خاص قرار است یک سری متد اجرا گردد. که به آن Document Object می گوییم و در client side programming بسیار از آن استفاده می کنیم و متد های خاص به خود را هم دارد.

let heading = document.querySelector('h1')
let paragraph = document.querySelector('p')
let div = document.createElement('div')
document.body.append(div)
console.log('using `heading`,`paragraph` , `div` object variable to see Props/Methods')