7.1 Tạo phương thức của đối tượng
Phương thức của đối tượng trong JavaScript là các hàm, mà gắn liền với các đối tượng và có thể thực hiện hành động trên các đối tượng đó. Phương thức cho phép đối tượng có hành vi riêng của mình, điều này làm cho chúng trở thành một phần quan trọng của lập trình hướng đối tượng. Dưới đây chúng ta sẽ xem xét việc tạo và sử dụng phương thức của đối tượng.
Phương thức của đối tượng có thể được tạo theo nhiều cách. Hãy cùng xem qua những cách chính nhé.
1. Literal của đối tượng
Phương thức có thể được tạo trực tiếp trong literal của đối tượng, bằng cách sử dụng hàm.
Trong ví dụ này, đối tượng person có phương thức greet(), trả về một chuỗi sử dụng thuộc tính name của đối tượng:
let person = {
name: 'John',
age: 30,
greet: function() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Kết quả: Hello, my name is John
2. Cú pháp rút gọn của phương thức
Với ES6, cú pháp rút gọn cho việc tạo phương thức của đối tượng đã xuất hiện.
Cú pháp này làm cho mã trở nên ngắn gọn và dễ đọc hơn:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Kết quả: Hello, my name is John
3. Thêm phương thức sau khi tạo đối tượng
Phương thức có thể được thêm vào đối tượng sau khi nó đã được tạo.
Trong ví dụ này, phương thức greet() được thêm vào đối tượng person sau khi nó được tạo:
let person = {
name: 'John',
age: 30
};
person.greet = function() {
return `Hello, my name is ${this.name}`;
};
console.log(person.greet()); // Kết quả: Hello, my name is John
4. Sử dụng hàm constructor
Hàm constructor cho phép tạo phương thức cho tất cả các instance của đối tượng.
Trong ví dụ này, phương thức greet() được tạo cho mỗi instance của đối tượng được tạo với hàm constructor Person():
function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
return `Hello, my name is ${this.name}`;
};
}
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Kết quả: Hello, my name is John
console.log(jane.greet()); // Kết quả: Hello, my name is Jane
7.2 Sử dụng phương thức của đối tượng
1. Truy cập phương thức qua dấu chấm
Phương thức của đối tượng có thể được gọi bằng cú pháp dấu chấm:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
console.log(person.greet()); // Kết quả: Hello, my name is John
2. Truy cập phương thức qua dấu ngoặc vuông
Phương thức của đối tượng cũng có thể được gọi bằng cách sử dụng dấu ngoặc vuông:
let person = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let result = person['greet']();
console.log(result); // Kết quả: Hello, my name is John
3. Gọi phương thức bên trong một phương thức khác
Phương thức của đối tượng có thể gọi các phương thức khác của chính đối tượng đó.
Trong ví dụ này, các phương thức sum() và mul() sử dụng các giá trị được đặt bởi phương thức setValues():
let calculator = {
a: 0,
b: 0,
setValues(a, b) {
this.a = a;
this.b = b;
},
sum() {
return this.a + this.b;
},
mul() {
return this.a * this.b;
}
};
calculator.setValues(2, 3);
console.log(calculator.sum()); // Kết quả: 5
console.log(calculator.mul()); // Kết quả: 6
4. Sử dụng this trong phương thức
Từ khóa this trong phương thức của đối tượng tham chiếu đến chính đối tượng đó, cho phép truy cập vào các thuộc tính và các phương thức khác:
let car = {
brand: 'Toyota',
model: 'Camry',
getInfo() {
return `Brand: ${this.brand}, Model: ${this.model}`;
}
};
console.log(car.getInfo()); // Kết quả: Brand: Toyota, Model: Camry
5. Truyền phương thức như callback
Khi phương thức của đối tượng được truyền như callback, quan trọng là phải chú ý đến giá trị của this:
let person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
setTimeout( person.greet, 1000 ); // Kết quả: Hello, my name is undefined
Trong ví dụ này, giá trị của this bị mất khi phương thức greet() được truyền như callback vào setTimeout(). Kết quả là this trong greet() tham chiếu đến đối tượng toàn cục window. Trong các trình duyệt, đối tượng window có thuộc tính name, mặc định là chuỗi rỗng "". Do đó, in ra sẽ là "Hello, my name is". Để giữ giá trị this đúng, có thể sử dụng phương thức bind(), gắn hàm với một ngữ cảnh nhất định:
setTimeout(person.greet.bind(person), 1000); // Kết quả: Hello, my name is John
Hoặc sử dụng function mũi tên:
setTimeout(() => person.greet(), 1000); // Kết quả: Hello, my name is John
7.3 Chia sẻ phương thức
1. Kế thừa phương thức qua prototype
Phương thức có thể được thêm vào prototype của đối tượng, để chúng có thể được truy cập bởi tất cả các instance:
function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.greet = function() {
return `Hello, my name is ${this.name}`;
};
let john = new Person('John', 30);
let jane = new Person('Jane', 25);
console.log(john.greet()); // Kết quả: Hello, my name is John
console.log(jane.greet()); // Kết quả: Hello, my name is Jane
2. Sử dụng phương thức từ đối tượng khác
Phương thức của một đối tượng có thể được gọi cho đối tượng khác bằng cách sử dụng phương thức call() hoặc apply():
let person1 = {
name: 'John',
age: 30,
greet() {
return `Hello, my name is ${this.name}`;
}
};
let person2 = {
name: 'Jane',
age: 25
};
console.log(person1.greet.call(person2)); // Kết quả: Hello, my name is Jane
GO TO FULL VERSION