Maison  >  Article  >  tutoriels informatiques  >  Comment JavaScript définit-il une méthode de type masquage qui peut être appelée en un clic

Comment JavaScript définit-il une méthode de type masquage qui peut être appelée en un clic

PHPz
PHPzavant
2024-01-13 12:12:05976parcourir

Comment javascript définit-il la méthode cliquée de la même manière que lorsqu'elle est appelée par hide ? Méthode prototype. . . . prototype

Par exemple, définissez une fonction pour le tableau Array

Array.prototype.in_array = fonction ($string) { pour (var i = 0; i {

for (i = 0; i retour vrai ;

}

}

retour faux ;

}

Vous pouvez simplement l'appeler

var a = new Array('a');

a.in_array('a');

Vérifiez s'il existe

Dans par exemple une chaîne

String.prototype.trim = fonction()

{

renvoie this.replace(/^s*|s*$/g, '');

}

Vous pouvez simplement l'appeler

var a = 'abcdefg';

a.trime();

Cela supprimera les espaces des deux côtés

Il en va de même pour les fonctions personnalisées. Créez d’abord une fonction et utilisez un prototype pour y ajouter des méthodes.

Quelles sont les manières de définir des objets en JavaScript

Plusieurs façons de définir des objets Javascript

1. Méthode Factory : créez d'abord l'objet, puis ajoutez des méthodes et des propriétés à l'objet. Après la fermeture, évitez d'utiliser l'opérateur new pour créer des objets. Bien que cette approche présente certains inconvénients, par exemple lors de la définition d'une méthode dans une fonction d'usine, une nouvelle fonction sera créée à chaque appel.

usine de fonctions (nom, personne, adresse, heure){

var tmp=nouvel objet;

tmp.name=nom;

tmp.person=personne;

tmp.address=adresse;

tmp.workTime=function(){

alert("L'heure à laquelle nous commençons à travailler est" + time);

}

retour tmp;

}

var factory1 = factory("drogues", 100, "Huashan Rd", 10);

var factory2 = factory("TCMdrugs", 100, "hongqiao Rd", 11);

factory1.workTime();

factory2.workTime();//Ici, factory1 et factory2 ont des méthodes différentes

Bien que ce problème puisse être amélioré de la manière suivante, il manque une bonne encapsulation

usine de fonctions (nom, personne, adresse, heure){

var tmp=nouvel objet;

tmp.name=nom;

tmp.person=personne;

tmp.address=adresse;

tmp.workTime=workTime();

retour tmp;

}

fonction workTime(){

alert("L'heure à laquelle nous commençons à travailler est" + this.time);

}

2. La méthode constructeur signifie utiliser le mot-clé this à l'intérieur du constructeur pour créer un objet, et il doit être instancié via l'opérateur new lors de son utilisation. Cependant, cette méthode présente le même problème que la méthode factory, c'est-à-dire qu'à chaque fois que le constructeur est appelé, un nouvel objet fonction sera créé, ce qui entraînera la création répétée de la fonction.

function construct(nom, personne, adresse, heure) { //Écrivez votre logique de code ici }

this.name=nom;

this.person=personne;

this.address=adresse;

this.workTime=function(){

alert("L'heure à laquelle nous commençons à travailler est" + this.time);

};

}

3. Méthode prototype : utilisez l'attribut prototype pour implémenter les attributs et les méthodes. Vous pouvez vérifier le type d'objet via instanceof, ce qui résout le problème de la création répétée de fonctions. Cependant, il convient de noter que les propriétés ne peuvent pas être initialisées en passant des paramètres.

fonction Voiture(){

}

Car.prototype.color = "rouge";

Car.prototype.doors = 4;

Car.prototype.mpg = 23;

Car.prototype.showColor = function() {

alerte(this.color);

};

var car1 = nouvelle voiture();

var car2 = nouvelle voiture();

Mais si vous rencontrez la situation suivante, quelque chose ne va pas encore

Car.prototype.drivers = ["mike", "poursuivre en justice"];

car1.drivers.push("matt");

alert(car1.drivers); //Sortie "mike,sue,matt"

alert(car2.drivers); // Sortie "mike, sue, matt"

drivers sont des pointeurs vers des objets Array, et les deux instances de Car font référence au même tableau.

4. Méthode mixte constructeur/prototype : solution à la méthode prototype

fonction Voiture (sColor, iDoors, iMpg) { this.color = sColor; this.doors = iDoors; ceci.mpg = iMpg; }

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.drivers = ["mike", "sue"];

}

Car.prototype.showColor = fonction () { // votre code }

alerte(this.color);

};

var car1 = nouvelle voiture("rouge", 4, 23);

var car2 = nouvelle voiture("bleu", 3, 25);

car1.drivers.push("matt");

alerte(car1.drivers);

alerte(car2.drivers);

5. Méthode de prototype dynamique : Il s'agit d'une méthode très recommandée. Elle évite les problèmes qui surviennent dans les méthodes précédentes et offre un style de codage plus convivial.

fonction Voiture (sColor, iDoors, iMpg) { this.color = sColor; this.doors = iDoors; ceci.mpg = iMpg; }

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.drivers = ["mike", "sue"];

if(typeof Car.initialized == "undefined"){

Car.prototype.showColor = fonction () { // votre code }

alerte(this.color);

};

Car.initialized = true;

}

}

var car1 = nouvelle voiture("rouge", 4, 23);

var car2 = nouvelle voiture("bleu", 3, 25);

car1.drivers.push("matt");

alerte(car1.drivers);

alerte(car2.drivers);

6. Méthode d'usine mixte : elle est quelque peu similaire à la méthode d'usine, mais utilise le nouveau mot-clé pour l'instanciation. Bien qu’elle présente les mêmes inconvénients que la méthode en usine, elle n’est pas recommandée.

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer