JavaScript Getter và Setter (có Ví dụ)

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:

• Thuộc tính dữ liệu
• Thuộc tính của người truy cập

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 - để xác định một phương thức getter để lấy giá trị thuộc tính
• set - để xác định một phương thức setter để đặt giá trị thuộc tính

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()phương thức để 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, descriptor)

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

• Đối số đầu tiên là objectName.
• Đố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ả thuộc tính.