Maison > interface Web > js tutoriel > Objets et prototypes en JavaScript (1)

Objets et prototypes en JavaScript (1)

黄舟
Libérer: 2016-12-23 15:25:33
original
1076 Les gens l'ont consulté

Modèle d'usine

Nous savons que pour créer un objet nous pouvons utiliser le code suivant :

var user = new Object(); //使用new运算符创建一个对象
user.name = '念在三角湖畔'; //给对象添加属性
user.age = 22;
user.address = '湖北武汉';
alert(user.name + " " +user.age);//返回 '念在三角湖畔 湖北武汉'
Copier après la connexion

Créer des objets de cette manière est relativement simple et intuitif, et il est également un type JavaScript. La manière la plus basique de créer des objets. Mais il y a un problème. Si nous devons créer plusieurs objets, je dois alors écrire beaucoup de code répété. Par exemple, si nous voulons créer un autre objet user1, nous devons réécrire le code ci-dessus. Cela n'est pas approprié dans le processus de développement réel. S'il y a trop d'objets, la quantité de code sera considérablement augmentée.

Afin de résoudre ce problème, nous pouvons utiliser une méthode appelée modèle d'usine. Cette méthode consiste à résoudre le problème de l'instanciation d'objets qui génère beaucoup de code en double.

function create(name, age) {
  var obj = new Object(); 
  obj.name = name; 
  obj.age = age;
  obj.run = function () {
    return this.name +' '+ this.age;
  };
  return obj;
}
var obj1= create('ZXC', 10); //第一个实例
var obj2= create('CXZ', 20); //第二个实例
alert(obj1.run());
alert(obj1.run());
Copier après la connexion

Nous pouvons voir à partir du code ci-dessus que le modèle d'usine résout le problème de la grande quantité de duplication de code lors de l'instanciation, mais un autre problème se pose, c'est-à-dire le problème d'identification, nous ne pouvons tout simplement pas comprendre quoi ils le sont. Quel objet est l’instance. Par exemple,

alert(typeof obj1); //Object
alert(obj1 instanceof Object); //true
Copier après la connexion

Le code ci-dessus indique que box1 est un objet Object, mais nous ne pouvons pas savoir quel objet a été créé.

2. Constructeur (méthode constructeur)

Afin de résoudre le problème ci-dessus, nous pouvons utiliser la méthode constructeur pour créer des objets. La seule différence entre un constructeur et une fonction ordinaire réside dans la manière dont elle est appelée. Cependant, les constructeurs sont aussi des fonctions.

function User(name, age) { //构造函数模式
  this.name = name;
  this.age = age;
  this.run = function () {
    return this.name + ' '+this.age;   };
}
Copier après la connexion

Utilisez simplement l'opérateur new lors de la création d'un objet :

var user1= new User('ZXC', 25);
var user2= new User('CXZ', 22);
Copier après la connexion

Nous pouvons désormais détecter si user1 ou user2 appartient à User.

alert(user1 instanceof User);//true 
Copier après la connexion

On peut voir que l'utilisation de la méthode constructeur résout non seulement le problème de l'instanciation répétée, mais résout également le problème de la reconnaissance d'objets .

Le processus d'utilisation du constructeur est le suivant :

1. Lorsque le nouveau constructeur () est exécuté, new Object() est exécuté en arrière-plan ; 🎜>

 2. Donnez la portée du constructeur au nouvel objet.


 3. Exécutez le code dans le constructeur


 4. Renvoyez le nouvel objet directement en arrière-plan.


Examinons ensuite les problèmes de fonction à l'intérieur du constructeur. Si nous exécutons l'instruction suivante :

alert(user1.run==user2.run);//结果返回的是false
Copier après la connexion
, le résultat est faux, ce qui signifie que la méthode est en fait une adresse de référence. Si nous créons plusieurs objets à plusieurs reprises, les méthodes de chaque objet ouvriront un nouvel espace dans la mémoire, ce qui gaspillera plus d'espace. Pour résoudre ce problème, nous devons utiliser le partage d'attributs ou de méthodes d'instance. Nous continuerons à discuter de la résolution de ce problème dans le prochain article.

Ce qui précède est le contenu des objets et des prototypes en JavaScript (1). Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (m.sbmmt.com) !



Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal