Từ khóa get và set
Thuộc phần Lập trình hướng đối tượng trong hành trình JavaScript của Coddy. Bài học 43 trên 56.
Getter và setter là các phương thức đặc biệt trông giống thuộc tính nhưng thực chất là hàm. Chúng giúp bạn kiểm soát cách truy cập và thay đổi thuộc tính.
Hãy tạo một lớp Person đơn giản:
class Person {
constructor(firstName, lastName) {
this._firstName = firstName;
this._lastName = lastName;
}
// Phương thức getter cho fullName
get fullName() {
return `${this._firstName} ${this._lastName}`;
}
// Phương thức setter cho fullName
set fullName(value) {
const parts = value.split(' ');
this._firstName = parts[0];
this._lastName = parts[1];
}
}Dấu gạch dưới trong _firstName và _lastName là quy ước đặt tên: nó cho các lập trình viên khác biết rằng những thuộc tính này là nội bộ, nên được đọc và thay đổi thông qua getter và setter, không phải trực tiếp. JavaScript không thực thi quy ước này.
Giờ đây, chúng ta có thể dùng các getter và setter này như thuộc tính:
// Tạo một Person mới
const person = new Person('John', 'Doe');
// Dùng getter
console.log(person.fullName); // Đầu ra: John Doe
// Dùng setter
person.fullName = 'Jane Smith';
// setter đã cập nhật các thuộc tính bên trong
console.log(person.fullName); // Đầu ra: Jane SmithLưu ý rằng chúng ta không gọi các phương thức này bằng dấu ngoặc đơn. Chúng hoạt động giống như thuộc tính, nhưng chạy code khi được truy cập hoặc thay đổi.
Thử thách
Bạn được cung cấp một lớp User có thuộc tính age. Nhiệm vụ của bạn là thêm getter và setter cho age để:
- Getter
get age(): trả về tuổi đã lưu - Setter
set age(newAge): kiểm tra tuổi có nằm trong khoảng từ 0 đến 120 hay không- Nếu hợp lệ (từ 0 đến 120): lưu giá trị vào
this._age - Nếu không hợp lệ: không thay đổi giá trị và ghi ra
"Invalid age!"
- Nếu hợp lệ (từ 0 đến 120): lưu giá trị vào
Tự làm thử
import { User } from './user.js';
// Code kiểm thử, không sửa
const user = new User("Alice", 25);
console.log(user.age); // Phải in ra 25
user.age = 30;
console.log(user.age); // Phải in ra 30
user.age = 150; // Phải hiển thị "Invalid age!"
console.log(user.age); // Vẫn phải in ra 30 (không thay đổi)
Bài học này có một bài trắc nghiệm ngắn. Bắt đầu bài học để trả lời và theo dõi tiến độ.
Tất cả bài học trong Lập trình hướng đối tượng
1Đối tượng và từ khóa this
Ôn nhanh: đối tượngThêm phương thức vào đối tượngTìm hiểu từ khóa thisHàm khởi tạoTừ khóa newThử thách ôn tập7Kế thừa và từ khóa extends
Kế thừaQuan hệ "là một"Từ khóa extendsPhương thức super()Kế thừa thuộc tính và phương thứcThử thách ôn tập13Kết hợp hay kế thừa
Quan hệ “có một” và “là một”Những hạn chế của kế thừa nhiều tầngXây dựng đối tượng5Đóng gói và quyền truy cập
Đóng góiTrường công khai và trường riêng tưPhương thức riêng tưThử thách ôn tập8Tổ chức code OOP
Tổ chức các lớp thành module11Dự án: Trình hiển thị hình dạng
Thiết lập: lớp Hình dạng và xuấtKế thừa lớp Hình trònGhi đè và phương thức diện tíchBộ đếm hình dạng tĩnh6Dự án: Tài khoản ngân hàng đơn giản
Lớp BankAccountGửi tiền và rút tiềnSố dư dưới dạng thuộc tính riêng tư9Phương thức và thuộc tính tĩnh
Cấp lớp và cấp instanceThuộc tính tĩnhPhương thức tiện ích tĩnhThử thách ôn tập12Getter và setter
Từ khóa get và setThuộc tính tính toánKiểm tra hợp lệ và tác dụng phụThử thách ôn tậpTự luyện tập: Trình biên dịch JavaScript online