បម្រើបម្រាស់ Object

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

វត្ថុ (object) ជា​តម្លៃ​ទិន្នន័យ​មួយ ដែល​អាច​ផ្ទុក​អញ្ញាត និង function នៅ​ក្នុង​នោះ​បាន ។

បង្កើត Object

var car1Name = 'tesla',
    car1Model = 'roadster';
    car1Color = 'red',
    car2Name = 'tesla',
    car2Model = 'x',
    car2Color = 'black';

ខាងលើ យើង​បង្កើត​អញ្ញាត ដែល​តាង​ឲ្យ​ឈ្មោះ ម៉ូដែល និង​ពណ៌ នៃ​ឡាន​ចំនួន ២ ។ ការ​បង្កើត​ផ្នែក​នីមួយៗ​ដាច់​ដោយ​ឡែក​បែប​នេះ មិន​មែន​ជា​រឿង​ងាយ​គ្រប់​គ្រង​នោះ​ទេ ។ ដូចនេះ ជំនួស​ដោយ​ការ​បង្កើត​ផ្នែក​នីមួយៗ​ដោយ​អញ្ញាត​នីមួយៗ យើង​បង្កើត​វា​ជា object ដែល​នឹង​មាន​ទម្រង់​ដូច​ខាងក្រោម ។

var car1 = {
    name: 'tesla',
    model: 'roadster',
    color: 'red'
};
var car2 = {
    name: 'tesla',
    model: 'x',
    color: 'black'
}

ការ​បង្កើត​បែប​ខាងលើ car1 ជា​អញ្ញាត​មួយ តម្លៃ​របស់​វា​ជា object ដែល​ក្ដោប​ក្ដាប់​អញ្ញាត​ផ្សេងៗ​នៅ​ក្នុង​នោះ ។ ថ្វីត្បិត​អញ្ញាត​ដែល​នៅ​ក្នុង car1 មាន​ឈ្មោះ​ដូច​អញ្ញាត​ដែល​នៅ​ក្នុង car2 តែ​វា​មិន​ជា​បញ្ហា​អ្វី​ទេ ព្រោះ​វា​នៅ​ក្នុង object ផ្សេង​គ្នា ។

អញ្ញាត​ដែល​នៅ​ក្នុង object យើង​ហៅ​វា​ថា Property ។


Property នៃ object មួយ ក៏​អាច​ជា object មួយ​ទៀត​ដែរ ។

var car = {
    name: 'tesla',
    model: 'x',
    color: 'black',
    wheel: {
        color: 'black',
        material: 'rubber'
    }
}

ហៅ​តម្លៃ​ពី Object

ដើម្បី​ហៅ​តម្លៃ​ចេញ​ពី property នៃ object ណាមួយ មាន ២ វិធី ៖

  1. វិធី​ទី ១ ៖
    1. ហៅ​ឈ្មោះ​នៃ object
    2. ប្រើ​សញ្ញា .
    3. សរសេរ​ឈ្មោះ​នៃ property ទៅ ជា​ការ​ស្រេច ។
  2. វិធី​ទី ២ ៖
    1. ហៅ​ឈ្មោះ​នៃ object
    2. ប្រើ​សញ្ញា [] (ដង្កៀប)
    3. សរសេរ​ឈ្មោះ​នៃ property នៅ​ក្នុង​អព្ភន្តរសញ្ញា នៅ​ក្នុង​ដង្កៀប​នោះ ។
var car = {
    name: 'tesla',
    model: 'roadster',
    color: 'red'
};
<button onclick="alert(car.name)">ឈ្មោះ​ឡាន</button>
<button onclick="alert(car['color'])">ពណ៌​ឡាន</button>

Method នៃ object

នៅ​មេរៀន​ក្រោយ យើង​មាន​ការ​សិក្សា​អំពី function ទាំងអស់​តែ​ម្ដង ។ នៅ​ក្នុង​វីដេអូ​នេះ យើង​សិក្សា​តែ​អំពី​បម្រើបម្រាស់​របស់​វា​តែ​ប៉ុណ្ណោះ ។

alert() មាន​នាទី​បញ្ចេញ​ប្រអប់​មួយ​មក ។

របៀប​ប្រើប្រាស់ function គឺ​ដូច​ទៅ​នឹង​ការប្រើប្រាស់ alert() ដែរ ៖

កាល​ណា​យើង​បង្កើត function នៅ​ក្នុង Object យើង​ហៅ​វា​ថា method នៃ object ។

គ្រឿង​ក្នុង Javascript

