ES6 中的 Proxy 实用指南：如何使用 Proxy 进行元编程-JavaScript中文网-JavaScript教程资源分享门户

在 JavaScript 中，对象是一等公民，对象的属性可以动态地添加、删除和修改。但是，这种灵活性也使得对象的行为变得难以控制。ES6 中的 Proxy 提供了一种元编程的方式，可以对对象的行为进行拦截和定制，从而实现更加灵活和安全的编程。

什么是 Proxy？

Proxy 是 ES6 中新增的一种对象，它可以用来代理另一个对象。通过 Proxy，我们可以拦截对目标对象的访问，从而对其进行一些自定义的操作。Proxy 的基本用法如下：

// javascriptcn.com 代码示例
let target = {
  name: 'Tom',
  age: 18
};

let handler = {
  get(target, prop) {
    console.log(`get ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`set ${prop}=${value}`);
    target[prop] = value;
  }
};

let proxy = new Proxy(target, handler);

console.log(proxy.name); // get name, Tom
proxy.age = 20; // set age=20
console.log(proxy.age); // get age, 20

上面的代码中，我们创建了一个名为 target 的对象，并用一个名为 handler 的对象来定义 Proxy 的行为。handler 中的 get 和 set 方法分别用于拦截对 target 属性的读取和写入操作。最后，我们用 proxy 对象来代理 target 对象，并对其进行了一些操作。

Proxy 的应用场景

Proxy 可以用来实现各种元编程的操作，例如：

1. 数据校验

我们可以使用 Proxy 来拦截对对象属性的写入操作，并对其进行校验。例如，下面的代码中，我们定义了一个名为 validator 的对象，它用于校验属性值是否为数字：

// javascriptcn.com 代码示例
let validator = {
  set(target, prop, value) {
    if (typeof value !== 'number') {
      throw new TypeError(`${prop} must be a number`);
    }
    target[prop] = value;
  }
};

let data = new Proxy({}, validator);

data.age = 18; // 正常写入
console.log(data.age); // 18
data.age = '18'; // 抛出类型错误

2. 对象代理

我们可以使用 Proxy 来代理另一个对象，从而在访问该对象时进行一些自定义操作。例如，下面的代码中，我们定义了一个名为 logger 的对象，它用于记录对另一个对象的访问日志：

// javascriptcn.com 代码示例
let logger = {
  get(target, prop) {
    console.log(`access ${prop}`);
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`set ${prop}=${value}`);
    target[prop] = value;
  }
};

let obj = {
  name: 'Tom',
  age: 18
};

let proxy = new Proxy(obj, logger);

console.log(proxy.name); // access name, Tom
proxy.age = 20; // set age=20
console.log(proxy.age); // access age, 20

3. 函数代理

我们可以使用 Proxy 来代理一个函数，并在函数执行前后进行一些操作。例如，下面的代码中，我们定义了一个名为 timing 的对象，它用于记录函数的执行时间：

// javascriptcn.com 代码示例
let timing = {
  apply(target, thisArg, args) {
    console.time('time');
    let result = target.apply(thisArg, args);
    console.timeEnd('time');
    return result;
  }
};

function add(a, b) {
  return a + b;
}

let proxy = new Proxy(add, timing);

console.log(proxy(1, 2)); // time: 0.02099609375ms, 3

Proxy 的高级用法

除了上面介绍的基本用法外，Proxy 还有一些高级用法，可以用来实现更加复杂和灵活的元编程操作。例如：

1. 操作符重载

我们可以使用 Proxy 来重载一些操作符，例如加号、减号等。例如，下面的代码中，我们定义了一个名为 vector 的对象，它用于表示二维向量，并重载了加号和减号操作符：

// javascriptcn.com 代码示例
class Vector {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

let handler = {
  get(target, prop) {
    if (prop === Symbol.toPrimitive) {
      return () => Math.sqrt(target.x * target.x + target.y * target.y);
    }
    return target[prop];
  },
  set(target, prop, value) {
    target[prop] = value;
  },
  apply(target, thisArg, args) {
    return new Vector(target.x + args[0].x, target.y + args[0].y);
  },
  // 操作符重载
  [Symbol.for('+')](a, b) {
    return new Vector(a.x + b.x, a.y + b.y);
  },
  [Symbol.for('-')](a, b) {
    return new Vector(a.x - b.x, a.y - b.y);
  }
};

let vector = new Proxy(new Vector(1, 2), handler);

console.log(vector + ''); // 2.23606797749979
console.log(vector + new Vector(2, 3)); // Vector {x: 3, y: 5}
console.log(vector - new Vector(2, 3)); // Vector {-1, -1}

2. 动态属性

我们可以使用 Proxy 来实现动态属性，即在访问对象属性时，根据属性名动态生成属性值。例如，下面的代码中，我们定义了一个名为 dynamic 的对象，它用于根据属性名动态生成属性值：

// javascriptcn.com 代码示例
let dynamic = {
  get(target, prop) {
    if (!(prop in target)) {
      target[prop] = `value of ${prop}`;
    }
    return target[prop];
  }
};

let obj = new Proxy({}, dynamic);

console.log(obj.name); // value of name
console.log(obj.age); // value of age
console.log(obj.name); // value of name

总结

ES6 中的 Proxy 提供了一种元编程的方式，可以对对象的行为进行拦截和定制，从而实现更加灵活和安全的编程。Proxy 可以用来实现各种元编程的操作，例如数据校验、对象代理、函数代理等。除了基本用法外，Proxy 还有一些高级用法，例如操作符重载、动态属性等，可以用来实现更加复杂和灵活的元编程操作。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65781dd6d2f5e1655d1fb095