ES6 - Proxies代理

在JavaScript中，代理(Proxies)用于包装对象并将各种操作重新定义到对象中，例如读取，插入，验证等。代理可以向对象或函数添加自定义行为。

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

如您所见，您可以使用代理为对象创建新操作。当您要检查对象是否具有特定键并根据该键执行操作时，可能会发生这种情况。在这种情况下，可以使用代理。

您还可以传递一个空的处理程序。当传递一个空的处理程序时，代理的行为就像一个原始对象。例如，

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

const handler = { };

// 传递空处理程序
const proxy1 = new Proxy(student, {});

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

Proxy处理程序

代理提供了两种处理程序方法get()和set()。

get()处理程序

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

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

const handler = {

   //获取对象键和值
    get(obj, prop) {
        return obj[prop];
    }
}

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

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

set() 处理程序

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

let student = {
    name: 'John'
}

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

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

// 设置新代理
let person = new Proxy(student, setNewValue);

// 设置新的键/值
person.age = 25;
console.log(person);//Proxy {name: "John", age: 25}

这里，新的属性 age 将添加到学生对象。

Proxy使用

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

const handler = {

   //获取对象键和值
    get(obj, prop) {

   //检查条件
    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

这里，仅可访问该学生对象的name属性。否则，它返回不允许。

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

在以上程序中，不能以任何方式使对象发生变异。如果有人试图以任何方式改变对象，您只会收到一个字符串，该字符串表示只读。

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

const handler = {
    set: function (target, prop, value) {
        if (prop === 'name' && value === 'Jack') {
           //调用另一个函数
            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代理。