JavaScript - Object Methods

Hai, para para pengguna JavaScript masa depan! Hari ini, kita akan melihat dunia yang keramat JavaScript object methods. Ambil kayu kodming kamu (papan kekunci) dan mari kita melangkah dalam perjalanan yang menarik ini bersama-sama!

Apa Itu JavaScript Object Methods?

Sebelum kita mulakan melempar mantra dengan object methods, mari kita faham apa itu. Dalam istilah mudah, object methods adalah fungsi yang milik kepada object. Mereka seperti kebolehan khas yang dimiliki objek kita.

Mari kita lihat contoh asas:

let wizard = {
name: 'Merlin',
castSpell: function() {
console.log('Abracadabra!');
}
};

wizard.castSpell(); // Output: Abracadabra!

Di sini, castSpell adalah method objek wizard. Ketika kita panggil wizard.castSpell(), wizard kita menjalankan sihirnya!

Object Method Shorthand

Sekarang, mari kita belajar trick menarik. ES6 memperkenalkan cara yang lebih pendek untuk mendefinisikan methods dalam objek. Ia seperti jalan pintas magik untuk menulis methods objek!

let wizard = {
name: 'Merlin',
castSpell() {
console.log('Abracadabra!');
}
};

wizard.castSpell(); // Output: Abracadabra!

Lihat bagaimana kita menghapuskan bahagian : function? Ia lebih pendek dan lebih bersih, seperti buku sihir yang teratur!

Memperbaharui atau Menambah Method ke Object

Objek dalam JavaScript adalah fleksibel. Kita boleh menambah method baru atau memperbaharui method yang ada bahkan selepas objek dicipta. Ia seperti mengajarkan wizard kita sihir baru!

let wizard = {
name: 'Merlin'
};

// Menambah method baru
wizard.castFireball = function() {
console.log('Whoosh! Fireball pelancaran!');
};

wizard.castFireball(); // Output: Whoosh! Fireball pelancaran!

// Memperbaharui method yang ada
wizard.castFireball = function() {
console.log('Super fireball diaktifkan!');
};

wizard.castFireball(); // Output: Super fireball diaktifkan!

Dalam contoh ini, kita pertama-tama menambah method castFireball ke wizard kita, kemudian kita memperbaharui ia untuk melancarkan fireball yang lebih kuat!

Menggunakan Methods Bawaan

Objek JavaScript datang dengan beberapa sihir... maksud saya methods! Mari kita jelajahi beberapa daripadanya:

1. Object.keys()

Method ini mengembalikan array dari nama properti sendiri objek yang diberikan.

let spellBook = {
fireball: 'Memberi kerosakan api',
iceBeam: 'Menyembuhkan sasaran',
thunderbolt: 'Menerbak musuh'
};

console.log(Object.keys(spellBook));
// Output: ['fireball', 'iceBeam', 'thunderbolt']

2. Object.values()

Mirip dengan Object.keys(), tetapi mengembalikan array nilai properti yang boleh dienumerasi milik objek.

console.log(Object.values(spellBook));
// Output: ['Memberi kerosakan api', 'Menyembuhkan sasaran', 'Menerbak musuh']

3. Object.entries()

Method ini mengembalikan array pasangan [key, value] properti string yang boleh dienumerasi milik objek.

console.log(Object.entries(spellBook));
// Output: [
//   ['fireball', 'Memberi kerosakan api'],
//   ['iceBeam', 'Menyembuhkan sasaran'],
//   ['thunderbolt', 'Menerbak musuh']
// ]

Berikut adalah tabel yang menggabungkan methods ini:

Method	Description	Example
Object.keys()	Mengembalikan array nama properti objek	Object.keys(spellBook)
Object.values()	Mengembalikan array nilai properti objek	Object.values(spellBook)
Object.entries()	Mengembalikan array pasangan [key, value] properti objek	Object.entries(spellBook)

Kata Kunci 'this' dalam Object Methods

Sekarang, mari kita bicarakan konsep yang kuat tetapi kadang-kadang membingungkan: kata kunci this. Dalam methods objek, this merujuk kepada objek method itu sendiri. Ia seperti objek itu berkata "ini saya!"

let wizard = {
name: 'Merlin',
introduceYourself() {
console.log(`Hello, I am ${this.name}!`);
}
};

wizard.introduceYourself(); // Output: Hello, I am Merlin!

Dalam contoh ini, this.name merujuk kepada properti name objek wizard.

Contoh Praktis: Permainan Melempar Sihir

Mari kita gabungkan apa yang kita telah belajar dalam permainan kecil melempar sihir!

let wizard = {
name: 'Merlin',
mana: 100,
spells: {
fireball: 30,
iceBeam: 20,
heal: 50
},
castSpell(spell) {
if (this.mana >= this.spells[spell]) {
this.mana -= this.spells[spell];
console.log(`${this.name} casts ${spell}! Mana remaining: ${this.mana}`);
} else {
console.log(`${this.name} doesn't have enough mana to cast ${spell}!`);
}
}
};

wizard.castSpell('fireball'); // Output: Merlin casts fireball! Mana remaining: 70
wizard.castSpell('heal'); // Output: Merlin casts heal! Mana remaining: 20
wizard.castSpell('fireball'); // Output: Merlin doesn't have enough mana to cast fireball!

Dalam permainan ini, wizard kita boleh melempar sihir selagi mereka mempunyai cukup mana. Method castSpell memeriksa kos mana sihir, mengurangkan ia daripada mana wizard jika mungkin, dan memberikan maklum balas tentang tindakan.

Dan di sana kamu ada, para pengguna! Anda telah belajar asas JavaScript object methods. Ingat, latihan membuat sempurna, jadi terus cuba konsep ini. Sebelum long, anda akan menulis seperti seorang JavaScript wizard! Semoga kod anda bebas dari bug dan methods anda selalu mengembalikan output yang dijangkakan. Selamat berkoding!

Credits: Image by storyset