JavaScript 代理

在 JavaScript 中，Proxy（代理对象）用于包装一个对象，并重新定义对象上的各种操作，例如读取、插入、验证等。Proxy 允许您为 对象 或 函数 添加自定义行为。

创建 Proxy 对象

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() 方法用于访问对象的属性值。如果对象中不存在该属性，则返回属性不存在。

如您所见，您可以使用代理为对象创建新操作。有时您可能想检查一个对象是否具有某个键，并根据该键执行操作。在这种情况下，可以使用代理。

您也可以传递一个空的 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 handlers (代理处理程序)

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 对象。

Proxy 的用途

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 属性可访问。否则，它将返回 不允许。

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

在上面的程序中，无法以任何方式修改该对象。

如果尝试以任何方式修改对象，您只会收到一条显示 只读 的字符串。

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 Proxy 是从 JavaScript ES6 版本引入的。某些浏览器可能不支持其全部功能。要了解更多信息，请访问 JavaScript proxy。

另请阅读

• JavaScript Getter 和 Setter