Méthodes d'implémentation de classes et d'instances en JavaScript-js tutoriel-php.cn

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

PHPz

Libérer： 2018-09-29 16:20:23

original

1323 Les gens l'ont consulté

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;  
&#39;animal&#39;  
 animal1.makeSound();  
animal sound

Copier après la connexion

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

Copier après la connexion

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;  
&#39;animal&#39;  
 console.log(animal2.name);  
animal  
 animal2.makeSound();  
animal sound

Copier après la connexion

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;  
&#39;animal&#39;  
 animal3.makeSound();  
animal sound

Copier après la connexion

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; // &#39;animal&#39;  
 cat.name2; // &#39;cat&#39;  
 cat.makeSound(); // 类似于方法的重载  
cat sound  
 cat.sleep();  
cat sleep

Copier après la connexion

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

Copier après la connexion

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; // 可以视为类属性  
&#39;common animal sound&#39;  
 animal5.sound; // 实例对象不能访问类属性  
undefined  
 animal6.sound;  
undefined  
 animal5.commonSound();  
common animal sound  
 animal6.commonSound();  
common animal sound  
 animal5.changeSound(); // 修改类属性  
undefined  
 Animal.sound;  
&#39;common animal sound&#39;  
 animal5.commonSound();  
common animal sound  
 animal6.commonSound();  
common animal sound

Copier après la connexion

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 !