Các đối tượng proxy hoạt động như thế nào trong JavaScript?

Một đối tượng proxy JavaScript cho phép bạn chặn và tùy chỉnh hành vi của một đối tượng khác mà không sửa đổi đối tượng gốc.

Sử dụng các đối tượng proxy, bạn có thể xác thực dữ liệu, cung cấp chức năng bổ sung và kiểm soát quyền truy cập vào các thuộc tính và chức năng.

Tìm hiểu tất cả về cách sử dụng các đối tượng proxy và cách bạn có thể tạo chúng trong JavaScript.

Tạo một đối tượng proxy

Trong JavaScript, bạn có thể tạo các đối tượng proxy bằng cách sử dụng Ủy quyền người xây dựng. Hàm tạo này nhận hai đối số: a Mục tiêu đối tượng để bọc proxy xung quanh và một xử lý đối tượng có các thuộc tính xác định hành vi của proxy khi bạn thực hiện các thao tác.

Nó lấy các đối số này và tạo một đối tượng mà bạn có thể sử dụng thay cho đối tượng đích. Đối tượng được tạo này có thể xác định lại các hoạt động cốt lõi như nhận, thiết lập và xác định các thuộc tính. Bạn cũng có thể sử dụng các đối tượng proxy này để ghi nhật ký truy cập thuộc tính và xác thực, định dạng hoặc làm sạch đầu vào.

Ví dụ:

 const originalObject = {
  foo: "bar"
}
const handler = {
  get: function(target, property) {
    return target[property];
  },
  set: function(target, property, value) {
    target[property] = value;
  }
};
const proxy = new Proxy(originalObject, handler)
 

Mã này tạo một đối tượng mục tiêu, đối tượng ban đầuvới một tài sản duy nhất, foovà một đối tượng xử lý, xử lý. Đối tượng xử lý chứa hai thuộc tính, được và bộ. Những thuộc tính này được gọi là bẫy.

Bẫy đối tượng proxy là một chức năng được gọi bất cứ khi nào bạn thực hiện một hành động cụ thể trên một đối tượng proxy. Bẫy cho phép bạn chặn và tùy chỉnh hành vi của đối tượng proxy. Truy cập một thuộc tính từ đối tượng proxy gọi được bẫy và sửa đổi hoặc thao tác một thuộc tính từ đối tượng proxy sẽ gọi bộ bẩy.

Cuối cùng, mã tạo một đối tượng proxy với Ủy quyền người xây dựng. Nó đi đối tượng ban đầu và xử lý làm đối tượng đích và trình xử lý tương ứng.

Sử dụng đối tượng proxy

Các đối tượng proxy có một số cách sử dụng trong JavaScript, một số cách sử dụng như sau.

Thêm chức năng vào một đối tượng

Bạn có thể sử dụng một đối tượng proxy để bọc một đối tượng hiện có và thêm chức năng mới, chẳng hạn như ghi nhật ký hoặc xử lý lỗi mà không sửa đổi đối tượng ban đầu.

Để thêm chức năng mới, bạn sẽ cần sử dụng Ủy quyền hàm tạo và xác định một hoặc nhiều bẫy cho các hành động bạn muốn chặn.

Ví dụ:

 const userObject = {
  firstName: "Kennedy",
  lastName: "Martins",
  age: 20,
};
const handler = {
  get: function (target, property) {
    console.log(`Getting property "${property}"`);
    return target[property];
  },
  set: function (target, property, value) {
    console.log(`Setting property "${property}" to value "${value}"`);
    target[property] = value;
  },
};
const proxy = new Proxy(userObject, handler);
console.log(proxy.firstName); 
console.log(proxy.lastName); 
proxy.age = 23; // Setting property "age" to value "23"
 

Khối mã này thêm chức năng thông qua các bẫy proxy, được và bộ. Bây giờ, khi bạn cố gắng truy cập hoặc sửa đổi một thuộc tính của đối tượng người dùngtrước tiên, đối tượng proxy sẽ ghi hoạt động của bạn vào bảng điều khiển trước khi truy cập hoặc sửa đổi thuộc tính.

Xác thực dữ liệu trước khi đặt nó trên một đối tượng

Bạn có thể sử dụng các đối tượng proxy để xác thực dữ liệu và đảm bảo dữ liệu đáp ứng các tiêu chí nhất định trước khi đặt nó trên một đối tượng. Bạn có thể làm như vậy bằng cách xác định logic xác thực trong một bộ cái bẫy trong xử lý vật.

Ví dụ:

 const userObject = {
  firstName: "Kennedy",
  lastName: "Martins",
  age: 20,
};
const handler = {
  get: function (target, property) {
    console.log(`Getting property "${property}"`);
    return target[property];
  },
  set: function (target, property, value) {
    if (
      property === "age" &&
      typeof value == "number" &&
      value > 0 &&
      value < 120
    ) {
      console.log(`Setting property "${property}" to value "${value}"`);
      target[property] = value;
    } else {
      throw new Error("Invalid parameter. Please review and correct.");
    }
  },
};
const proxy = new Proxy(userObject, handler);
proxy.age = 21;
 

