javascript的Proxy

本文介绍: Pro x y是ES6中新增的一个特性，它可以拦截对象的操作，提供了一个中间层来控制对目标对象的访问。简单来说，它可以对对象进行代理，从而实现对对象的监控、修改、过滤等操作。

1. 什么是Pro xy

Pro xy是ES6中新增的一个特性，它可以拦截对象的操作，提供了一个中间层来控制对目标对象的访问。简单来说，它可以对对象进行代理，从而实现对对象的监控、修改、过滤等操作。

2. 为什么出现Pro xy

在Jav aSc rip t中，对象的属性可以被任意修改，这就会导致一些安全问题和难以调试的问题。Pro xy的出现就是为了解决这些问题，它可以拦截对象的操作，从而实现对对象的监控和控制。

3. 怎么使用Proxy

使用Proxy需要创建一个Proxy对象，它接收两个参数：目标对象和一个处理程序对象。处理程序对象中定义了一些拦截器方法，用于拦截目标对象的操作。

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

let handler = {
  get(target, propKey) {
    console.log('get操作');
    return target[propKey];
  },
  set(target, propKey, value) {
    console.log('set操作');
    target[propKey] = value;
  }
};

let proxy = new Proxy(target, handler);

console.log(proxy.name); // 输出：get操作 Tom
proxy.age = 20; // 输出：set操作
console.log(proxy.age); // 输出：get操作 20

在上面的例子中，我们创建了一个目标对象target和一个处理程序对象h andler，然后使用它们来创建了一个代理对象proxy。在代理对象中，我们定义了get和set 拦截器方法，用于拦截目标对象的读取和修改操作。当我们对代理对象进行读取和修改操作时，会触发相应的拦截器方法。

4. 解决 什么 问题

使用Proxy可以解决一些安全问题和难以调试的问题，例如：

对象的属性可以被任意修改，使用Pr oxy可以控制对对象的修改操作。
对象的属性访问不够直观，使用Pr oxy可以实现对属性访问的监控和控制。
对象的属性访问不够安全，使用Pr oxy可以实现对属性访问的过滤和检查。

5. Pr oxy的API和Proxy实例的讲解

Proxy提供了一些API和实例方法，用于实现对目标对象的拦截和控制。下面是一些常用的API和实例方法：

Proxy.re vocable(target, h andler)：创建一个可撤销的代理对象。
Proxy.i sRev oked(proxy)：判断一个代理对象是否已经被撤销。
Proxy.apply(target, thisArg, args)：拦截函数的调用操作。
Proxy.construct(target, args)：拦截new操作符。
Proxy.defineProperty(target, propKey, propDesc)：拦截Object.defineProperty()操作。
Proxy.deleteProperty(target, propKey)：拦截delete操作。
Proxy.get(target, pro pKey, recei ver)：拦截属性读取操作。
Proxy.set(target, pro pKey, value, recei ver)：拦截属性设置操作。
Proxy.has(ta rget, pro pKey)：拦截in 操作符。
Proxy.getOwnPropertyDescriptor(ta rget, pro pKey)：拦截Object.getOwnPropertyDescriptor()操作。
Proxy.getPrototypeOf(ta rget)：拦截Object.getPrototypeOf()操作。
Proxy.setPrototypeOf(target, proto)：拦截Object.setPrototypeOf()操作。
Proxy.isExtensi ble(target)：拦截Object.isExtensi ble()操作。
Proxy.pr eventExtensions(target)：拦截Object.pr eventExtensions()操作。
Proxy.ownKeys(target)：拦截Object.getOwnPropertyNames()和Object.getOwnPropertySymbols()操作。

1. Proxy构造函数

Proxy构造函数用于创建一个代理对象，它接收两个参数：目标对象和h andler对象。其中，目标对象是被代理的对象，h andler对象包含了一系列拦截器方法，用于拦截目标对象的各种操作。

下面是Proxy构造函数的基本使用流程和思路：

const target = {}; // 目标对象
const handler = {}; // handler对象

const proxy = new Proxy(target, handler); // 创建代理对象

在上面的代码中，我们创建了一个空对象作为目标对象，并创建了一个空对象作为h andler对象。然后，我们使用Proxy构造函数创建了一个代理对象proxy，它将目标对象target和handler对象绑定在一起。

2. handler对象

handler对象包含了一系列拦截器方法，用于拦截目标对象的各种操作。这些方法在代理对象proxy被访问时被调用，它们接收两个参数：目标对象和操作参数。

