Maison  >  Article  >  interface Web  >  Méthodes d'implémentation de classes et d'instances en JavaScript

Méthodes d'implémentation de classes et d'instances en JavaScript

PHPz
PHPzoriginal
2016-05-16 16:18:211340parcourir

Cet article présente principalement les méthodes d'implémentation des classes et des instances en JavaScript. Il simule très intelligemment le processus d'implémentation des classes et des instances. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. 🎜>

Il n'y a pas de concept de classe parent, de sous-classe ou de classe et d'instance en JavaScript. Il s'appuie entièrement sur la chaîne de prototypes pour réaliser l'héritage, lors de la recherche des propriétés d'un objet, JavaScript parcourra la chaîne de prototypes vers le haut jusqu'à ce que. la propriété correspondante est trouvée. . Il existe plusieurs façons de faire en sorte que JavaScript simule les concepts de classe et d'instance.

1 Utilisez directement le constructeur pour créer l'objet et utilisez-le à l'intérieur du constructeur pour faire référence. à l'instance d'objet.

function Animal() {  
 this.name = "animal";  
 }  
 Animal.prototype.makeSound = function() {  
 console.log("animal sound");  
 }  
[Function]  
 var animal1 = new Animal();  
 animal1.name;  
'animal'  
 animal1.makeSound();  
animal sound
Regardez un autre exemple :

function Point(x, y) {  
 this.x = x;  
 this.y = y;  
 }  
 Point.prototype = {  
 method1: function() { console.log("method1"); },  
 method2: function() { console.log("method2"); },  
 }  
{ method1: [Function], method2: [Function] }  
 var point1 = new Point(10, 20);  
 point1.method1();  
method1  
 point1.method2();  
method2
Ci-dessus, spécifiez d'abord l'attribut prototype d'un objet constructeur. Créez ensuite une nouvelle instance de l'objet. objet, puis appelez le prototype spécifié dans la méthode.


2. Utilisez la méthode Object.create() pour créer un objet

var Animal = {  
 name: "animal",  
 makeSound: function() { console.log("animal sound"); },  
 }  
 var animal2 = Object.create(Animal);  
 animal2.name;  
'animal'  
 console.log(animal2.name);  
animal  
 animal2.makeSound();  
animal sound
Ceci. La méthode est plus simple que la méthode constructeur, cependant, les propriétés privées et les méthodes privées ne peuvent pas être implémentées, et les données ne peuvent pas être partagées entre les objets d'instance, et la simulation des classes n'est toujours pas assez complète.


3. Minimaliste proposé par le programmeur néerlandais Gabor de Mooij Approche minimaliste

var Animal = {  
 init: function() {  
 var animal = {};  
 animal.name = "animal";  
 animal.makeSound = function() { console.log("animal sound"); };  
 return animal;  
 }  
 };  
 var animal3 = Animal.init();  
 animal3.name;  
'animal'  
 animal3.makeSound();  
animal sound
Ne pas utiliser de prototype et cela, il suffit de personnaliser un init de constructeur. très simple.

var Cat = {  
 init: function() {  
 var cat = Animal.init();  
 cat.name2 = "cat";  
 cat.makeSound = function() { console.log("cat sound"); };  
 cat.sleep = function() { console.log("cat sleep"); };  
 return cat;  
 }  
 }  
 var cat = Cat.init();  
 cat.name; // 'animal'  
 cat.name2; // 'cat'  
 cat.makeSound(); // 类似于方法的重载  
cat sound  
 cat.sleep();  
cat sleep
Utilisation des attributs privés et des méthodes privées :

var Animal = {  
 init: function() {  
 var animal = {};  
 var sound = "private animal sound"; // 私有属性  
 animal.makeSound = function() { console.log(sound); };  
 return animal;  
 }  
 };  
 var animal4 = Animal.init();  
 Animal.sound; // undefined 私有属性只能通过对象自身的方法来读取.  
 animal.sound; // undefined 私有属性只能通过对象自身的方法来读取  
 animal4.makeSound();  
private animal sound
Tant que les attributs et méthodes ne sont pas définis sur l'objet animal, ils sont privés et ne peuvent être accessible par le monde extérieur.

Entre les classes et les instances, vous pouvez réaliser le partage de données

var Animal = {  
 sound: "common animal sound",  
 init: function() {  
 var animal = {};  
 animal.commonSound = function() { console.log(Animal.sound); };  
 animal.changeSound = function() { Animal.sound = "common animal sound changed"; };  
 return animal;  
 }  
 }  
 var animal5 = Animal.init();  
 var animal6 = Animal.init();  
 Animal.sound; // 可以视为类属性  
'common animal sound'  
 animal5.sound; // 实例对象不能访问类属性  
undefined  
 animal6.sound;  
undefined  
 animal5.commonSound();  
common animal sound  
 animal6.commonSound();  
common animal sound  
 animal5.changeSound(); // 修改类属性  
undefined  
 Animal.sound;  
'common animal sound'  
 animal5.commonSound();  
common animal sound  
 animal6.commonSound();  
common animal sound
Par exemple, Animal.sound est un attribut commun des classes et des instances, qui peut être considéré comme une classe. attributs et méthodes de classe.

Si une instance modifie l'attribut commun, alors les attributs communs de la classe et des autres instances sont également modifiés en conséquence.

Pour résumer, voici le concept et l'utilisation. de classe et d'instance simulées en JavaScript. J'espère que cet article sera utile à la programmation javascript de tout le monde. Pour plus de didacticiels connexes, veuillez visiter le

Tutoriel vidéo JavaScript !

Déclaration:
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