Constructeur JavaScript et nouvel opérateur (points clés, à lire absolument)

Cet article présente principalement le constructeur JavaScript et le nouvel opérateur. Il présente de manière exhaustive les points de connaissance grâce à la compréhension du nouvel opérateur, de l'interprétation du code, de l'analyse des clés, de la signification du nouveau, du résumé, etc. Vous pouvez consulter les étapes de fonctionnement spécifiques détaillées ci-dessous. explication, les amis intéressés peuvent s'y référer.

Les fonctions en JS peuvent être soit des constructeurs, soit appelées comme fonctions ordinaires. Lorsque vous utilisez new pour créer un objet, la fonction correspondante est le constructeur, et lorsqu'elle est appelée via un objet, c'est une fonction ordinaire.

Il existe trois façons de créer des fonctions ordinaires : la déclaration explicite, la définition anonyme et la nouvelle fonction().

Lorsqu'un nouvel objet est créé via new, la couche inférieure de JS pointe la chaîne prototype du nouvel objet vers l'objet prototype du constructeur, ainsi une chaîne prototype est établie entre le nouvel objet et l'objet fonction . L'objet peut accéder aux méthodes et propriétés du prototype de l'objet fonction.

Comme d'autres langages de haut niveau, Javascript possède également des constructeurs et de nouveaux opérateurs. Nous savons que new est utilisé pour instancier une classe et allouer un objet instance en mémoire. Mais en Javascript, tout est objet. Pourquoi devons-nous utiliser new pour générer des objets ? Cet article vous amènera à explorer le mystère du nouveau en Javascript...

1 Apprenez à connaître le nouvel opérateur

function Animal(name){
this.name = name;
}
 Animal.color = "black";
 Animal.prototype.say = function(){
console.log("I'm " + this.name);
 };
 var cat = new Animal("cat");

 console.log(
 cat.name, //cat
 cat.color //undefined
 );
 cat.say(); //I'm cat

 console.log(
 Animal.name, //Animal
 Animal.color //back
 );
 Animal.say(); //Animal.say is not a function

2. Interprétation du code

3. Analyse clé

var cat = new Animal("cat");

new Animal("cat") = {

var obj = {};

obj.__proto__ = Animal.prototype;

var result = Animal.call(obj,"cat");

return typeof result === 'object'? result : obj;
}

(1) <🎜. >Créer un objet vide obj ;

pointe le proto de l'objet obj vers le prototype de l'objet prototype du constructeur Animal A ce moment, la chaîne de prototypes de l'objet obj est établie. : obj->Animal.prototype ->Object.prototype->null

Appelez la fonction Animal dans l'environnement d'exécution de l'objet obj et passez le paramètre " chat". Équivalent à var result = obj.Animal("cat").

Examinez la valeur de retour renvoyée à l'étape 3. S'il n'y a pas de valeur de retour ou si une valeur non-objet est renvoyée, obj sera renvoyé en tant que nouvel objet ; la valeur de retour sera utilisée comme nouvel objet. L'objet est renvoyé. Après avoir compris son mécanisme de fonctionnement, nous savons que cat est en fait la valeur de retour du processus (4), nous en savons donc plus sur l'objet cat :

La chaîne prototype de cat est :

cat->Animal.prototype->Object.prototype->nullUn nouvel attribut est ajouté à cat : name

Après avoir analysé le processus de génération de cat, jetons un œil au résultat de sortie :

cat.name - > ; Dans le processus (3), l'objet obj génère l'attribut name. Par conséquent, cat.name est ici obj.name

cat.color -> cat recherchera d'abord sa propre couleur, et si elle n'est pas trouvée, elle recherchera le long de la chaîne de prototypes. nous recherchons uniquement la couleur de l'objet Animal qui est définie sur celui-ci, mais elle n'est pas définie sur sa chaîne de prototypes, elle est donc introuvable.

cat.say -> cat recherchera d'abord sa propre méthode say si elle n'est pas trouvée, elle recherchera le long de la chaîne de prototypes. Dans l'exemple ci-dessus, nous avons défini say sur le prototype Animal. dans la chaîne de prototypes, j'ai trouvé la méthode say sur .

De plus, this.name est également accessible dans la méthode say. Ceci fait ici référence à son appelant obj, donc la valeur de obj.name est affichée.

Pour Animal, c'est aussi un objet lui-même, il obéit donc également aux règles de recherche ci-dessus lors de l'accès aux propriétés et aux méthodes, donc :

Animal.color -> "black"

Animal.name -> "Animal", Animal recherche d'abord son propre nom et trouve le nom, mais ce nom n'est pas le nom que nous avons défini, mais une propriété intégrée de l'objet fonction.

Généralement, lorsqu'un objet fonction est généré, il aura un attribut de nom intégré et utilisera le nom de la fonction comme valeur attribuée (uniquement les objets fonction).

Animal.say -> Animal ne trouve pas la méthode say en lui-même, et recherchera également le long de sa chaîne de prototypes. Qu'est-ce que la chaîne de prototypes d'Animal ?

D'après les résultats du test : La chaîne de prototypes d'Animal est comme ceci :

Animal->Function.prototype->Object.prototype->null

Donc Animal The disons que la méthode n'est pas définie sur la chaîne de prototypes !

4. Le sens de l'existence du nouveau Après avoir fait connaissance avec le nouvel opérateur, revenons à la question évoquée au début : tout en JS Ce sont tous des objets, pourquoi devons-nous utiliser new pour générer des objets ?

要弄明白这个问题，我们首先要搞清楚cat和Animal的关系：

通过上面的分析，我们发现cat继承了Animal中的部分属性，因此我们可以简单的理解：Animal和cat是继承关系。

另一方面，cat是通过new产生的对象，那么cat到底是不是Animal的实例对象？ 我们先来了解一下JS是如何来定义“实例对象”的？

A instanceof B
如果上述表达式为true,JS认为A是B的实例对象，我们用这个方法来判断一下cat和Animal

cat instanceof Animal; //true
从执行结果看：cat确实是Animal实例，要想证实这个结果，我们再来了解一下JS中instanceof的判断规则：

var L = A.__proto__;
var R = B.prototype;
if(L === R)
return true;

如果A的proto 等价于 B的prototype，就返回true

在new的执行过程（2）中，cat的proto指向了Animal的prototype，所以cat和Animal符合instanceof的判断结果。

因此，我们认为：cat 是Animal的实例对象。

5、总结

在Javascript中, 通过new可以产生原对象的一个实例对象，而这个实例对象继承了原对象的属性和方法。因此，new存在的意义在于它实现了Javascript中的继承，而不仅仅是实例化了一个对象！

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

JS保留一位数字后移除非数字

JS DOM元素常见增删改查操作详解

JS保留两位小数输入数校验代码

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!