Trong một lớp JavaScript, getters và setters được sử dụng để lấy hoặc đặt các giá trị thuộc tính. “get” là từ khóa được sử dụng để xác định phương thức getter để truy xuất giá trị thuộc tính, trong khi “set” xác định phương thức setter để thay đổi giá trị của một thuộc tính cụ thể. Khi chúng tôi muốn truy cập một thuộc tính của đối tượng JavaScript, giá trị được trả về bởi phương thức getter được sử dụng và để đặt giá trị thuộc tính, phương thức setter được gọi và sau đó chúng tôi chuyển giá trị dưới dạng đối số mà chúng tôi muốn đặt
Bài viết này sẽ thảo luận về getters và setters trong JavaScript. Ngoài ra, chúng tôi cũng sẽ trình bày các ví dụ liên quan đến việc sử dụng định nghĩa getter và setter trong lớp JavaScript. Vì vậy, hãy bắt đầu
Getters và Setters trong lớp JavaScript
Trong ví dụ dưới đây, chúng ta sẽ tạo một lớp “Employee” có một hàm tạo. Hàm tạo của lớp “Nhân viên” sẽ khởi tạo “tên” Nhân viên thành chuỗi được truyền dưới dạng đối số
classEmployee {
hàm tạo ( tên ) {
this.tên = tên ;
< }
}
Bây giờ, chúng ta sẽ tạo một đối tượng lớp Nhân viên có tên là “employee” và thêm “Jack” làm tên của nó
cho phép nhân viên = mới nhân viên ("Jack");
Sau khi làm như vậy, chúng ta có thể truy cập thuộc tính “tên” của đối tượng “nhân viên” theo cách sau
bảng điều khiển. log( nhân viên. tên);
Đầu ra của chương trình đã cho ở trên được hiển thị bên dưới
Đôi khi, bạn có thể không muốn truy cập trực tiếp vào một thuộc tính. Đó là nơi cặp getter và setter phát huy tác dụng
ví dụ 1. Getters và Setters trong lớp JavaScript
Để minh họa cách sử dụng getter và setter, trước tiên, chúng ta sẽ tạo một lớp “Employee” có thuộc tính “name”
classEmployee {
hàm tạo ( tên ) {
this.setName( tên );
}
}
Trong bước tiếp theo, chúng ta sẽ định nghĩa một phương thức “getName()” sẽ trả về giá trị của thuộc tính “tên” Nhân viên
getName () {
returnthis. tên;
}
Một phương thức khác mà chúng ta sẽ thêm vào là “setName()”. Phương thức setName() của class Employee của chúng ta có tham số “newName”. Phương pháp này sẽ xóa mọi khoảng trắng khỏi giá trị của “newName” và nó cũng sẽ đưa ra một ngoại lệ nếu bạn chưa nhập bất kỳ tên nào
setName ( newName ) {
newName = newName.cắt();
< . if (newName === '') {
throw'Enter an Employee name';
}
this.tên = tên mới ;
< }
Vì chúng ta đã gọi phương thức “setName()” trong hàm tạo, nên bất cứ khi nào chúng ta tạo đối tượng “Employee”, “tên” được truyền làm đối số sẽ được phương thức setName() lấy. Sau đó, hàm tạo sẽ chuyển luồng điều khiển sang phương thức setName() và nó sẽ đặt các giá trị được truyền vào một đối số là tên đối tượng “Nhân viên”
cho phép nhân viên = mới nhân viên ('Jack Smith');
console.log( nhân viên );
Bạn cũng có thể gọi các phương thức “setName()” và “getName()” đã tạo theo cách sau
nhân viên. setName('William Smith');
console.log( nhân viên. getName());
Các dòng mã đã cho ở trên sẽ đặt “William Smith” làm tên của đối tượng “nhân viên”. Sau đó, phương thức “getName()” sẽ cho bạn biết về giá trị thuộc tính tên nhân viên
Trong ví dụ được cung cấp, phương thức setName() và getName() đang hoạt động như getter và setter
ví dụ 2. Getters và Setters trong lớp JavaScript
Để xác định getters và setters trong lớp JavaScript, ES6 cũng cung cấp một cú pháp cụ thể. Để chỉ cho bạn cách sử dụng nó, chúng tôi sẽ chuyển sang lớp Nhân viên của chúng tôi
classEmployee {
hàm tạo ( tên ) {
this.tên = tên ;
}
}
Sau đó, chúng tôi sẽ xác định phương thức getter bằng cách sử dụng từ khóa “get” theo sau là tên phương thức. Một điều nữa mà chúng tôi muốn đề cập ở đây là thuộc tính “name” của lớp “Employee” của chúng ta sẽ được thay đổi thành “_name” để tránh xung đột với getter và setter
getname () {
returnthis. _tên ;
}
Để xác định phương thức setter, bạn phải thêm từ khóa “setter” trước khi chỉ định tên phương thức
đặt tên ( tên mới ) {
newName = newName.cắt();
< . tên if (newName === '') {
throw' Kindly enter an Employee name';
}
this._name = Tên mới ;
}
Khi bạn gán bất kỳ giá trị nào cho thuộc tính “name” của đối tượng lớp “Employee”, JavaScript sẽ gọi phương thức setter “name()”
nhân viên. tên = 'Paul Max';
Tiếp theo, chúng ta sẽ gọi phương thức out getter bằng cú pháp dưới đây
let empName = nhân viên. tên;
Bây giờ, khi trình thông dịch JavaScript sẽ thực thi các dòng đã cho ở trên, nó sẽ kiểm tra xem có tồn tại bất kỳ thuộc tính “tên” nào trong lớp “Nhân viên” không. Nó sẽ tiếp tục tìm kiếm bất kỳ phương thức nào liên kết thuộc tính “tên” nếu không tìm thấy. Trong trường hợp của chúng ta, trình thông dịch sẽ truy cập phương thức getter và sau khi thực thi nó, nó sẽ trả về giá trị của thuộc tính “name”
Trong trường hợp, nếu bạn chưa định nghĩa một phương thức setter trong lớp JavaScript của mình, thì bạn sẽ nhận được TypeError cho biết rằng bạn không thể đặt thuộc tính “tên” của đối tượng “Nhân viên”, vì lớp “Nhân viên” chỉ có một
class Nhân viên {
constructor (name) {
this.tên = tên ;
< . _name }
get name() {
returnthis._name;
}
//không có phương thức thiết lập
}
let employee = new Employee("Stephen Edward");
console.log( nhân viên. tên);
Ở đây, chúng tôi sẽ cố gắng thay đổi tên của đối tượng “nhân viên”;
nhân viên. tên = 'Paul Smith';
console.log( nhân viên. tên);
Như bạn có thể thấy, chúng tôi đã gặp phải lỗi loại khi cố gắng đặt giá trị thuộc tính tên
Phần kết luận
Sử dụng từ khóa get và set, bạn có thể dễ dàng xác định phương thức getter và setter trong lớp JavaScript. Phương thức getter trả về giá trị thuộc tính, trong khi đó, trong phương thức setter, một đối số được truyền cho phương thức setter, phương thức này gán giá trị cụ thể đó cho thuộc tính của đối tượng lớp JavaScript. Bài viết này đã thảo luận về getters và setters trong JavaScript. Ngoài ra, chúng tôi cũng trình bày các ví dụ liên quan đến định nghĩa và cách sử dụng getter và setter trong lớp JavaScript