Trong bài viết này, ta sẽ tìm hiểu về các phương thức Getter và Setter trong JavaScript cùng với sự trợ giúp của các ví dụ dẫn chứng.
Hàm Getter và Setter trong JavaScript
Trong JavaScript, có hai loại thuộc tính của đối tượng:
- Thuộc tính dữ liệu.
- Thuộc tính truy cập.
Thuộc tính dữ liệu
Sau đây là một ví dụ về thuộc tính dữ liệu mà chúng ta đã sử dụng trong các bài trước.
|
1 2 3 |
const sinh_vien = { ID: 23 }; |
Thuộc tính truy cập
Trong JavaScript, thuộc tính truy cập là các phương thức lấy hoặc đặt giá trị cho các thành phần của một đối tượng. Vì vậy, chúng ta sẽ sử dụng hai từ khóa sau:
- Từ khóa getđể định nghĩa một phương thức Getter để lấy giá trị của thuộc tính.
- Từ khóa setđể định nghĩa một phương thức Setter để đặt giá trị cho thuộc tính.
Phương thức Getter
Trong JavaScript, các phương thức Getter được sử dụng để truy cập các thuộc tính của một đối tượng.
Ví dụ:
|
1 2 3 4 5 6 7 8 |
const sinh_vien = { ten: 'Nam', get getTen() { return this.ten; } }; console.log(sinh_vien.ten); console.log(sinh_vien.getTen); |
Kết quả:
|
1 2 |
Nam Nam |
Trong chương trình trên, một phương thức Getter có tên là getTen() được định nghĩa để truy cập thuộc tính của một đối tượng.
Chú ý: Để tạo phương thức Getter, ta sẽ sử dụng từ khóa get.
Và cũng như khi truy cập giá trị, chúng ta truy cập hàm này giống như một thuộc tính.
|
1 |
sinh_vien.getTen |
Khi ta cố gắng truy cập dưới dạng một phương thức, một lỗi sẽ xảy ra.
|
1 |
sinh_vien.getTen() |
Phương thức Setter
Trong JavaScript, các phương thức Setter được sử dụng để thay đổi các giá trị thuộc tính của một đối tượng.
Ví dụ:
|
1 2 3 4 5 6 7 8 9 |
const sinh_vien = { ten: 'Nam', set change(ten) { this.ten = ten; } }; console.log(sinh_vien.ten); sinh_vien.change = 'Thanh'; console.log(sinh_vien.ten); |
Kết quả:
|
1 2 |
Nam Thanh |
Trong ví dụ trên, phương thức Setter được sử dụng để thay đổi giá trị của một đối tượng.
|
1 2 3 |
set change(ten) { this.ten = ten; } |
Chú ý: Để tạo phương thức Setter, ta sẽ sử dụng từ khóa set.
Như trong chương trình trên, giá trị của ten ban đầu là Nam. Sau đó, giá trị được thay đổi thành Thanh.
Chú ý: Phương thức Setter phải có chính xác một tham số nhất định.
Phương thức Object.defineProperty()
Trong JavaScript, ta cũng có thể sử dụng phương thức Object.defineProperty()để thêm các phương thức Getters và Setters.
Ví dụ:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
const sinh_vien = { ten: 'Nam' } Object.defineProperty(sinh_vien, "getTen", { get : function () { return this.ten; } }); Object.defineProperty(sinh_vien, "change", { set : function (ten) { this.ten = ten; } }); console.log(sinh_vien.getTen); sinh_vien.change = 'Thanh'; console.log(sinh_vien.getTen); |
Kết quả:
|
1 2 |
Nam Thanh |
Trong ví dụ trên, phương thức Object.defineProperty() được sử dụng để truy cập và thay đổi thuộc tính của một đối tượng.
Cú pháp để sử dụng Object.defineProperty() như sau:
|
1 |
Object.defineProperty(đối tượng, tên thuộc tính, mô tả) |
Trong đó, phương thức Object.defineProperty() có ba đối số:
- Đối số đầu tiên là tên của đối tượng.
- Đối số thứ hai là tên của thuộc tính.
- Đối số thứ ba là một đối tượng mô tả cho thuộc tính đó.
Trên đây là khái niệm và ví dụ cơ bản về phương thức Getter và Setter trong JavaScript. Hy vọng mọi người có thể áp dụng vào trong chương trình của mình. Mọi người hãy tiếp tục theo dõi các bài tiếp theo và cập nhật các bài tiếp theo về lập trình JavaScript trên tek4 nhé!
P/s: Cảm ơn mọi người đã tin tưởng tek4!
