Hướng dẫn proxy javascript info - thông tin javascript proxy
Giới thiệu:Hôm nay, mình tìm hiểu lại kiến thức căn bản của es6 .Chắc mọi người đều sử dụng các tính năng của es6 như let hay const, đây là những tính năng mới mà es6 hỗ trợ rất tốt và được nhiều anh em tin tưởng sử dụng. Nhưng trong số các tính năng es6 support mới ra, mọi người chắc sẽ để ý tới proxy. Nó rất hay, nhưng ít người để ý. vậy mình hôm nay cùng tìm hiểu nào/ .Chắc mọi người đều sử dụng các tính năng của es6 như let hay const, đây là những tính năng mới mà es6 hỗ trợ rất tốt và được nhiều anh em tin tưởng sử dụng. Nhưng trong số các tính năng es6 support mới ra, mọi người chắc sẽ để ý tới proxy. Nó rất hay, nhưng ít người để ý. vậy mình hôm nay cùng tìm hiểu nào/Proxy Cú pháp:
Trong đó:
Một số trap của proxy:1> Set:Ví dụ ta có 1 3 là 4 chứa tên của học sinh và tuổi của học sinh.
Giờ ta muốn khi set thuộc tính cho nó, chỉ được thêm/sửa thuộc tính age, education. Các thuộc tính khác kể cả thuộc tính name(đã có) không cho sửa. Ta sẽ tạo 1 proxy với trap là set để wrap lại student --> tương tác với proxy này.
Giờ ta thêm mới các key cho proxy
2> Get:Cũng ví dụ về student đó, khi lấy thuộc tính của 4 ta không cho lấy thuộc tính 6(coi như nó 7)
Khi ta lấy các thuộc tính của student
3> deleteProperty:Vẫn là ví dụ về student, giờ ta muốn 1 trap có thể ngăn chặn việc xóa thuộc tính đã có từ student. Ta sẽ dùng trap 8
Giờ ta sẽ thử xóa 1 vài thuộc tính:
4> Apply:Giờ ta sẽ tìm hiểu 1 thuộc tính hay dùng với function. Ví dụ ta có 1 function tính tổng n các phần tử
Giờ ta muốn có 1 function tính tích từ function tính tổing này.
5> has:Khi ta muốn quản lý với fall through của key đó trong đối tượng/mảng Ví dụ ta có object computer: 0Giờ ta muốn khi kiểm tra nó sẽ trả về false với 9 1Kết luận:Proxy rất đa dạng và có thể giải quyết nhiều bài toán khác nhau với các trap được nó support(ở ví dụ của mình chỉ tìm hiểu ở mức độ căn bản). Tuy chúng ta ít sử dụng đến nó, nhưng thực tế các thư viện đang sử dụng nó và đã hoạt động rất tốt. https://javascript.info/proxy https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy https://ponyfoo.com/articles/es6-proxy-traps-in-depth https://medium.com/jsland/cách-sử-dụng-proxy-trong-js-và-dùng-nó-để-tạo-custom-storage-fad53c647155 |