Nội dung bài viết

Video học lập trình mỗi ngày

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ả JavaScript. Chúng là code constructs giúp các developer 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.

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam

Trong bài viết này chúng ta đi sâu hơn về get và set là loại Accessor property.

Trong javascript có hai loại property đó là:

Data Property
Accessor property

Với Accessor property là implicitly và chúng cũng có hai loại There are 2 kinds of Accesor Property:

getter property
setter property

Create getters and setters

1. With methods

Ví dụ dưới đây được tạo getters và setters một cách cơ bản mà trước giờ hầu như devjs nào cũng sử dụng qua.

var obj = {
  foo:    'this is the value of foo',
  getFoo: function() {
            return this.foo;
        },
  setFoo: function(val) {
            this.foo = val;
        }
}
 
console.log(obj.getFoo());
// "this is the value of foo"
 
obj.setFoo('hello');
 
console.log(obj.getFoo());
// "hello"

Đây là cách cơ bản để tạo một setters và getters. Ở property foo thì có hai method đó là getFoo và setFoo, lần lượt đọc và set lại giá trị cho foo.

2. With keywords (Accessor property)

Một cách hay hơn nữa đó chính là sử dụng keywords get và set. Để tạo một getter như cách truyền thống thì chúng ta chỉ khai báo keyword get và set trước function. Ví dụ:

var obj = {
  fooVal: 'this is the value of foo',
  get foo() {
      return this.fooVal;
  },
  set foo(val) {
      this.fooVal = val;
  }
}
 
console.log(obj.foo);
// "this is the value of foo"
 
obj.foo = 'hello';
 
console.log(obj.foo);
// "hello"

Chọn cách nào tốt nhất Chúng tôi đã đưa ra hai phương pháp để tạo getters và setters, vậy có bạn nào co đặt câu hỏi như vậy không? Phương pháp nào tốt hơn và khi nào nên sử dụng loại 2. Nếu bạn chọn tạo getters và setters bằng keywords, bạn có thể sử dụng toán tử to set the data và toán tử dấu chấm (.) to get the data, giống như cách bạn truy cập / đặt giá trị của thuộc tính thông thường.

Tuy nhiên nếu bạn chọn cách đầu tiên của getters và setters, bạn phải gọi các method setter và getter bằng cú pháp function call vì chúng là các hàm điển hình (không có gì đặc biệt như các hàm được tạo bằng cách sử dụng từ khóa get và set). Ngoài ra có nhiều trường hợp trong cách đầu tiên bạn đã vô tình gán các giá trị các cho các đối tượng mà bạn đã đặt ra hay còn gọi là Overwrite.

Chính vì lẽ đó, bạn có thể thấy lý do tại sao tôi nói kỹ thuật thứ hai mạnh mẽ hơn nhiều. Những điểm mạnh của việc dùng get và set keywords.

# Check data trước khi set

var obj = {
  n: 67,
  get id() {
      return 'The ID is: ' + this.n;
  },
  set id(val) {
      if (typeof val === 'number')
          this.n = val;
  }
}
 
console.log(obj.id);
// "The ID is: 67"
 
obj.id = 893;
 
console.log(obj.id);
// "The ID is: 893"
 
obj.id = 'hello';
 
console.log(obj.id);
// "The ID is: 893"

# Protected data

/* BLOCK SCOPE, leave the braces alone! */
{
let fooVal = 'this is the value of foo';
var obj = {
    get foo() {
        return fooVal;
    },
    set foo(val) {
        fooVal = val
    }
  }
}
 
fooVal = 'hello';
// not going to affect the fooVal inside the block
 
console.log(obj.foo);
// "this is the value of foo"

Khi nào bạn nên sử dụng get và set?

Bây giờ đến câu hỏi lớn: Bạn có bắt đầu gán getters và setters cho tất cả dữ liệu của bạn bây giờ không?

Đương nhiên là có, bởi vì nếu trong function của bạn muốn hiding data thì không còn cách nào khác là sử dụng chúng. Nhưng nếu dữ liệu của bạn được sắp xếp hoặc tổ chức tốt, bạn vẫn cần sử dụng setters getters chỉ để gói nó với mã thực hiện một số hoạt động trên nó.

4 - Kết Luận

Tham gia cùng chúng tôi:

Facebook: Cộng đồng lập trình javascript

Facebook Thảo luận về Javascript, ReactJS, VueJS, AngularJS Việt Nam

Một mô hình đối tượng phổ biến là bao gồm phương thức getter và setter làm thuộc tính. Các phương thức Getter và Setter nhận và thiết lập các thuộc tính của một đối tượng.

Lợi thế khi sử dụng set và get keyword

Bạn có thể kiểm tra xem dữ liệu mới có hợp lệ không trước khi đặt thuộc tính
Bạn có thể thực hiện một hành động trên dữ liệu mà bạn đang nhận hoặc đặt trên một thuộc tính.
Bạn có thể kiểm soát các thuộc tính có thể được lưu trữ và lấy.

Bài viết có sự dụng nguồn :

https://dev.to/ogwurujohnson/getters-and-setters-used-in-javascript-objectshow-4jef

https://www.hongkiat.com/blog/getters-setters-javascript/

http://xahlee.info/js/js_getter_and_setter_properties.html

Nói về GETTERS và SETTERS trong JAVASCRIPT