JavaScript 代理

    在本教程中，您将借助示例了解 JavaScript 代理。
    在 JavaScript 中，proxy（代理对象）用于包装对象并将各种操作重新定义到对象中，例如读取、插入、验证等。代理允许您向对象或函数添加自定义行为。

创建代理对象

    代理的语法是：

new Proxy(target, handler);

    这里，

• new Proxy() - 构造函数。
• target - 您要代理的对象/功能
• handler - 可以重新定义对象的自定义行为

    例如，

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

    在这里，get() 方法用于访问对象的属性值。如果该属性在对象中不可用，则返回 property does not exist。
    如您所见，您可以使用代理为对象创建新操作。当您想要检查对象是否具有特定键并基于该键执行操作时，可能会出现这种情况。在这种情况下，可以使用代理。
    您还可以传递一个空 handler。当传递一个空 handler 时，代理的行为就像一个原始对象。例如，

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

Proxy handler

    Proxy 提供了两个 handler 方法 get() 和 set()。

get() handler

    get() 方法用于访问目标对象的属性。例如，

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

    在这里，get() 方法将对象和属性作为其参数。

set() handler

    set() 方法用于设置对象的值。例如，

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}

    在这里，一个新的属性 age 被添加到 student 对象。

代理的使用

1. 验证

    您可以使用代理进行验证。您可以检查键的值并根据该值执行操作。例如，

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

    在这里，只有 student 对象的 name 属性是可访问的。否则，它会返回 Not allowed。

2. 对象的只读视图

    有时，您可能不想让其他人对对象进行更改。在这种情况下，可以使用代理使对象仅可读。例如，

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

    在上面的程序中，不能以任何方式改变对象。
    如果有人试图以任何方式改变对象，你只会收到一个字符串，上面写着 Read only。

3. 副作用

    当满足条件时，您可以使用代理调用另一个函数。例如，

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

    JavaScript 代理是从JavaScript ES6版本引入的。一些浏览器可能不完全支持它的使用。要了解更多信息，请访问JavaScript 代理。

    上一教程 ：JS for…of                                          下一教程 ：JS setTimeout()

参考文档

[1] Parewa Labs Pvt. Ltd. (2022, January 1). Getting Started With JavaScript, from Parewa Labs Pvt. Ltd: https://www.programiz.com/javascript/proxies