JavaScript Getter và Setter

Trong hướng dẫn này, bạn sẽ tìm hiểu về các phương thức getter và setter của JavaScript với sự trợ giúp của các ví dụ.

Trong JavaScript, có hai loại thuộc tính đối tượng:

• Data properties
• Accessor properties

Thuộc tính dữ liệu

Đây là một ví dụ về thuộc tính dữ liệu mà chúng tôi đã sử dụng trong các hướng dẫn trước.

const student = {

    // data property
    firstName: 'Monica';
};

Thuộc tính người truy cập

Trong JavaScript, thuộc tính trình truy cập là các phương thức lấy hoặc đặt giá trị của một đối tượng. Để làm được điều đó, chúng tôi sử dụng hai từ khóa sau:

• get – to define a getter method to get the property value
• set – to define a setter method to set the property value

JavaScript 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ụ,

const student = {

    // data property
    firstName: 'Monica',
    
    // accessor property(getter)
    get getName() {
        return this.firstName;
    }
};

// accessing data property
console.log(student.firstName); // Monica

// accessing getter methods
console.log(student.getName); // Monica

// trying to access as a method
console.log(student.getName()); // error

Trong chương trình trên, một phương thức getter getName()được tạo để truy cập thuộc tính của một đối tượng.

get getName() {
    return this.firstName;
}

Lưu ý: Để tạo phương thức getter, gettừ khóa được sử dụng.

Và cũng như khi truy cập giá trị, chúng ta truy cập giá trị như một thuộc tính.

student.getName;

Khi bạn cố gắng truy cập giá trị dưới dạng một phương thức, một lỗi sẽ xảy ra.

console.log(student.getName()); // error

JavaScript Setter

Trong JavaScript, các phương thức setter được sử dụng để thay đổi các giá trị của một đối tượng. Ví dụ,

const student = {
    firstName: 'Monica',
    
    //accessor property(setter)
    set changeName(newName) {
        this.firstName = newName;
    }
};

console.log(student.firstName); // Monica

// change(set) object property using a setter
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

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.

set changeName(newName) {
    this.firstName = newName;
}

Lưu ý: Để tạo phương thức setter, settừ khóa được sử dụng.

Như được hiển thị trong chương trình trên, giá trị của firstNamelà Monica.

Sau đó, giá trị được thay đổi thành Sarah.

student.chageName = 'Sarah';

Lưu ý : Setter phải có chính xác một tham số chính thức.

JavaScript Object.defineProperty ()

Trong JavaScript, bạn cũng có thể sử dụng Object.defineProperty()method để thêm getters và setters. Ví dụ,

const student = {
    firstName: 'Monica'
}

// getting property
Object.defineProperty(student, "getName", {
    get : function () {
        return this.firstName;
    }
});

// setting property
Object.defineProperty(student, "changeName", {
    set : function (value) {
        this.firstName = value;
    }
});

console.log(student.firstName); // Monica

// changing the property value
student.changeName = 'Sarah';

console.log(student.firstName); // Sarah

Trong ví dụ trên, 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()là:

Object.defineProperty(obj, prop, decfscriptor)

Các Object.defineProperty()phương pháp có ba đối số.

• The first argument is the objectName.
• The second argument is the name of the property.
• The third argument is an object that describes the property.