Explication détaillée du code sur l'utilisation de la méthode constructeur pour créer une instance de classe d'objet JavaScript

Méthode constructeur

<script type="text/javascript"> 
//定义一个构造函数，用来生成对应的对象，可以类比Java中的构造函数 
function Person(name, age){ 

//当调用new Person的时候，在执行第一行代码前，先生成一个Person对象，并将对象在内存中的 
//索引赋值给this关键字，此时可以通过this关键字操作新生成的对象，如下面的添加属性或方法 

this.name = name; //this关键字不能少。为当前对象，即this关键字引用的对象的name属性赋值 
//，实际相当于为当前对象添加name属性后,再为其name属性赋值。 
this.age = age; 

this.showName = function(){ //为当前对象添加方法 
alert(this.name); 
} 
this.showAge = function(){ 
alert(this.age); 
} 

//将当前对象返回给赋值符号左边的变量（不必明确使用return） 
} 

var obj1 = new Person("Koji", 22); //生成一个Person对象 
var obj2 = new Person("Luo", 21); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Luo 
obj2.showAge(); //21 

</script>

La méthode constructeur est la même que la méthode usine et créera un objet fonction exclusif pour chaque objet. Bien entendu, ces objets fonctions peuvent également être définis en dehors du constructeur, de sorte que l'objet et la méthode soient indépendants l'un de l'autre. Méthode prototype : Cette méthode utilise l'attribut prototype de l'objet

<script type="text/javascript"> 
function Person(){} //定义一个空构造函数，且不能传递参数 

//将所有的属性的方法都赋予prototype属性 

Person.prototype.name = "Koji"; //添加属性 
Person.prototype.age = 22; 

Person.prototype.showName = function(){ //添加方法 
alert(this.name); 
} 

Person.prototype.showAge = function(){ 
alert(this.age); 
} 

var obj1 = new Person(); //生成一个Person对象 
var obj2 = new Person(); 

obj1.showName(); //Koji 
obj1.showAge(); //22 
obj2.showName(); //Koji 
obj2.showAge(); //22 

</script>

Lorsque l'objet Personne est généré, les attributs prototype sont attribués au nouvel objet. Ensuite, les propriétés et les méthodes sont partagées. Le premier problème avec cette méthode est que le constructeur ne peut pas transmettre de paramètres et que chaque objet nouvellement généré a une valeur par défaut. Deuxièmement, il n'y a pas de problème avec le partage de méthodes, mais il y a un problème avec le partage d'attributs lorsque l'attribut est un objet qui peut changer d'état.

<script type="text/javascript"> 
function Person(){} //定义一个空构造函数，且不能传递参数 

Person.prototype.age = 22; 
Person.prototype.array = new Array("Koji", "Luo"); 

Person.prototype.showAge = function(){ 
alert(this.age); 
} 

Person.prototype.showArray = function(){ 
alert(this.array); 
} 

var obj1 = new Person(); //生成一个Person对象 
var obj2 = new Person(); 

obj1.array.push("Kyo"); //向obj1的array属性添加一个元素 

obj1.showArray(); //Koji,Luo,Kyo 
obj2.showArray(); //Koji,Luo,Kyo 

</script>

Lorsque le code ci-dessus ajoute des éléments au tableau d'attributs de obj1 à obj1, les éléments de l'attribut de tableau d'obj2 sont également affectés. La raison en est que les attributs de tableau des objets obj1 et obj2 font référence. le même objet Array, alors changer cet objet Array affectera naturellement les propriétés d'une autre référence à l'objet Array

Méthode mixte constructeur/prototype

Utiliser le constructeur pour définir les propriétés de l'objet, utilisation Le prototype définit les méthodes de l'objet, afin que les propriétés soient privées et les méthodes partagées.

<script type="text/javascript"> 
function Person(name, age) { 
this.name = name; 
this.age = age; 
this.array = new Array("Koji", "Luo"); 
} 

Person.prototype.showName = function() { 
alert(this.name); 
} 

Person.prototype.showArray = function() { 
alert(this.array); 
} 

var obj1 = new Person("Koji", 22); //生成一个Person对象 
var obj2 = new Person("Luo", 21); 

obj1.array.push("Kyo"); //向obj1的array属性添加一个元素 

obj1.showArray(); //Koji,Luo,Kyo 
obj1.showName(); //Koji 
obj2.showArray(); //Koji,Luo 
obj2.showName(); //Luo 

</script>

Une fois les attributs privés, la modification de leurs attributs respectifs n'affectera pas les autres objets. Dans le même temps, les méthodes sont également partagées par divers objets. Sémantiquement, cela est conforme aux exigences de la programmation orientée objet.

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!