Khối mã này thêm các quy tắc xác thực vào bộ bẩy. Bạn có thể gán bất kỳ giá trị nào cho lứa tuổi tài sản trên một đối tượng người dùng ví dụ. Tuy nhiên, với các quy tắc xác thực đã thêm, bạn chỉ có thể gán một giá trị mới cho thuộc tính tuổi nếu đó là một số, lớn hơn 0 và nhỏ hơn 120. Bất kỳ giá trị nào bạn cố gắng đặt trên thuộc tính lứa tuổi thuộc tính không đáp ứng tiêu chí bắt buộc sẽ gây ra lỗi và in thông báo lỗi.

Kiểm soát quyền truy cập vào thuộc tính đối tượng

Bạn có thể sử dụng các đối tượng proxy để ẩn các thuộc tính nhất định của một đối tượng. Làm như vậy bằng cách xác định logic hạn chế trong được bẫy cho các thuộc tính mà bạn muốn kiểm soát quyền truy cập.

Ví dụ:

 const userObject = {
  firstName: "Kennedy",
  lastName: "Martins",
  age: 20,
  phone: 1234567890,
  email: "foo@bar.com",
};
const handler = {
  get: function (target, property) {
    if (property === "phone" || property === "email") {
      throw new Error("Access to info denied");
    } else {
      console.log(`Getting property "${property}"`);
      return target[property];
    }
  },
  set: function (target, property, value) {
    console.log(`Setting property "${property}" to value "${value}"`);
    target[property] = value;
  },
};
const proxy = new Proxy(userObject, handler);
console.log(proxy.firstName); 
console.log(proxy.email); 
 

Khối mã ở trên thêm các hạn chế nhất định vào được bẩy. Ban đầu, bạn có thể truy cập tất cả các thuộc tính có sẵn trên đối tượng người dùng. Các quy tắc được thêm vào ngăn truy cập vào thông tin nhạy cảm như email hoặc điện thoại của người dùng. Việc cố gắng truy cập một trong hai thuộc tính này sẽ gây ra lỗi.

Bẫy proxy khác

Các được và bộ bẫy là phổ biến và hữu ích nhất, nhưng có 11 bẫy proxy JavaScript khác. Họ đang:

• áp dụng: Các áp dụng bẫy chạy khi bạn gọi một chức năng trên đối tượng proxy.
• xây dựng: Các xây dựng bẫy chạy khi bạn sử dụng toán tử mới để tạo một đối tượng từ đối tượng proxy.
• xóa tài sản: Các xóa tài sản bẫy chạy khi bạn sử dụng xóa bỏ toán tử để xóa một thuộc tính khỏi đối tượng proxy.
• có – Các có bẫy chạy khi bạn sử dụng Trong toán tử để kiểm tra xem một thuộc tính có tồn tại trên đối tượng proxy hay không.
• chìa khóa riêng – Các chìa khóa riêng bẫy chạy khi bạn gọi một trong hai Object.getOwnPropertyNames hoặc Object.getOwnPropertySymbols chức năng trên đối tượng proxy.
• getOwnPropertyDescriptor – Các getOwnPropertyDescriptor bẫy chạy khi bạn gọi Object.getOwnPropertyDescriptor chức năng trên đối tượng proxy.
• xác định tài sản – Các xác định tài sản bẫy chạy khi bạn gọi Object.defineProperty chức năng trên đối tượng proxy.
• ngăn chặnTiện ích mở rộng – Các ngăn chặnTiện ích mở rộng bẫy chạy khi bạn gọi Object.preventExtensions chức năng trên đối tượng proxy.
• có thể mở rộng – Các có thể mở rộng bẫy chạy khi bạn gọi Object.isExtensible chức năng trên đối tượng proxy.
• getPrototypeOf – Các getPrototypeOf bẫy chạy khi bạn gọi Object.getPrototypeOf chức năng trên đối tượng proxy.
• setPrototypeOf – Các setPrototypeOf bẫy chạy khi bạn gọi Object.setPrototypeOf chức năng trên đối tượng proxy.

giống như bộ và được bẫy, bạn có thể sử dụng các bẫy này để thêm các lớp chức năng, xác thực và kiểm soát mới vào đối tượng của mình mà không sửa đổi bản gốc.

Nhược điểm của các đối tượng proxy

Các đối tượng proxy có thể là một công cụ mạnh mẽ để thêm chức năng tùy chỉnh hoặc xác thực cho một đối tượng. Nhưng họ cũng có một số nhược điểm tiềm năng. Một nhược điểm như vậy là khó gỡ lỗi, vì khó có thể thấy điều gì đang xảy ra đằng sau hậu trường.

Các đối tượng proxy cũng có thể khó sử dụng, đặc biệt nếu bạn không quen với chúng. Bạn nên xem xét cẩn thận những nhược điểm này trước khi sử dụng các đối tượng proxy trong mã của mình.