下面是handler对象的基本使用流程和思路：

const handler = {
  get(target, key) {
    console.log(`Getting ${key} from target`);
    return target[key];
  },
  set(target, key, value) {
    console.log(`Setting ${key} to ${value}`);
    target[key] = value;
  },
  // 其他拦截器方法
};

const proxy = new Proxy({}, handler); // 创建代理对象

在上面的代码中，我们定义了两个拦截器方法get和set，它们分别用于拦截目标对象的读取和写入操作。当代理对象proxy被访问时，这些方法会被调用，并输出相应的信息。

3. Proxy实例的API基本使用流程和思路

除了上面提到的get和set方法之外，handler对象还包括了许多其他拦截器方法，用于拦截目标对象的各种操作。下面是一些常用的拦截器方法及其基本使用流程和思路：

get
get方法会在读取属性时被调用，它接收三个参数：target、pro p和recei ver。其中，target表示被代理的对象，pro p 表示被访问的属性名，recei ver表示操作发生的对象。在get方法中，我们可以返回任何值，以便代理对象继续执行后续操作。如果我们不想让属性被访问，可以抛出一个错误。

const handler = {
  get: function(target, prop, receiver) {
    console.log(`Getting ${prop}`);
    if (prop === 'password') {
      throw new Error('Access denied');
    }
    return Reflect.get(target, prop, receiver);
  }
};

在上面的代码中，我们对password属性进行了限制，如果访问该属性，就会抛出一个错误。

set
set方法会在设置属性时被调用，它接收四个参数：target、prop、value和receiver。其中，target表示被代理的对象，prop 表示要设置的属性名，value 表示要设置的属性值，receiver表示操作发生的对象。在set方法中，我们可以对属性值进行修改，或者抛出一个错误以阻止属性值被设置。

const handler = {
  set: function(target, prop, value, receiver) {
    console.log(`Setting ${prop} to ${value}`);
    if (prop === 'password') {
      throw new Error('Access denied');
    }
    return Reflect.set(target, prop, value, receiver);
  }
};

在上面的代码中，我们对password属性进行了限制，如果设置该属性，就会抛出一个错误。

has
has方法会在判断属性是否存在时被调用，它接收两个参数：target和prop。其中，target表示被代理的对象，prop表示要判断的属性名。在has方法中，我们可以返回一个布尔值，表示属性是否存在。

const handler = {
  has: function(target, prop) {
    console.log(`Checking if ${prop} exists`);
    return Reflect.has(target, prop);
  }
};

在上面的代码中，我们输出了一个日志，然后调用了Reflect.has方法来判断属性是否存在。

apply方法：用于拦截函数的调用操作。

const handler = {
  apply(target, thisArg, args) {
    console.log(`Calling ${target.name} with arguments: ${args}`);
    return target.apply(thisArg, args);
  },
};

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

const proxy = new Proxy(sum, handler);

proxy(1, 2); // 输出 "Calling sum with arguments: 1,2"

在上面的代码中，我们定义了一个拦截器方法apply，它用于拦截函数的调用操作。当代理对象proxy被调用时，这个方法会被调用，并输出相应的信息。

getPrototypeOf方法：用于拦截获取目标对象的原型操作。

const handler = {
  getPrototypeOf(target) {
    console.log(`Getting prototype of target`);
    return Object.getPrototypeOf(target);
  },
};

const obj = {};
const proxy = new Proxy(obj, handler);

Object.getPrototypeOf(proxy); // 输出 "Getting prototype of target"

在上面的代码中，我们定义了一个拦截器方法getPrototypeOf，它用于拦截获取目标对象的原型操作。当代理对象proxy被访问时，这个方法会被调用，并输出相应的信息。

has方法：用于拦截in操作符的操作。

const handler = {
  has(target, key) {
    console.log(`Checking if ${key} is in target`);
    return key in target;
  },
};

const obj = { a: 1 };
const proxy = new Proxy(obj, handler);

"a" in proxy; // 输出 "Checking if a is in target"

在上面的代码中，我们定义了一个拦截器方法has，它用于拦截in操作符的操作。当代理对象proxy被访问时，这个方法会被调用，并输出相应的信息。

deleteProperty方法：用于拦截delete操作符的操作。

const handler = {
  deleteProperty(target, key) {
    console.log(`Deleting ${key} from target`);
    delete target[key];
  },
};

const obj = { a: 1 };
const proxy = new Proxy(obj, handler);

delete proxy.a; // 输出 "Deleting a from target"