JavaScript Proxies: Kiểm soát Truy cập vào Đối tượng

Trong JavaScript, proxy (đối tượng proxy) được sử dụng để bao bọc một đối tượng và định nghĩa lại các hoạt động khác nhau trên đối tượng như đọc, chèn, xác minh, 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() – hàm tạo.
• target – đối tượng/hàm mà bạn muốn tạo proxy
• handler – có thể định nghĩa lại hành vi tùy chỉnh của đối tượng

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

Run Code

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

Như bạn có thể 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ể xảy ra 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, bạn có thể sử dụng proxy.

Bạn cũng có thể truyền một handler trống. Khi truyền một handler trống, proxy sẽ hoạt động như một đối tượng ban đầu. 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

Run Code

Các handler của Proxy

Proxy cung cấp hai phương thức handler get() và set().

handler get()

Phương thức get() đượ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

Run Code

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

handler set()

Phương thức set() được sử dụng để đặt 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}

Run Code

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

Các Ứng Dụng của Proxy

1. Đối Với Xác Minh

Bạn có thể sử dụng proxy cho việc xác minh. 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

Run Code

Ở đây, chỉ thuộc tính tên của đối tượng sinh viên có thể truy cập. Còn lại, nó sẽ trả về “Không được phép”.

2. Xem Chỉ Đọc của Một Đối Tượng

Có thể có những lúc bạn không muốn cho phép người khác thay đổi một đối tượng. Trong những trường hợp như vậy, bạn có thể sử dụng proxy để biến đối tượng thành chỉ đọ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

Run Code

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

Nếu ai đó cố gắng thay đổi đối tượng bằng bất kỳ cách nào, bạn chỉ sẽ nhận được một chuỗi nói “Chỉ Đọc”.

3. Hiệu Ứ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

Run Code

Proxy JavaScript đã được giới thiệu từ phiên bản JavaScript ES6.

• Bài đăng blog này ban đầu được xuất bản tại:https://www.programiz.com/