Savez-vous ce que fait js lors de la création d'un objet ?

Préface

En JavaScript, un objet instance peut être créé via l'opérateur new, et cet objet instance hérite des propriétés et méthodes de l'objet d'origine. Par conséquent, l'importance de l'existence de new est qu'il implémente l'héritage en JavaScript, et ne se contente pas d'instancier un objet.

Le rôle du nouveau

Commençons par comprendre le rôle du nouveau à travers des exemples. Les exemples sont les suivants : new 的作用，示例如下：

function Person(name) {
  this.name = name
}
Person.prototype.sayName = function () {
  console.log(this.name)
}
const t = new Person('小明')
console.log(t.name)  // 小明
t.sayName()  // 小明

从上面的例子中我们可以得出以下结论：

• new 通过构造函数 Person 创建出来的实例对象可以访问到构造函数中的属性。

• new 通过构造函数 Person 创建出来的实例可以访问到构造函数原型链中的属性，也就是说通过 new 操作符，实例与构造函数通过原型链连接了起来。

构造函数 Person 并没有显式 return 任何值（默认返回 undefined），如果我们让它返回值会发生什么事情呢？

function Person(name) {
  this.name = name
  return 1
}
const t = new Person('小明')
console.log(t.name)  // 小明

在上述例子中的构造函数中返回了 1，但是这个返回值并没有任何的用处，得到的结果还是和之前的例子完全一样。我们又可以得出一个结论：

构造函数如果返回原始值，那么这个返回值毫无意义。

我们再来试试返回对象会发生什么：

function Person(name) {
  this.name = name
  return {age: 23}
}
const t = new Person('小明')
console.log(t)  // { age: 23 }
console.log(t.name)  // undefined

通过上面这个例子我们可以发现，当返回值为对象时，这个返回值就会被正常的返回出去。我们再次得出了一个结论：

构造函数如果返回值为对象，那么这个返回值会被正常使用。

总结：这两个例子告诉我们，构造函数尽量不要返回值。因为返回原始值不会生效，返回对象会导致 new 操作符没有作用。

实现 new

首先我们要清楚，在使用 new

function _new(fn, ...args) {
  const newObj = Object.create(fn.prototype);
  const value = fn.apply(newObj, args);
  return value instanceof Object ? value : newObj;
}

À partir des exemples ci-dessus, nous pouvons tirer les conclusions suivantes :

<. ul>

new L'objet instance créé via le constructeur Person peut accéder aux propriétés du constructeur.

new L'instance créée via le constructeur Person peut accéder aux propriétés de la chaîne de prototypes du constructeur, c'est-à-dire via les opérateurs new , les instances et les constructeurs sont connectés via la chaîne de prototypes.

Le constructeur Person ne renvoie explicitement aucune valeur (la valeur par défaut renvoie undefined), si nous quoi se passe-t-il s'il renvoie une valeur ?

function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function () {
  console.log(this.name);
};

const t = _new(Person, "小明");
console.log(t.name);  // 小明
t.sayName();  // 小明

Le constructeur dans l'exemple ci-dessus a renvoyé 1, mais cette valeur de retour n'est d'aucune utilité et le résultat est exactement le même que l'exemple précédent. Nous pouvons tirer une autre conclusion :

Si le constructeur renvoie la valeur d'origine, alors la valeur de retour n'a aucun sens.

Essayons ce qui se passe lorsque l'objet est renvoyé :

rrreee🎜Grâce à l'exemple ci-dessus, nous pouvons constater que lorsque la valeur de retour est un objet, la valeur de retour sera renvoyée normalement. Nous sommes encore une fois arrivés à une conclusion : 🎜

🎜Si la valeur de retour du constructeur est un objet, alors la valeur de retour sera utilisée normalement. 🎜

🎜Résumé : Ces deux exemples nous disent que les constructeurs doivent essayer de ne pas renvoyer de valeurs. Étant donné que le renvoi de la valeur d'origine ne prendra pas effet, le renvoi de l'objet empêchera le nouvel opérateur d'avoir aucun effet. 🎜

Pour implémenter new🎜🎜Tout d'abord, nous devons savoir ce que js fait lors de l'utilisation de l'opérateur new : 🎜🎜🎜js est créé en interne. object🎜🎜Cet objet peut accéder aux propriétés du prototype du constructeur, l'objet doit donc être connecté au constructeur🎜🎜Ceci à l'intérieur du constructeur est affecté au nouvel objet (c'est-à-dire qu'il pointe vers le nouvel objet)🎜🎜Retour la valeur d'origine doit être ignorée, l'objet renvoyé doit être traité normalement🎜🎜🎜Après avoir connu les étapes, nous pouvons commencer à implémenter la nouvelle fonction :🎜rrreee🎜L'exemple de test est le suivant :🎜rrreee🎜Ce qui précède concerne le rôle du nouvel opérateur en JavaScript et comment implémenter un nouvel opérateur. 🎜🎜

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!