ES6 中如何使用 Proxy 对象-JavaScript中文网-JavaScript教程资源分享门户

ES6 的 Proxy 对象是在 ECMAScript 内置对象之间定义拦截行为的一种功能。它的出现使得我们可以拦截对象的默认行为，从而实现一些自己定义的行为。在前端编程中，我们可以利用它来优化代码、增加可读性、提高安全性等。

基本语法

Proxy 是一个构造函数，通过 new 操作符创建一个实例。

let myProxy = new Proxy(target, handler);

其中，target 是被代理的目标对象，handler 中定义了对目标对象所做操作的拦截行为。

拦截操作

下面是常用的一些拦截操作：

get

使用 get 操作可以拦截对目标对象属性的读取操作，可用于实现缺省值、类型检查、属性过滤等。

let myProxy = new Proxy({}, {
  get: function(target, property) {
    if (property in target) {
      return target[property];
    } else {
      return '未定义的属性';
    }
  }
});

myProxy.hello = '你好';
console.log(myProxy.hello); // 输出 '你好'
console.log(myProxy.world); // 输出 '未定义的属性'

set

使用 set 操作可以拦截对目标对象属性的赋值操作，可用于实现数据验证、类型检查、属性过滤等。

let myProxy = new Proxy({}, {
  set: function(target, property, value) {
    if (value > 100) {
      throw new TypeError('属性值太大');
    } else {
      target[property] = value;
      return true;
    }
  }
});

myProxy.a = 10;
console.log(myProxy.a); // 输出 10
try {
  myProxy.b = 200;
} catch (e) {
  console.log(e); // TypeError: 属性值太大
}

has

使用 has 操作可以拦截对目标对象属性的 in 操作符检测，可用于实现属性过滤等。

let myProxy = new Proxy({ a: 1, b: 2 }, {
  has: function(target, property) {
    if (property === 'b') {
      return false;
    } else {
      return property in target;
    }
  }
});

console.log('a' in myProxy); // 输出 true
console.log('b' in myProxy); // 输出 false

deleteProperty

使用 deleteProperty 操作可以拦截对目标对象属性的 delete 操作符，可用于实现属性过滤等。

let myProxy = new Proxy({ a: 1, b: 2 }, {
  deleteProperty: function(target, property) {
    if (property === 'b') {
      return false;
    } else {
      delete target[property];
      return true;
    }
  }
});

console.log(delete myProxy.a); // 输出 true
console.log(delete myProxy.b); // 输出 false

apply

使用 apply 操作可以拦截目标对象的函数调用操作，可用于实现函数调用前后的拦截、增强等。

let myProxy = new Proxy(function(a, b) {
  return a + b;
}, {
  apply: function(target, thisArg, args) {
    console.log('函数调用开始');
    let result = target.apply(thisArg, args);
    console.log('函数调用结束');
    return result;
  }
});

console.log(myProxy(1, 2)); // 输出 3

高级用法

除了上面介绍的拦截操作之外，Proxy 还具有很多高级用法，如转发等。在实际开发中，我们可以结合这些高级用法，使用 Proxy 来解决一些难以处理的问题。

通过转发操作，我们可以将对代理对象的所有操作都转发给目标对象，从而实现完全代理的效果。

let target = {};
let myProxy = new Proxy(target, {
  get: function(target, property) {
    console.log('读取 ' + property);
    return target[property];
  },
  set: function(target, property, value) {
    console.log('写入 ' + property + ' = ' + value);
    target[property] = value;
  }
});

myProxy.a = 10; // 写入 a = 10
console.log(myProxy.a); // 读取 a，输出 10

链式调用

通过链式调用，我们可以将多个操作连续地执行，从而代码更加简洁、易读。

let myProxy = new Proxy({}, {
  get: function(target, property) {
    let fn = function() {
      console.log('调用方法 ' + property);
      return myProxy;
    };
    if (property === 'then') {
      return fn;
    } else {
      return target[property];
    }
  }
});

myProxy.a = 10;
myProxy.b = 20;
myProxy.c = 30;
myProxy.d = 40;

myProxy.then().then().then().then(); // 调用方法 then、输出 4 次 '调用方法 then'

总结

通过 Proxy 对象，我们可以实现灵活的代理操作，从而优化代码、增加可读性、提高安全性等。如果您想更有深度和学习以及指导意义地了解 Proxy 的高级用法，建议您查阅相关文献或者探索更多的示例代码。

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