Explication détaillée du constructeur JavaScript et de l'opérateur "nouvel"

La colonne

javascript présente le "nouvel" opérateur.

Constructeur et opérateur "nouveau"

La syntaxe régulière {...} permet la création d'un objet. Mais nous devons souvent créer de nombreux objets similaires, tels que plusieurs utilisateurs ou éléments de menu, etc.

Ceci peut être réalisé en utilisant des constructeurs et l'opérateur "new".

Constructeur

Constructor est techniquement une fonction régulière. Il existe cependant deux conventions :

1. Leurs noms commencent par une lettre majuscule.
2. Ils ne peuvent être exécutés que par l'opérateur "new".

Par exemple :

function User(name) {  this.name = name;  this.isAdmin = false;
}let user = new User("Jack");

alert(user.name); // Jackalert(user.isAdmin); // false复制代码

Lorsqu'une fonction est exécutée à l'aide de l'opérateur new, elle suit ces étapes :

1. un nouvel objet vide Créé et attribué à this.
2. Le corps de la fonction est exécuté. Habituellement, il modifie this en y ajoutant de nouveaux attributs.
3. Renvoie la valeur de this.

En d'autres termes, new User(...) fait quelque chose comme :

function User(name) {  // this = {};（隐式创建）

  // 添加属性到 this
  this.name = name;  this.isAdmin = false;  // return this;（隐式返回）}复制代码

Donc le résultat de new User("Jack") est le même objet :

let user = {  name: "Jack",  isAdmin: false};复制代码

Maintenant, si nous vouloir créer d'autres utilisateurs que nous pouvons appeler new User("Ann"), new User("Alice") etc. Beaucoup plus court et plus facile à lire que d'utiliser la création littérale à chaque fois.

C'est l'objectif principal du constructeur - implémenter du code de création d'objets réutilisables.

Disons-le encore une fois : techniquement, n'importe quelle fonction peut être utilisée comme constructeur. Autrement dit : n'importe quelle fonction peut être exécutée via new et elle exécutera l'algorithme ci-dessus. « Majuscule » est une convention courante pour indiquer clairement qu'une fonction sera exécutée en utilisant new.

new function() { ... >

Si nous avons plusieurs lignes de code qui créent un seul objet complexe, nous pouvons les encapsuler dans un constructeur, comme ceci :

let user = new function() {  this.name = "John";  this.isAdmin = false;  // ……用于用户创建的其他代码
  // 也许是复杂的逻辑和语句
  // 局部变量等};复制代码

Le constructeur ne peut pas être appelé à nouveau car il n'est enregistré nulle part, juste créé et appelé. Par conséquent, cette astuce vise à encapsuler le code qui construit un seul objet sans avoir besoin de le réutiliser ultérieurement.

Test de modèle de constructeur : new.target

Contenu avancé :

Le contenu de la syntaxe de cette section est rarement utilisé, sauf si vous le souhaitez comprenez tout, sinon vous pouvez simplement ignorer la syntaxe.

À l'intérieur d'une fonction, nous pouvons utiliser l'attribut new.target pour vérifier si elle a été appelée en utilisant new.

Pour les appels réguliers, il est vide. Pour les appels utilisant new, il est égal à la fonction :

function User() {
  alert(new.target);
}// 不带 "new"：User(); // undefined// 带 "new"：new User(); // function User { ... }复制代码

Il peut être utilisé à l'intérieur de la fonction pour déterminer si la fonction est passéenew. Le "mode constructeur" appelé par 🎜> est toujours le "mode régulier" qui n'est pas appelé par new.

Nous pouvons également faire en sorte que l'appel new fasse le même travail qu'un appel normal, comme ceci :

function User(name) {  if (!new.target) { // 如果你没有通过 new 运行我
    return new User(name); // ……我会给你添加 new
  }  this.name = name;
}let john = User("John"); // 将调用重定向到新用户alert(john.name); // John复制代码

Cette approche est parfois utilisée dans les bibliothèques pour rendre la syntaxe plus flexible. De cette façon, le programme fonctionnera indépendamment du fait que new soit utilisé ou non lorsque les gens appellent la fonction.

L'utiliser partout n'est cependant pas une bonne chose, car omettre le new rend difficile l'observation de ce qui se passe dans le code. Et grâce à new nous pouvons tous savoir que cela crée un nouvel objet.

Retour du constructeur

Normalement, un constructeur n'a pas d'instruction return. Leur travail consiste à écrire tous les éléments nécessaires dans this et à les convertir automatiquement en résultat.

Mais si cela a une instruction return, alors les règles sont simples :

• Si return renvoie un objet, renvoyez cet objet au lieu de this.
• Ignorer si return renvoie un type primitif.

En d'autres termes, return avec un objet renvoie cet objet, dans tous les autres cas, this est renvoyé.

Par exemple, ici return remplace this en renvoyant un objet :

function BigUser() {  this.name = "John";  return { name: "Godzilla" };  // <-- 返回这个对象}

alert( new BigUser().name );  // Godzilla，得到了那个对象复制代码

Voici un exemple où return est vide (ou on peut mettre un type primitif après, n'a aucun effet) :

function SmallUser() {  this.name = "John";  return; // <-- 返回 this}

alert( new SmallUser().name );  // John复制代码

Habituellement, les constructeurs n'ont pas d'instructions return. Nous mentionnons ici le comportement particulier des objets renvoyés principalement par souci d'exhaustivité.

Omettre les parenthèses

D'ailleurs, s'il n'y a pas de paramètres, on peut omettre les parenthèses après new :

let user = new User; // <-- 没有参数// 等同于let user = new User();复制代码

Omettre les parenthèses ici n'est pas considéré comme un "bon" chose"style", mais la spécification autorise cette syntaxe.

Méthodes dans les constructeurs

Utiliser des constructeurs pour créer des objets apporte une grande flexibilité. Un constructeur peut avoir des paramètres qui définissent comment l'objet est construit et ce qu'il faut y mettre.

当然，我们不仅可以将属性添加到 this 中，还可以添加方法。

例如，下面的 new User(name) 用给定的 name 和方法 sayHi 创建了一个对象：

function User(name) {  this.name = name;  this.sayHi = function() {
    alert( "My name is: " + this.name );
  };
}let john = new User("John");

john.sayHi(); // My name is: John/*
john = {
   name: "John",
   sayHi: function() { ... }
}
*/复制代码

类 是用于创建复杂对象的一个更高级的语法，我们稍后会讲到。

总结

• 构造函数，或简称构造器，就是常规函数，但大家对于构造器有个共同的约定，就是其命名首字母要大写。
• 构造函数只能使用 new 来调用。这样的调用意味着在开始时创建了空的 this，并在最后返回填充了值的 this。

我们可以使用构造函数来创建多个类似的对象。

JavaScript 为许多内置的对象提供了构造函数：比如日期 Date、集合 Set 以及其他我们计划学习的内容。

对象，我们还会回来哒！

在本章中，我们只介绍了关于对象和构造器的基础知识。它们对于我们在下一章中，学习更多关于数据类型和函数的相关知识非常重要。

在我们学习了那些之后，我们将回到对象，在 info:prototypes 和 info:classes 章节中深入介绍它们。

作业题

先自己做题目再看答案。

1. 两个函数 — 一个对象

重要程度：⭐️⭐️

是否可以创建像 new A()==new B() 这样的函数 A 和 B？

function A() { ... }function B() { ... }let a = new A;let b = new B;

alert( a == b ); // true复制代码

如果可以，请提供一个它们的代码示例。

2. 创建 new Calculator

重要程度：⭐️⭐️⭐️⭐️⭐️

创建一个构造函数 Calculator，它创建的对象中有三个方法：

• read() 使用 prompt 请求两个值并把它们记录在对象的属性中。
• sum() 返回这些属性的总和。
• mul() 返回这些属性的乘积。

例如：

let calculator = new Calculator();
calculator.read();

alert( "Sum=" + calculator.sum() );
alert( "Mul=" + calculator.mul() );复制代码

3. 创建 new Accumulator

重要程度：⭐️⭐️⭐️⭐️⭐️

创建一个构造函数 Accumulator(startingValue)。

它创建的对象应该：

• 将“当前 value”存储在属性 value 中。起始值被设置到构造器 startingValue 的参数。
• read() 方法应该使用 prompt 来读取一个新的数字，并将其添加到 value 中。

换句话说，value 属性是所有用户输入值与初始值 startingValue 的总和。

下面是示例代码：

let accumulator = new Accumulator(1); // 初始值 1accumulator.read(); // 添加用户输入的 valueaccumulator.read(); // 添加用户输入的 valuealert(accumulator.value); // 显示这些值的总和复制代码

相关免费学习推荐：JavaScript（视频）

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!