Đối tượng proxy JavaScript

Khi làm việc với các đối tượng, chúng ta có thể tạođối tượng proxychặn và thay đổi hành vi của một đối tượng hiện có.

Chúng tôi làm như vậy bằng cách sử dụngỦy quyềnđối tượng gốc, được giới thiệu trong ES2015.

Giả sử chúng ta có mộtcarvật:

const car = {
  color: 'blue'
}

Một ví dụ rất đơn giản mà chúng tôi có thể thực hiện là trả về một chuỗi 'Không tìm thấy' khi chúng tôi cố gắng truy cập một thuộc tính không tồn tại.

Bạn có thể xác định một proxy được gọi bất cứ khi nào bạn cố gắng truy cập một thuộc tính của đối tượng này.

Bạn làm như vậy bằng cách tạo một đối tượng khác cóget()phương thức nhận đối tượng đích và thuộc tính dưới dạng các tham số:

const car = {
  color: 'blue'
}

const handler = { get(target, property) { return target[property] ?? ‘Not found’ } }

Bây giờ chúng ta có thể khởi tạo đối tượng proxy của mình bằng cách gọinew Proxy(), chuyển đối tượng ban đầu và trình xử lý của chúng tôi:

const proxyObject = new Proxy(car, handler)

Bây giờ hãy thử truy cập một thuộc tính có trongcarđối tượng, nhưng tham chiếu nó từproxyObject:

proxyObject.color //'blue'

Điều này giống như cách gọicar.color.

Nhưng khi bạn cố gắng truy cập một thuộc tính không tồn tại trêncar, giốngcar.test, bạn sẽ trở lạiundefined. Sử dụng proxy, bạn sẽ lấy lại'Not found'chuỗi, vì đó là những gì chúng tôi đã yêu cầu nó làm.

proxyObject.test //'Not found'

Chúng tôi không giới hạn ởget()trong một trình xử lý proxy. Đó chỉ là ví dụ đơn giản nhất mà chúng tôi có thể viết.

Chúng tôi có các phương pháp khác mà chúng tôi có thể sử dụng:

  • applyđược gọi khi chúng tôi sử dụngapply()trên đối tượng
  • constructđược gọi khi chúng ta truy cập hàm tạo đối tượng
  • deletePropertyđược thực thi khi chúng tôi cố gắng xóa một thuộc tính
  • definePropertyđược gọi khi chúng ta xác định một thuộc tính mới trên đối tượng
  • setđược thực thi khi chúng tôi cố gắng thiết lập một thuộc tính

và như thế. Về cơ bản, chúng ta có thể tạo một cổng được bảo vệ để kiểm soát mọi thứ xảy ra trên một đối tượng, đồng thời cung cấp các quy tắc và điều khiển bổ sung để thực hiện logic của riêng chúng ta.

Các phương pháp khác (còn được gọi làbẫy) chúng ta có thể sử dụng là:

  • enumerate
  • getOwnPropertyDescriptor
  • getPrototypeOf
  • has
  • isExtensible
  • ownKeys
  • preventExtensions
  • setPrototypeOf

tất cả tương ứng với chức năng tương ứng.

Bạn có thểđọc thêm về từng người trong số đó trên MDN.

Hãy làm một ví dụ khác bằng cách sử dụngdeleteProperty. Chúng tôi muốn ngăn việc xóa các thuộc tính của một đối tượng:

const car = {
  color: 'blue'
}

const handler = { deleteProperty(target, property) { return false } }

const proxyObject = new Proxy(car, handler)

Nếu chúng tôi gọidelete proxyObject.color, chúng tôi sẽ nhận được TypeError:

TypeError: 'deleteProperty' on proxy: trap returned falsish for property 'color'

Of course one could always delete the property directly on the car object, but if you write your logic so that that object is inaccessible and you only expose the proxy, that is a way to encapsulate your logic.


More js tutorials: