ES6之Proxy的使用详解_Javascript

什么是proxy

javascript 中的 proxy 是 es6 中新增的对象，

proxy是javascript中的内置对象，它提供了一种机制，可以拦截并自定义各种操作，如属性访问、函数调用、构造函数调用等。

proxy的构造函数接受两个参数：目标对象（被代理的对象）和一个处理器对象（用于定义拦截器）。

// 写法:target是目标对象，handler是处理器对象
const proxy = new proxy(target, handler);

proxy的拦截器【处理器对象】（handler）

拦截器是一个包含各种拦截方法的对象，用于定义在代理对象上执行的操作。

常用的拦截方法包括：get、set、apply、construct、deleteproperty、has、getownpropertydescriptor等。【这些拦截方法会在代理对象进行对应操作时自动触发】

get(target, property, receiver)：拦截对目标对象属性的读取操作
set(target, property, value, receiver)：拦截对目标对象属性的赋值操作。
apply(target, thisarg, argumentslist)：拦截对目标对象的函数调用。
construct(target, argumentslist, newtarget)：拦截对目标对象的构造函数调用。

proxy的应用场景

数据校验和保护

在属性访问和赋值操作中校验数据的合法性。

// 定义待验证的对象
const user = {
  name: '',
  age: 0
};

// 创建代理对象
const userproxy = new proxy(user, {
  set(target, property, value) {
    // 进行数据合法性验证
    if (property === 'name') {
      if (typeof value !== 'string' || value === '') {
        throw new error('姓名必须是非空字符串');
      }
    } else if (property === 'age') {
      if (typeof value !== 'number' || value < 0 || !number.isinteger(value)) {
        throw new error('年龄必须是非负整数');
      }
    }

    // 合法性验证通过，设置属性值
    target[property] = value;
    return true;
  }
});

// 使用代理对象进行属性访问和赋值
userproxy.name = 'john';
console.log(userproxy.name); // 输出: "john"

userproxy.age = 25;
console.log(userproxy.age); // 输出: 25

// 非法赋值会触发异常
try {
  userproxy.name = '';
} catch (error) {
  console.log(error.message); // 输出: "姓名必须是非空字符串"
}

try {
  userproxy.age = '30';
} catch (error) {
  console.log(error.message); // 输出: "年龄必须是非负整数"
}

日志记录

拦截对对象的操作以记录日志。

// 定义待记录日志的对象
const person = {
  name: 'john',
  age: 30
};

// 创建代理对象
const personproxy = new proxy(person, {
  get(target, property) {
    // 记录属性访问日志
    console.log(`访问属性: ${property}`);
    
    // 返回属性值
    return target[property];
  },
  set(target, property, value) {
    // 记录属性赋值日志
    console.log(`设置属性: ${property}，值: ${value}`);

    // 设置属性值
    target[property] = value;
    return true;
  },
  deleteproperty(target, property) {
    // 记录属性删除日志
    console.log(`删除属性: ${property}`);

    // 删除属性
    delete target[property];
    return true;
  }
});

// 使用代理对象进行属性访问、赋值和删除
console.log(personproxy.name); // 输出：访问属性: name -> "john"

personproxy.age = 35; // 输出：设置属性: age，值: 35
console.log(personproxy.age); // 输出：访问属性: age -> 35

delete personproxy.age; // 输出：删除属性: age
console.log(personproxy.age); // 输出：访问属性: age -> undefined

数据绑定和观察

通过拦截器实现数据绑定和观察模式。

// 创建数据对象
const data = {
  name: 'john',
  age: 30
};

// 创建观察者对象，用于监听数据变化
const observer = {
  notify(target, property) {
    console.log(`属性 ${property} 发生变化，新值为: ${target[property]}`);
  }
};

// 创建代理对象
const dataproxy = new proxy(data, {
  set(target, property, value) {
    // 设置属性值
    target[property] = value;

    // 通知观察者属性变化
    observer.notify(target, property);

    return true;
  }
});

// 修改代理对象的属性值
dataproxy.name = 'alice'; // 输出：属性 name 发生变化，新值为: alice
dataproxy.age = 35; // 输出：属性 age 发生变化，新值为: 35

通过使用proxy对象，我们可以轻松地通过拦截器实现数据绑定和观察模式。

在修改数据时，我们可以自动通知观察者，并做出相应的响应。这样可以实现数据与界面的自动同步、实时更新等功能。