JavaScript: JavaScript Getters và Setters

Giới thiệu về getters và setters trong JavaScript

Ví dụ sau định nghĩa một lớp Person:

class Person {
    constructor(name) {
        this.name = name;
    }
}

let person = new Person("John");
console.log(person.name); // John

Lớp Person có một thuộc tính name và một hàm tạo. Hàm tạo khởi tạo thuộc tính name.

Đôi khi, bạn không muốn thuộc tính name được truy cập trực tiếp như thế này:

person.name

Khi đó, bạn có thể nghĩ ra một cặp phương thức để thao tác với thuộc tính name. Ví dụ:

class Person {
    constructor(name) {
        this.setName(name);
    }
    getName() {
        return this.name;
    }
    setName(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this.name = newName;
    }
}

let person = new Person('Jane Doe');
console.log(person); // Jane Doe

person.setName('Jane Smith');
console.log(person.getName()); // Jane Smith

Trong ví dụ này, lớp Person có thuộc tính name. Ngoài ra, nó còn có hai phương thức bổ sung getName() và setName().

Phương thức getName() trả về giá trị của thuộc tính name.

Phương thức setName() gán một đối số cho thuộc tính name, loại bỏ các khoảng trắng ở cả hai đầu của đối số newName và đưa ra một exception nếu đối số newName rỗng.

Phương thức constructor() gọi phương thức setName() để khởi tạo thuộc tính name:

constructor(name) {
    this.setName(name);
}

Các phương thức getName() và setName() được gọi là getter và setter trong các ngôn ngữ lập trình khác như Java và C++.

ES6 cung cấp một cú pháp cụ thể để xác định getter và setter bằng cách sử dụng từ khóa get và set. Ví dụ:

class Person {
    constructor(name) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
    set name(newName) {
        newName = newName.trim();
        if (newName === '') {
            throw 'The name cannot be empty';
        }
        this._name = newName;
    }
}

Làm thế nào nó hoạt động.

Đầu tiên, thuộc tính name được thay đổi thành _name để tránh xung đột tên với getter và setter.

Thứ hai, getter sử dụng từ khóa get theo sau là tên phương thức:

get name() {
    return this._name;
}

Để gọi getter, bạn sử dụng cú pháp sau:

let name = person.name;

Khi JavaScript thấy quyền truy cập vào thuộc tính name của một đối tượng thuộc lớp Person, nó sẽ kiểm tra xem lớp Person đó có thuộc tính name nào không.

Nếu không, JavaScript sẽ kiểm tra xem lớp Person có bất kỳ phương thức nào liên kết với thuộc tính name hay không. Trong ví dụ này, phương thức name() liên kết với thuộc tính name thông qua từ khóa get. Khi JavaScript tìm thấy phương thức getter, nó sẽ thực thi phương thức getter và trả về một giá trị.

Thứ ba, setter sử dụng từ khóa set theo sau là tên phương thức:

set name(newName) {
    newName = newName.trim();
    if (newName === '') {
        throw 'The name cannot be empty';
    }
    this._name = newName;
}

JavaScript sẽ gọi setter name() khi bạn gán giá trị cho thuộc tính name như sau:

person.name = 'Jane Smith';

Nếu một lớp chỉ có getter chứ không có setter và bạn cố gắng sử dụng setter thì thay đổi sẽ không có hiệu lực. Xem ví dụ sau:

class Person {
    constructor(name) {
        this._name = name;
    }
    get name() {
        return this._name;
    }
}

let person = new Person("Jane Doe");
console.log(person.name);

// cố gắng đổi tên nhưng không được
person.name = 'Jane Smith';
console.log(person.name); // Jane Doe

Trong ví dụ này, lớp Person có getter name nhưng không có setter name. Nó cố gắng gọi setter. Tuy nhiên, thay đổi không có hiệu lực do lớp Person không có setter.

Sử dụng getter trong một đối tượng theo nghĩa đen

Ví dụ sau định nghĩa một getter latest để trả về người tham dự mới nhất của đối tượng meeting:

let meeting = {
    attendees: [],
    add(attendee) {
        console.log(`${attendee} joined the meeting.`);
        this.attendees.push(attendee);
        return this;
    },
    get latest() {
        let count = this.attendees.length;
        return count == 0 ? undefined : this.attendees[count - 1];
    }
};

meeting.add('John').add('Jane').add('Peter');
console.log(`The latest attendee is ${meeting.latest}.`);

Output:

John joined a meeting.
Jane joined a meeting.
Peter joined a meeting.
The latest attendee is Peter.

Tóm tắt

• Sử dụng từ khóa get và set để xác định các getters và setters JavaScript cho một lớp hoặc một đối tượng.
• Từ khóa get liên kết một thuộc tính đối tượng với một phương thức sẽ được gọi khi thuộc tính đó được lấy ra.
• Từ khóa set liên kết một thuộc tính đối tượng với một phương thức sẽ được gọi khi thuộc tính đó được gán giá trị.