ES6之Proxy的使用详解-牛翰网

什么是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对象，我们可以轻松地通过拦截器实现数据绑定和观察模式。

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