ECMAScript 2019 的新特性 Proxy，让你自定义对象属性行为-JavaScript中文网-JavaScript教程资源分享门户

在 ECMAScript 2019 中，引入了一个新的特性 Proxy，它可以让开发者自定义对象属性的行为。使用 Proxy，我们可以拦截对象的各种操作，例如读取属性、设置属性、删除属性等等。这个特性的出现，让我们可以更加灵活地操作对象，使得我们的代码更加简洁、易读、易维护。

Proxy 的基本用法

Proxy 的基本用法非常简单，我们只需要创建一个 Proxy 对象，然后在它上面定义一些拦截函数即可。下面是一个简单的示例代码：

// www.javascriptcn.com code example
let obj = new Proxy({}, {
  get: function(target, key) {
    console.log(`读取属性 ${key}`);
    return target[key];
  },
  set: function(target, key, value) {
    console.log(`设置属性 ${key}=${value}`);
    target[key] = value;
    return true;
  }
});

obj.foo = 123; // 设置属性 foo=123
console.log(obj.foo); // 读取属性 foo，输出 123

在上面的代码中，我们使用了一个空对象作为 Proxy 的 target，然后定义了两个拦截函数：get 和 set。当我们读取 obj.foo 属性时，会触发 get 拦截函数；当我们设置 obj.foo 属性时，会触发 set 拦截函数。在每个拦截函数中，我们可以自定义一些操作，例如输出日志、验证属性值、修改属性值等等。

Proxy 的高级用法

除了基本用法之外，Proxy 还有很多高级用法，可以让我们更加灵活地操作对象。下面是一些常见的高级用法：

拦截属性的读取和设置

我们可以使用 get 和 set 拦截函数，拦截对象属性的读取和设置。在拦截函数中，我们可以自定义一些操作，例如输出日志、验证属性值、修改属性值等等。

// www.javascriptcn.com code example
let obj = new Proxy({}, {
  get: function(target, key) {
    console.log(`读取属性 ${key}`);
    return target[key];
  },
  set: function(target, key, value) {
    console.log(`设置属性 ${key}=${value}`);
    target[key] = value;
    return true;
  }
});

obj.foo = 123; // 设置属性 foo=123
console.log(obj.foo); // 读取属性 foo，输出 123

拦截属性的删除

我们可以使用 deleteProperty 拦截函数，拦截对象属性的删除操作。在拦截函数中，我们可以自定义一些操作，例如输出日志、验证属性值、修改属性值等等。

// www.javascriptcn.com code example
let obj = new Proxy({ foo: 123 }, {
  deleteProperty: function(target, key) {
    console.log(`删除属性 ${key}`);
    delete target[key];
    return true;
  }
});

delete obj.foo; // 删除属性 foo
console.log(obj.foo); // undefined

拦截属性的枚举

我们可以使用 ownKeys 拦截函数，拦截对象属性的枚举操作。在拦截函数中，我们可以自定义一些操作，例如过滤属性、排序属性等等。

let obj = new Proxy({ foo: 123, bar: 456 }, {
  ownKeys: function(target) {
    return Object.keys(target).filter(key => key !== 'bar');
  }
});

console.log(Object.keys(obj)); // ['foo']

拦截方法的调用

我们可以使用 apply 拦截函数，拦截对象方法的调用操作。在拦截函数中，我们可以自定义一些操作，例如输出日志、验证参数、修改返回值等等。

// www.javascriptcn.com code example
let obj = new Proxy({
  add: function(a, b) {
    return a + b;
  }
}, {
  apply: function(target, thisArg, args) {
    console.log(`调用方法 ${target.name}(${args.join(', ')})`);
    return target.apply(thisArg, args);
  }
});

console.log(obj.add(1, 2)); // 调用方法 add(1, 2)，输出 3

Proxy 的指导意义

使用 Proxy，我们可以更加灵活地操作对象，使得我们的代码更加简洁、易读、易维护。在实际开发中，我们可以使用 Proxy 来实现一些高级的功能，例如数据绑定、事件监听、状态管理等等。同时，我们也需要注意一些性能问题，避免过度使用 Proxy 导致性能问题。

在学习 Proxy 的过程中，我们也需要了解一些相关的知识，例如 Reflect 对象、Symbol 对象、Promise 对象等等。这些知识可以帮助我们更好地理解和使用 Proxy。

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

ECMAScript 2019 的新特性 Proxy，让你自定义对象属性行为