JavaScript - Phương thức đối tượng

Xin chào, các pháp sư JavaScript tương lai! Hôm nay, chúng ta sẽ cùng lặn sâu vào thế giới kỳ diệu của các phương thức đối tượng trong JavaScript. Hãy chuẩn bị cây phép thuật của bạn (bàn phím) và cùng nhau bắt đầu hành trình thú vị này!

Phương thức đối tượng là gì?

Trước khi chúng ta bắt đầu施展 các phép thuật với các phương thức đối tượng, hãy cùng hiểu chúng là gì. Nói một cách đơn giản, phương thức đối tượng là các hàm thuộc về một đối tượng. Chúng giống như những khả năng đặc biệt mà các đối tượng của chúng ta sở hữu.

Hãy nhìn vào một ví dụ cơ bản:

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

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

Ở đây, castSpell là một phương thức của đối tượng wizard. Khi chúng ta gọi wizard.castSpell(), pháp sư của chúng ta thực hiện phép thuật của mình!

Cú pháp rút gọn cho phương thức đối tượng

Bây giờ, hãy học một tuyệt chiêu. ES6 đã giới thiệu một cách viết ngắn hơn để xác định các phương thức trong đối tượng. Đó giống như một lối tắt kỳ diệu để viết các phương thức đối tượng!

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

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

Thấy sao? Chúng ta đã loại bỏ phần : function. Nó ngắn hơn và gọn hơn, giống như một cuốn sách phép thuật được tổ chức tốt!

Cập nhật hoặc thêm phương thức vào đối tượng

Các đối tượng trong JavaScript rất linh hoạt. Chúng ta có thể thêm mới hoặc cập nhật các phương thức hiện có ngay cả sau khi đối tượng đã được tạo. Đó giống như dạy pháp sư của chúng ta các phép thuật mới!

let wizard = {
name: 'Merlin'
};

// Thêm một phương thức mới
wizard.castFireball = function() {
console.log('Whoosh! Fireball launched!');
};

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

// Cập nhật một phương thức hiện có
wizard.castFireball = function() {
console.log('Super fireball engaged!');
};

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

Trong ví dụ này, chúng ta đầu tiên thêm phương thức castFireball vào pháp sư của mình, sau đó cập nhật nó để casting một fireball mạnh hơn!

Sử dụng các phương thức内置

Các đối tượng JavaScript đi kèm với một số phép thuật... tôi có nghĩa là các phương thức! Hãy cùng khám phá một số trong số chúng:

1. Object.keys()

Phương thức này trả về một mảng chứa các tên thuộc tính của đối tượng.

let spellBook = {
fireball: 'Deals fire damage',
iceBeam: 'Freezes the target',
thunderbolt: 'Electrifies the enemy'
};

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

2. Object.values()

Tương tự như Object.keys(), nhưng trả về một mảng chứa các giá trị thuộc tính của đối tượng.

console.log(Object.values(spellBook));
// Output: ['Deals fire damage', 'Freezes the target', 'Electrifies the enemy']

3. Object.entries()

Phương thức này trả về một mảng chứa các cặp [key, value] của các thuộc tính enumerable của đối tượng.

console.log(Object.entries(spellBook));
// Output: [
//   ['fireball', 'Deals fire damage'],
//   ['iceBeam', 'Freezes the target'],
//   ['thunderbolt', 'Electrifies the enemy']
// ]

Dưới đây là bảng tóm tắt các phương thức này:

Phương thức	Mô tả	Ví dụ
Object.keys()	Trả về một mảng chứa tên thuộc tính của đối tượng	Object.keys(spellBook)
Object.values()	Trả về một mảng chứa giá trị thuộc tính của đối tượng	Object.values(spellBook)
Object.entries()	Trả về một mảng chứa các cặp [key, value] của thuộc tính string-keyed	Object.entries(spellBook)

Từ khóa 'this' trong phương thức đối tượng

Bây giờ, hãy nói về một khái niệm mạnh mẽ nhưng đôi khi gây rối: từ khóa this. Trong các phương thức đối tượng, this tham chiếu đến đối tượng mà phương thức thuộc về. Nó giống như đối tượng nói "this is me!"

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

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

Trong ví dụ này, this.name tham chiếu đến thuộc tính name của đối tượng wizard.

Ví dụ thực tế: Trò chơi casting phép thuật

Hãy cùng tổng hợp tất cả những gì chúng ta đã học vào một trò chơi casting phép thuật nhỏ!

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!

Trong trò chơi này, pháp sư của chúng ta có thể casting phép thuật miễn là họ có đủ mana. Phương thức castSpell kiểm tra chi phí mana của phép thuật, trừ nó khỏi mana của pháp sư nếu có thể, và cung cấp phản hồi cho hành động.

Và thế là xong, các học trò! Bạn đã học được những основ của các phương thức đối tượng trong JavaScript. Nhớ rằng, thực hành là chìa khóa của sự hoàn hảo, vì vậy hãy tiếp tục thử nghiệm với các khái niệm này. Sớm thôi, bạn sẽ mã hóa như một pháp sư JavaScript thực thụ! Chúc mã nguồn của bạn không có lỗi và các phương thức của bạn luôn trả về kết quả mong đợi. Hãy mã hóa vui vẻ!

Credits: Image by storyset