15-ES6 ++：JavaScript中的代理
#javascript #es6 #esnext

代理人

在定义代理在JavaScript中的工作原理之前，让我们首先定义代理是什么。

代理是用于控制对象访问的OOD（面向对象的设计）模式。它用于在不修改对象本身的情况下向对象添加额外功能。

在现实世界中，代理用于控制对建筑物的访问。例如，如果没有保安人员，您将无法进入建筑物。保安人员是控制对建筑物的访问的代理，因此您可以通过保安人员访问建筑物。

另一个世界示例是银行。没有银行卡，您将无法访问您的银行帐户。银行卡是控制访问您的银行帐户的代理。

现在让我们在编程中定义它。

在编程中，代理用于控制对对象的访问。例如，如果没有Getter，您将无法访问对象的私有属性。 getter是控制对象的私人属性的访问等的代理。

JavaScript中的代理

代理在ES6中引入JavaScript。它用于控制对对象的访问。它用于在不修改对象本身的情况下向对象添加额外功能。

这个怎么运作

让我们看看代理在JavaScript中的工作方式。

const user = {
  name: "Hasan",
  age: 20,
};

const userProxy = new Proxy(user, {
  get(target, property) {
    console.log("Getting property", property);
    return target[property];
  },
  set(target, property, value) {
    console.log("Setting property", property, "to", value);
    target[property] = value;
  },
});

userProxy.name = "Ahmed";
console.log(user.name); // Ahmed

您可以看到，我们使用代理来访问和修改user对象的name属性。代理用于在不修改user对象本身的情况下向user对象添加额外功能。

代理结构

现在让我们看看代理的结构。

代理是一个Proxy类，需要两个参数：

  1. 您要控制访问的对象。
  2. 一个包含处理程序的对象。

让我们写一个简单明了的代理。

const user = {};

const userProxy = new Proxy(user, {
  // Handlers
});

在这里，我们创建了代理类的新实例，并传递了我们需要控制访问user的对象，然后在代理构造函数的第二个参数中，它接收一个对象，该对象包含处理程序，现在让我们定义什么是代理中的可用处理程序。

可用的处理程序

代理中有13个可用处理程序，它们是：

  1. get：它用于获取对象的属性，在oop中getter。
  2. set：它用于设置对象的属性，一个oop中的设置器。
  3. apply：用于调用函数。
  4. construct：它用于创建类的新实例，对应于new关键字和constructor方法。
  5. has：用于检查对象中是否存在属性，对应于in操作员。
  6. deleteProperty：它用于从对象删除属性，对应于delete操作员。
  7. defineProperty：它用于定义对象中的新属性，对应于Object.defineProperty方法。
  8. ownKeys：它用于获取对象的所有键，对应于Object.keys方法。
  9. getOwnPropertyDescriptor：它用于获取对象中属性的属性描述符，对应于Object.getOwnPropertyDescriptor方法。
  10. preventExtensions：它用于防止向对象添加新属性，对应于Object.preventExtensions方法。
  11. isExtensible：用于检查对象是否可扩展，对应于Object.isExtensible方法。
  12. getPrototypeOf：它用于获取对象的原型，对应于Object.getPrototypeOf方法。
  13. setPrototypeOf：它用于设置对象的原型，对应于Object.setPrototypeOf方法。

您可以看到，每个处理程序都以普通对象的方式具有相应的方法。

让我们从最常用的处理程序开始，您可能会在大多数情况下使用它们，它们是get，set，has，deleteProperty

得到

get处理程序用于获取对象的属性，一个oop中的getter。

const user = {
  name: "Hasan",
  age: 20,
};

const userProxy = new Proxy(user, {
  get(target, property) {
    console.log("Getting property", property);
    return target[property];
  },
});

console.log(userProxy.name); // Getting property name and returns Hasan

此处理程序需要两个参数：

  1. 目标对象，在我们的情况下为user对象。
  2. 我们要获得的属性，在我们的情况下是name属性。

放

set处理程序用于设置对象的属性，一个OOP中的设置器。

const user = {
  name: "Hasan",
  age: 20,
};

const userProxy = new Proxy(user, {
  set(target, property, value) {
    console.log("Setting property", property, "to", value);
    target[property] = value;
  },
});

userProxy.name = "Ahmed";

console.log(user.name); // Setting property name to Ahmed and returns Ahmed

此处理程序采用三个参数：

  1. 目标对象，在我们的情况下为user对象。
  2. 我们要设置的属性，在我们的情况下是name属性。
  3. 我们要设置的价值，在我们的情况下为Ahmed值。

有

此处理程序检查给定属性是否存在于我们的对象中。

const user = {
  name: "Hasan",
  age: 20,
};

const userProxy = new Proxy(user, {
  has(target, property) {
    console.log("Checking if property", property, "exists");
    return property in target;
  },
});

console.log("name" in userProxy); // Checking if property name exists and returns true

此处理程序需要两个参数：

  1. 目标对象，在我们的情况下为user对象。
  2. 我们要检查的属性是否存在，在我们的情况下是name属性。

deleteproperty

现在让我们从我们的对象删除属性。

const user = {
  name: "Hasan",
  age: 20,
};

const userProxy = new Proxy(user, {
  deleteProperty(target, property) {
    console.log("Deleting property", property);
    delete target[property];
  },
});

delete userProxy.name;

console.log(user.name); // Deleting property name and returns undefined

此处理程序需要两个参数：

  1. 目标对象，在我们的情况下为user对象。
  2. 我们要删除的属性，在我们的情况下是name属性。

在现实世界项目中使用代理的用例

现在让我们看一些在现实世界项目中使用代理的用例。

在我们的Ultimate Nodejs Course中，我们已经有模型来处理单个数据记录，例如用户数据，我们可以使用代理在不使用get方法的情况下访问数据。

class User {
  constructor(private data: UserProps) {}

  get(propName: string): string | number {
    return this.data[propName];
  }
}

const user = new User({ name: "Hasan", age: 20 });

const userProxy = new Proxy(user, {
  get(target, property) {
    return target.get(property);
  },
});

console.log(userProxy.name); // Hasan

这当然是一个非常简单的示例，如果您想查看它的真实实现，请跟上该系列的内容，它将在本文的接下来的几天内发布。

- 结论

在本文中，我们了解了代理，它是什么，如何使用它以及在现实世界项目中使用它的一些用例。

â•给我买一杯咖啡。

如果您喜欢我的文章并看到对您有用，则可以buy me a coffee，它将帮助我继续前进并继续创建更多内容。

ð加入我们的社区

在Discord上加入我们的社区以获得帮助和支持（Node JS 2023频道）。

ð奖励内容ð

您可能会看这些文章，这肯定会提高您的知识和生产力。

一般主题

软件包和库

React JS软件包

课程（文章）