Comment créer un objet en JavaScript : 1. Utilisez le mot-clé new pour appeler le constructeur pour créer l'objet ; 2. Utilisez la méthode factory pour créer l'objet ; 3. Utilisez la méthode constructeur pour créer l'objet ; ; 4. Utilisez la méthode prototype pour créer l'objet ; 5. Utilisez la méthode mixte constructeur/prototype pour créer des objets ; 6. Utilisez la méthode prototype dynamique pour créer des objets ;
L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.
Nous pouvons utiliser les fonctionnalités grammaticales de JavaScript pour créer des objets avec l'idée declasses.
Méthode 1 : Méthode originale - utilisez le mot-clé new pour appeler le constructeur pour créer un objet
Le code est la suivante :
<script>
var obj = new Object();
obj.name = "Kitty";//为对象增加属性
obj.age = 21;
obj.showName = function () {//为对象添加方法
console.log(this.name);
};
obj.showAge = function(){
console.log(this.age);
};
obj.showName();
obj.showAge();
</script>
Copier après la connexion
Cette méthode génère un objet via le nouveau mot-clé, puis ajoute des propriétés et des méthodes en fonction des caractéristiques de JavaScript en tant que langage dynamique et construit un objet. Le this représente l'objet sur lequel la méthode est appelée.
Le problème avec cette méthode est le suivant : si nous devons créer des objets plusieurs fois, alors nous devons répéter le code plusieurs fois, ce qui n'est pas propice à la réutilisation du code.
Méthode 2 : Méthode Factory
Le code est le suivant :
<script>
function createObj(){
var obj = new Object();//创建对象
obj.name = "Kitty";
obj.age = "21";
obj.showName = function () {
console.log(this.name);
};
obj.showAge = function () {
console.log(this.age);
};
return obj;
}
var obj1 = createObj();
var obj2 = createObj();
obj1.showName();
obj1.showAge();
obj2.showName();
obj2.showAge();
</script>
Copier après la connexion
Bien que cette méthode implémente également la création d'objets, de la même manière, si vous devez créer des objets plusieurs fois et que le contenu des attributs est différent, vous devez également répéter le code plusieurs fois. Le taux de réutilisation du code doit être reconsidéré, puis le code peut être modifié pour augmenter le taux de réutilisation du code, et la méthode d'usine peut être modifiée pour transmettre les affectations de paramètres.
Le code amélioré est le suivant :
<script>
function createObj(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.showName = function () {
console.log(this.name);
};
obj.showAge = function(){
console.log(this.age);
};
return obj;
}
var obj1 = new createObj("Kitty","21");
var obj2 = new createObj("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>
Copier après la connexion
Bien que cette méthode puisse améliorer le réutilisation du code Efficacité, mais par rapport au concept de classes orienté objet, il y a un gros défaut. L'orientation objet souligne que les propriétés des objets sont privées, mais que les méthodes des objets sont partagées. Lorsque la méthode d'usine ci-dessus crée des objets, elle doit créer sa propre méthode privée pour chaque objet. En même temps, c'est un gaspillage de mémoire car des méthodes logiquement identiques sont créées pour chaque objet.
Le code amélioré est le suivant :
<script>
function createObj(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.showName = showName;
obj.showAge = showAge;
return obj;
}
function showName(){
console.log(this.name);
}
function showAge(){
console.log(this.age);
}
var obj1 = new createObj("Kitty","21");
var obj2 = new createObj("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>
Copier après la connexion
Ce qui précède est résolu en définissant plusieurs objets fonction. Il résout le problème privé des objets fonction détenus par différents objets. Désormais, toutes les méthodes objet contiennent des références aux deux fonctions ci-dessus. Mais de cette façon, les fonctions et les objets de l'objet sont indépendants les uns des autres, ce qui est incompatible avec l'idée orientée objet selon laquelle des méthodes spécifiques appartiennent à des classes spécifiques.
Méthode 3 : Méthode constructeur
Le code est le suivant :
<script>
function Person(name,age){
this.name = name;
this.age = age;
this.showName = function () {
console.log(this.name);
};
this.showAge = function () {
console.log(this.age);
};
}
var obj1 = new Person("Kitty","21");
var obj2 = new Person("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>
Copier après la connexion
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, afin que les objets et méthodes soient indépendants les uns des autres.
Le plus gros problème avec l'utilisation des constructeurs est que toutes les propriétés seront créées une fois pour chaque instance. Ceci est acceptable pour les propriétés numériques, mais ce n'est pas raisonnable si chaque instance de la méthode fonction doit être créée.
Pour créer une nouvelle instance de Person(), l'opérateur new doit être utilisé. Appeler un constructeur de cette manière passe en fait par les quatre étapes suivantes :
创建一个新对象；
将构造函数的作用域赋给新对象（因此this就指向了这个新对象）；
执行构造函数中的代码（为这个新对象添加属性）；
返回新对象。
方法四：原型方法
代码如下：
<script>
function Person(){} //定义一个空构造函数，且不能传递参数
//将所有的属性的方法都赋予prototype
Person.prototype.name = "Kitty";
Person.prototype.age = 21;
Person.prototype.showName = function (){
console.log(this.name);
};
Person.prototype.showAge = function (){
console.log(this.age);
};
var obj1 = new Person("Kitty","21");
var obj2 = new Person("Luo","22");
obj1.showName();//Kitty
obj1.showAge();//21
obj2.showName();//luo
obj2.showAge();//22
</script>
<script>
function Person(){} //定义一个空构造函数，且不能传递参数
//将所有的属性的方法都赋予prototype
Person.prototype.age = 21;
Person.prototype.array = new Array("Kitty","luo");
Person.prototype.showAge = function (){
console.log(this.age);
};
Person.prototype.showArray = function (){
console.log(this.array);
};
var obj1 = new Person();
var obj2 = new Person();
obj1.array.push("Wendy");//向obj1的array属性添加一个元素
obj1.showArray();//Kitty,luo,Wendy
obj2.showArray();//Kitty,luo,Wendy
</script>
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
