Các proxy JavaScript

Trong hướng dẫn này, bạn sẽ tìm hiểu về proxy JavaScript với sự trợ giúp của các ví dụ.

Trong JavaScript, proxy (đối tượng proxy) được sử dụng để bọc một đối tượng và xác định lại các hoạt động khác nhau vào đối tượng như đọc, chèn, xác thực, v.v. Proxy cho phép bạn thêm hành vi tùy chỉnh vào một đối tượng hoặc một hàm.

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

Cú pháp của proxy là:

new Proxy(target, handler);

Đây,

• new Proxy() – the constructor.
• target – the object/function which you want to proxy
• handler – can redefine the custom behavior of the object

Ví dụ,

let student1 = {
    age: 24,
    name: "Felix"
}

const handler = {
    get: function(obj, prop) {
        return obj[prop] ? obj[prop] : 'property does not exist';
    }
}

const proxy = new Proxy(student1, handler);
console.log(proxy.name); // Felix
console.log(proxy.age); // 24
console.log(proxy.class); // property does not exist

Ở đây, get()phương thức được sử dụng để truy cập giá trị thuộc tính của đối tượng. Và nếu thuộc tính không có sẵn trong đối tượng, nó sẽ trả vềtài sản không tồn tại.

Như bạn thấy, bạn có thể sử dụng proxy để tạo các hoạt động mới cho đối tượng. Một trường hợp có thể phát sinh khi bạn muốn kiểm tra xem một đối tượng có một khóa cụ thể hay không và thực hiện một hành động dựa trên khóa đó. Trong những trường hợp như vậy, proxy có thể được sử dụng.

Bạn cũng có thể vượt qua một trình xử lý trống. Khi một trình xử lý trống được chuyển qua, proxy sẽ hoạt động như một đối tượng gốc. Ví dụ,

let student = {
    name: 'Jack',
    age: 24
}

const handler = { };

// passing empty handler
const proxy1 = new Proxy(student, {});

console.log(proxy1); // Proxy {name: "Jack", age: 24}
console.log(proxy1.name); // Jack

Trình xử lý proxy

Proxy cung cấp hai phương thức xử lý get()và set().

get () handler

Các get()phương pháp được sử dụng để truy cập vào các thuộc tính của một đối tượng mục tiêu. Ví dụ,

let student = {
    name: 'Jack',
    age: 24
}

const handler = {

    // get the object key and value
    get(obj, prop) {

        return obj[prop];
  }
}

const proxy = new Proxy(student, handler);
console.log(proxy.name); // Jack

Ở đây, get()phương thức nhận đối tượng và thuộc tính làm tham số của nó.

set () xử lý

Các set()phương pháp được sử dụng để thiết lập giá trị của một đối tượng. Ví dụ,

let student = {
    name: 'John'
}

let setNewValue = {
  set: function(obj, prop, value) {

    obj[prop] = value;
    return;
  }
};

// setting new proxy
let person = new Proxy(student, setNewValue);

// setting new key/value
person.age = 25;
console.log(person); // Proxy {name: "John", age: 25}

Ở đây, một thuộc tính mới ageđược thêm vào đối tượng sinh viên .

Sử dụng Proxy

1. Để xác thực

Bạn có thể sử dụng proxy để xác nhận. Bạn có thể kiểm tra giá trị của một khóa và thực hiện một hành động dựa trên giá trị đó.

Ví dụ,

let student = {
    name: 'Jack',
    age: 24
}

const handler = {

    // get the object key and value
    get(obj, prop) {

    // check condition
    if (prop == 'name') {
      return obj[prop];
    } else {
      return 'Not allowed';
    }
  }
}

const proxy = new Proxy(student, handler);
console.log(proxy.name); // Jack
console.log(proxy.age); // Not allowed

Ở đây, chỉ có thuộc tính name của đối tượng student là có thể truy cập được. Khác, nó trở lạiKhông cho phép.

2. Chỉ đọc Chế độ xem của một đối tượng

Có thể có lúc bạn không muốn để người khác thay đổi đồ vật. Trong những trường hợp như vậy, bạn có thể sử dụng proxy để làm cho một đối tượng chỉ có thể đọc được. Ví dụ,

let student = {
    name: 'Jack',
    age: 23
}

const handler = {
    set: function (obj, prop, value) {
        if (obj[prop]) {
            
            // cannot change the student value
            console.log('Read only')
        }
    }
};

const proxy = new Proxy(student, handler);

proxy.name = 'John'; // Read only
proxy.age = 33; // Read only

Trong chương trình trên, người ta không thể thay đổi đối tượng theo bất kỳ cách nào.

Nếu một người cố gắng thay đổi đối tượng theo bất kỳ cách nào, bạn sẽ chỉ nhận được một chuỗi thông báo Chỉ đọc.

3. Tác dụng phụ

Bạn có thể sử dụng proxy để gọi một hàm khác khi một điều kiện được đáp ứng. Ví dụ,

const myFunction = () => {
    console.log("execute this function")
};

const handler = {
    set: function (target, prop, value) {
        if (prop === 'name' && value === 'Jack') {
            // calling another function
            myFunction();
        }
        else {
            console.log('Can only access name property');
        }
    }
};

const proxy = new Proxy({}, handler);

proxy.name = 'Jack'; // execute this function
proxy.age = 33; // Can only access name property

Proxy JavaScript được giới thiệu từ phiên bản JavaScript ES6 . Một số trình duyệt có thể không hỗ trợ đầy đủ việc sử dụng nó. .