1. Getter và Setter trong JavaScript là gì?

Ngoài thuộc tính và phương thức thông thường, object còn có Getter và Setter . Getter và Setter trong Js thực chất là các phương thức. Tuy nhiên, cách sử dụng của chúng lại giống như thuộc tính.

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

• Thuộc tính dữ liệu
• Thuộc tính truy cập

Trong Js, thuộc tính truy cập là các phương thức lấy hoặc đặt giá trị cho các thành phần của một đối tượng. Vì vậy, chúng ta sẽ sử dụng hai từ khóa sau:

• get để định nghĩa một phương thức Getter để lấy giá trị của thuộc tính.
• set để định nghĩa một phương thức Setter để đặt giá trị cho thuộc tính.

Getters và setters tồn tại trong hầu hết các ngôn ngữ lập trình hướng đối tượng, bao gồm cả Js. Chúng giúp ta truy cập vào các thuộc tính của các objects một cách an toàn. Với Getters , bạn có thể truy cập (‘get’) các giá trị của các thuộc tính từ mã bên ngoài, trong khi Setters cho phép bạn thay đổi (‘set’) giá trị của chúng.

2. Phương thức Getter trong JavaScript

Trong Js, 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. Để tạo phương thức Getter , ta sẽ sử dụng từ khóa get . Khi truy cập giá trị, chúng ta truy cập hàm này giống như một thuộc tính ( sinh_vien.getTen ) . Nếu ta cố gắng truy cập dưới dạng một phương thức ( sinh_vien.getTen() ), một lỗi sẽ xảy ra.

Ví dụ: sử dụng một thuộc tính lang cho get giá trị của thuộc tính language

<script>
// Tạo một đối tượng:
const person = {
  firstName: "Thành",
  lastName: "Nguyễn",
  language: "vn",
  get lang() {
    return this.language;
  }
};

// Hiển thị dữ liệu từ đối tượng bằng getter:
document.write(person.lang);
</script>

3. Phương thức Setter trong JavaScript

Trong Js, các phương thức Setter được sử dụng để thay đổi các giá trị thuộc tính của một đối tượng. Để tạo phương thức Setter , ta sẽ sử dụng từ khóa set . Phương thức Setter sẽ phải có chính xác một tham số nhất định.

Ví dụ: sử dụng một thuộc tính lang cho set giá trị của thuộc tính language

<script>
// Tạo một đối tượng:
const person = {
  firstName: "Thành",
  lastName: "Nguyễn",
  language: "NO",
  set lang(value) {
    this.language = value;
  }
};

// Đặt thuộc tính bằng cách sử dụng set:
person.lang = "en";

// Hiển thị dữ liệu từ đối tượng:
document.write(person.language);
</script>

4. Phương thức Object.defineProperty() trong JavaScript

Trong Js, ta cũng có thể sử dụng phương thức Object.defineProperty() để thêm các phương thức Getters và Setters . Nó cũng được sử dụng để truy cập và thay đổi thuộc tính của một đối tượng.

Cú pháp: Object.defineProperty(đối tượng, tên thuộc tính, mô tả)

Ví dụ:

<script>
const sinh_vien = {
    ten: 'Nam'
}
Object.defineProperty(sinh_vien, "getTen", {
    get : function () {
        return this.ten;
    }
});
Object.defineProperty(sinh_vien, "change", {
    set : function (ten) {
        this.ten = ten;
    }
});
console.log(sinh_vien.getTen);
sinh_vien.change = 'Thành';
document.write(sinh_vien.getTen);
</script>

5. Bảo vệ dữ liệu với Getter và Setter trong JavaScript

JavaScript có thể đảm bảo chất lượng dữ liệu tốt hơn khi sử dụng Getters và Setters. Getter và Setter luôn được đề cập đến cùng với việc đóng gói. Chúng ta có thể hiêu việc đóng gói theo 2 cách :

• Thiết lập bộ 3 data – getter – setter để truy cập và sửa đổi dữ liệu. Định nghĩa này rất hữu ích khi một số hành động kiểu như là validation – phải được thực hiện trên dữ liệu trước khi lưu hoặc là xem nó. Getter và setter cung cấp điều này.
• Có một định nghĩa chặt chẽ hơn (theo mình thì nó cũng dễ hiểu và quen thuộc hơn với mọi người), theo đó thì đóng gói được thực hiện để ẩn dữ liệu, làm cho thành phần được đóng gói sẽ không thể bị truy cập, ngoại trừ việc thông qua các getter và setter.

Ví dụ: sử dụng thuộc tính lang để trả về giá trị của thuộc tính language ở dạng chữ viết hoa:

<script>
// Tạo một đối tượng:
const person = {
  firstName: "Thành",
  lastName: "Nguyễn",
  language: "vn",
  get lang() {
    return this.language.toUpperCase();
  }
};
// Hiển thị dữ liệu từ đối tượng bằng getter:
document.write(person.lang);
</script>

Ví dụ: việc sử dụng thuộc tính lang lưu trữ giá trị chữ hoa trong thuộc tính language :

<script>
// Tạo một đối tượng:
const person = {
  firstName: "Thành",
  lastName: "Nguyễn",
  language: "",
  set lang(lang) {
    this.language = lang.toUpperCase();
  }
};

// Đặt thuộc tính bằng cách sử dụng set:
person.lang = "vn";

// Hiển thị dữ liệu từ đối tượng bằng getter:
document.getElementById("demo").innerHTML = person.language;
</script>

Lưu ý

Việc chúng ta khai báo các Getter và Setter không đồng nghĩa là dữ liệu chỉ có thể truy cập và thay đổi thông qua các phương thức đó.

6. Ứng dụng của getter và setter

Getters và Setters có thể được sử dụng như các hàm bao trên các giá trị thuộc tính thực để có thêm quyền kiểm soát các hoạt động với chúng. Chẳng hạn, nếu chúng ta muốn cấm các tên quá ngắn cho tên user , chúng ta có thể có một setter name và giữ giá trị trong một thuộc tính riêng biệt user._name

<script>
let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      alert("Tên quá ngắn, cần ít nhất 4 ký tự");
      return;
    }
    this._name = value;
  }
};

user.name = "tên";
alert(user.name); // tên

user.name = ""; // Tên quá ngắn ...
</script>

Cùng với đó lợi ích lớn nhất của việc dùng Getter và Setter trong Js là cách sử dụng giống như thuộc tính thông thường. Nghĩa là bạn có thể biến thuộc tính thông thường thành Getter hay Setter bất kỳ lúc nào.