ECMAScript 2016 中的 Proxy 的应用及常见问题-JavaScript中文网-JavaScript教程资源分享门户

什么是 Proxy

Proxy 是 ECMAScript 2016 引入的一种新的对象，它可以代理另一个对象，对该对象的访问进行拦截和控制。Proxy 可以拦截对象的读取、赋值、方法调用等操作，相当于在目标对象之前设置了一层拦截器。

Proxy 的应用

1. 数据校验

通过 Proxy，我们可以在对象属性被访问或赋值时进行校验，从而保证数据的正确性。例如，我们可以创建一个校验数字类型的 Proxy：

// javascriptcn.com 代码示例
const numberValidator = {
  set(target, key, value) {
    if (typeof value !== 'number') {
      throw new TypeError('必须是数字');
    }
    target[key] = value;
  }
};

const data = new Proxy({}, numberValidator);

data.age = 18; // 正常赋值
data.age = '18'; // 抛出 TypeError：必须是数字

2. 对象缓存

通过 Proxy，我们可以在对象被访问时进行缓存，从而避免重复计算。例如，我们可以创建一个缓存斐波那契数列的 Proxy：

// javascriptcn.com 代码示例
const fibonacci = new Proxy({
  0: 0,
  1: 1
}, {
  get(target, key) {
    if (key in target) {
      return target[key];
    }
    target[key] = fibonacci[key - 1] + fibonacci[key - 2];
    return target[key];
  }
});

console.log(fibonacci[10]); // 55
console.log(fibonacci[20]); // 6765

3. 路由拦截

通过 Proxy，我们可以在访问 URL 时进行拦截，从而实现自定义路由。例如，我们可以创建一个路由拦截的 Proxy：

// javascriptcn.com 代码示例
const router = new Proxy({}, {
  get(target, key) {
    if (key.startsWith('/')) {
      return target[key];
    }
    throw new Error('无效的路由');
  }
});

router['/home'] = function() {
  console.log('访问了 /home');
};
router['/about'] = function() {
  console.log('访问了 /about');
};

router['/home'](); // 访问了 /home
router['/about'](); // 访问了 /about
router['/contact'](); // 抛出 Error：无效的路由

Proxy 的常见问题

1. 性能问题

由于 Proxy 会拦截所有的对象操作，因此会带来一定的性能开销。在实际应用中，我们应该避免过度使用 Proxy，只在必要的情况下使用。

2. 兼容性问题

由于 Proxy 是 ECMAScript 2016 引入的新特性，因此在一些旧版浏览器中可能不支持。在实际应用中，我们应该根据实际情况选择是否使用 Proxy。

总结

Proxy 是 ECMAScript 2016 引入的一种新的对象，它可以代理另一个对象，对该对象的访问进行拦截和控制。Proxy 可以应用于数据校验、对象缓存、路由拦截等场景。在使用 Proxy 时，我们需要注意性能和兼容性问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6506ef6a95b1f8cacd288505