Menu
CoddyTech

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 Smith

Lư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.

challenge icon

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 để:

  1. Getter get age(): trả về tuổi đã lưu
  2. 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!"

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)

quiz iconTự kiểm tra

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

Tự luyện tập: Trình biên dịch JavaScript online