កូដ​ជាច្រើន​ជំនាន់​ក្រោយៗ​មក​នេះ តែង​បង្កើត​ជា​ទម្រង់ object ដូចដែល​យើង​កំពុង​សិក្សា​នេះ​ឯង ព្រោះ​វា​ងាយ​គ្រប់​គ្រង នៅ​ពេល​ដែល​មាន​ទិន្នន័យ​ច្រើន ។ ដូចគ្នា​នេះ​ដែរ Javascript ក៏​បង្កើត​គ្រឿង​ក្នុង​ទាំងឡាយ​ជា​ទម្រង់ object ដែរ ។ អ្វីៗ​ទាំងអស់​ដែល​មាន​នៅ​ក្នុង Javascript ត្រូវ​បាន​បង្កើត​ក្នុង object មួយ​ដែល​មាន​ឈ្មោះ​ថា window ។

អញ្ញាត​ដែល​បាន​បង្កើត​ទាំងឡាយ នឹង​ក្លាយ​ទៅ​ជា property នៃ window ។ រីឯ function វិញ នឹង​ក្លាយ​ទៅ​ជា method នៃ window ដូចគ្នា ។ ដូចនេះ អញ្ញាត test ដើម្បី​ហៅ​វា យើង​គួរ​តែ​សរសេរ window.test ប៉ុន្តែ​រាល់ property និង method នៃ window យើង​អាច​ហៅ​ដោយ​មិន​បាច់​ហៅ window បាន ដោយ​ហេតុ​នេះ​ហើយ ទើប​យើង​អាច​ហៅ​អញ្ញាត ដោយ​គ្រាន់​តែ​ហៅ​ឈ្មោះ​នៃ​អញ្ញាត ។

នៅ​ក្នុង window មាន property មួយ​ដែល​មាន​ឈ្មោះ​ថា document ។ វា​ជា object មួយ ដែល​ក្ដោប​ក្ដាប់​ធាតុ​ទាំងអស់​ដែល​មាន​នៅ​ក្នុង HTML ។ យើង​អាច​ស្វែង​រក​ធាតុ​ណាមួយ ដោយ​ចូល​មើល​ម្ដងមួយៗ​នៅ​ក្នុង document បាន ។ ប៉ុន្តែ​ដើម្បី​ជា​ការ​ងាយ​ស្រួល​ដល់​ការ​ចាប់​យក​ធាតុ​នីមួយៗ Javascript បាន​បង្កើត method មួយ​ចំនួន​ទៅ​ឲ្យ document ដែល​នៅ​ក្នុង​ចំណុច​នេះ យើង​លើក​យក​មក​នូវ method មួយ​មក​សិក្សា គឺ getElementById() ដែល​វា​ប្រើ​សំរាប់​ចាប់​ធាតុ​ទៅ​តាម​ឈ្មោះ​នៃ id ។

var abc = document.getElementById("test");

// innerText នៃ​ធាតុ​ណាមួយ គឹ​ផ្ទុក​អក្សរ​ដែល​នៅ​ក្នុង​ធាតុ​នោះ
var text = abc.innerText;
<div id="test">ស្វាគមន៍​មក​កាន់ Khode</div>
<button onclick="alert(text)">បង្ហាញ</button>

ដោយ​ហេតុ​តែ ធាតុ​ទាំងឡាយ​មិន​អាច​មាន id ច្រើន ឬ​មាន​ជាន់​ឈ្មោះ​គ្នា ដូច​នេះ Javascript បង្កើត​ឲ្យ​ឈ្មោះ id ដែល​មាន​ក្នុង HTML ក្លាយ​ជា​ឈ្មោះ​នៃ​អញ្ញាត​ដែល​ផ្ទុក​ធាតុ​ដែល​មាន id នោះ ។ អញ្ចឹង​ហើយ កូដ​ខាងលើ យើង​អាច​សរសេរ​យ៉ាង​ខ្លី ដូច​ខាងក្រោម​បាន ។

<div id="test">ស្វាគមន៍​មក​កាន់ Khode</div>
<button onclick=" alert(test.innerText) ">បង្ហាញ</button>

សំរាប់ id មួយ​ចំនួន​ដែល​មាន - យើង​មិន​អាច​ហៅ​វា​ចេញ​ពី window ដោយ​ប្រើ . បាន​ទេ ។ យើង​ត្រូវ​ហៅ​ដោយ​ប្រើ [] វិញ ។

<div id="div-test">ស្វាគមន៍​មក​កាន់ Khode</div>
<button onclick=" alert(window['div-test'].innerText) ">បង្ហាញ</button>

this

this ជា​អញ្ញាត​មួយ ដែល​តម្លៃ​របស់​វា គឺ​ជា object ដែល​វា​ស្ថិត​នៅ​ក្នុង ។

<button onclick="alert(this.innerText)" > Khode Academy </button>

ឧទាហរណ៍​ខាងលើ this ស្ថិត​នៅ​ក្នុង <button> ដែល​នៅ​ក្នុង Javascript ធាតុ​ទាំងអស់ សុទ្ធ​តែ​ត្រូវ​បាន​បង្កើត​ជា object ទាំងអស់ ។ ដូចនេះ this ខាងលើ​នោះ គឺ​ផ្ទុក <button> ដែល​វា​ស្ថិត​នៅ​ក្នុង​នោះ​ឯង

ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត