js的proxy详解与示例

Proxy是ES6引入的一个新特性，它可以用来代理一个对象，可以拦截对象的各种操作，使我们可以自定义对象的行为。Proxy的主要作用是拦截对象的读取、赋值、函数调用等操作，可以用于数据绑定、权限控制、数据校验等场景。

下面是一些Proxy的示例：

拦截读取属性值

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

let proxyObj = new Proxy(obj, {
  get(target, key, receiver) {
    console.log(`读取了${key}属性`);
    return Reflect.get(target, key, receiver);
  }
});

console.log(proxyObj.name); // 读取了name属性 Tom
console.log(proxyObj.age); // 读取了age属性 18

拦截属性赋值

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

let proxyObj = new Proxy(obj, {
  set(target, key, value, receiver) {
    console.log(`将${key}属性的值设置为${value}`);
    return Reflect.set(target, key, value, receiver);
  }
});

proxyObj.name = 'Jerry'; // 将name属性的值设置为Jerry

拦截函数调用

let obj = {
  add(x, y) {
    return x + y;
  }
}

let proxyObj = new Proxy(obj, {
  apply(target, thisArg, args) {
    console.log(`调用函数${target.name}，参数为${args}`);
    return Reflect.apply(target, thisArg, args);
  }
});

proxyObj.add(1, 2); // 调用函数add，参数为1,2 3

拦截对象的in操作

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

let proxyObj = new Proxy(obj, {
  has(target, key) {
    console.log(`判断${key}属性是否存在`);
    return Reflect.has(target, key);
  }
});

console.log('name' in proxyObj); // 判断name属性是否存在 true
console.log('gender' in proxyObj); // 判断gender属性是否存在 false

拦截对象的delete操作

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

let proxyObj = new Proxy(obj, {
  deleteProperty(target, key) {
    console.log(`删除了${key}属性`);
    return Reflect.deleteProperty(target, key);
  }
});

delete proxyObj.age; // 删除了age属性

拦截对象的getOwnPropertyDescriptor操作

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

let proxyObj = new Proxy(obj, {
  getOwnPropertyDescriptor(target, key) {
    console.log(`获取${key}属性的描述符`);
    return Reflect.getOwnPropertyDescriptor(target, key);
  }
});

console.log(Object.getOwnPropertyDescriptor(proxyObj, 'name')); // 获取name属性的描述符 {value: "Tom", writable: true, enumerable: true, configurable: true}

拦截对象的defineProperty操作

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

let proxyObj = new Proxy(obj, {
  defineProperty(target, key, descriptor) {
    console.log(`定义${key}属性的描述符`);
    return Reflect.defineProperty(target, key, descriptor);
  }
});

Object.defineProperty(proxyObj, 'gender', {value: 'male'}); // 定义gender属性的描述符

拦截对象的getPrototypeOf操作

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

let proxyObj = new Proxy(obj, {
  getPrototypeOf(target) {
    console.log(`获取对象的原型`);
    return Reflect.getPrototypeOf(target);
  }
});

console.log(Object.getPrototypeOf(proxyObj)); // 获取对象的原型 {constructor: ƒ}

拦截对象的setPrototypeOf操作

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

let proxyObj = new Proxy(obj, {
  setPrototypeOf(target, proto) {
    console.log(`设置对象的原型`);
    return Reflect.setPrototypeOf(target, proto);
  }
});

Object.setPrototypeOf(proxyObj, {}); // 设置对象的原型

以上是一些Proxy的示例，可以看到，Proxy可以拦截对象的各种操作，可以用于实现各种功能，非常强大。