Discussion sur les objets JavaScript

Grâce à la flexibilité de JavaScript, chacun peut écrire du code selon ses propres habitudes. Il existe des méthodes de programmation fonctionnelle, ainsi que des littéraux d'objet qui sont largement utilisés aujourd'hui. En raison de l'émergence de la programmation orientée objet, la programmation fonctionnelle que JavaScript vient de faire. a également progressivement évolué vers la programmation en classe. Je vais maintenant expliquer brièvement plusieurs habitudes de programmation familières :

1. Objet littéral :

Voici le contenu cité : var personne = { nom: nul, setName:fonction(nom){ this.name = nom ; renvoie this.name ; }, getName:fonction(){ alert(ce.nom); } }

Une méthode de programmation avec des caractéristiques JavaScript. Elle contient le nom de l'attribut, les méthodes setName et getName en unités de classe. Il est relativement simple d'appeler la méthode person.setname('R'). les attributs et les méthodes de la personne ne sont pas tous privés, peuvent être appelés.

2.Mode d'appel du constructeur de prototype

Voici le contenu cité : var Personne = fonction(){ this.name = null ; } Person.prototype.setName = fonction(nom){ this.name = nom ; } Personne.prototype.getName = fonction(){ alert(ce.nom); }

C'est également une méthode de programmation très courante pour créer une classe Person, puis utiliser un prototype pour étendre la classe et ajouter des méthodes. La plus grande différence avec les littéraux d'objet est que lorsque vous appelez des méthodes de cette classe, vous devez d'abord utiliser new (similaire à Java). classes appelantes). var p = new Person();p.getName(); Si vous le créez directement sans utiliser new, une erreur se produira et cette erreur ne sera pas signalée et est difficile à trouver. vient de cela pointant vers Person.prototypel, et Person n'a pas de méthode setName.

3. Utilisez des fonctions anonymes pour la programmation fonctionnelle

Voici le contenu cité : (fonction(){ nom de la variable ; var setName = fonction(n){ nom = n; } window['person']['setName'] = setName; var getName = fonction(){ alerte(nom); } window['person']['getName'] = getName; })()

L'un des plus grands avantages de l'émergence des classes est qu'elle réduit l'apparition de variables globales. Mais si vous êtes encore habitué à la programmation fonctionnelle, cela n'a pas d'importance tant que vous créez une fonction anonyme et effectuez une fermeture. effectuez une programmation fonctionnelle. Pas besoin de vous soucier de l'apparence des variables globales. Comme vous pouvez le voir ci-dessus, le nom de la variable ne peut pas être appelé en dehors de la fonction anonyme. Vous pouvez ensuite utiliser des variables externes pour appeler des fonctions ou des variables internes. créer des variables privées et des méthodes privées.

4. Programmation de classe (je ne sais pas comment l'appeler)

Voici le contenu cité : var personne = fonction(){ nom de la variable = null ; retourner{ setName:fonction(n){ nom = n; }, getName:fonction(){ alerte(nom); } } }

Il est très similaire aux littéraux d'objet, sauf que cela est laissé de côté et que les méthodes et propriétés peuvent être rendues privées. L'appel de méthodes est fondamentalement le même que celui des littéraux d'objet.

5.Chaîne de méthodes

Voici le contenu cité : var Personne = fonction(){ this.name = null ; } Personne.prototype = { setName:fonction(nom){ this.name = nom ; rends ceci ; }, getName:fonction(){ alert(ce.nom); rends ceci ; } }

jQuery est la bibliothèque de chaînage de méthodes la plus classique. Si vous ne comprenez toujours pas ce qu'est le chaînage de méthodes, jetez un œil à cet exemple :

Voici le contenu cité : var p = nouvelle personne (); p.setName('Tom').getName().setName('Ray').getName();

Puisque chaque méthode se termine par return this ; une classe chaînée de méthodes est créée.

Ce sont les méthodes que je connais le mieux. Chacun a ses propres caractéristiques, il existe donc une infinité de méthodes. Cependant, j'aimerais explorer les questions suivantes :

1. À propos de ce pointeur

Ceci est utilisé lors de la création de plusieurs catégories, mais quel est son rôle ? En fait, cela joue un rôle important dans la réutilisation et l'héritage. Regardons d'abord un exemple d'héritage :
Créez d’abord la classe Person :

Voici le contenu cité : var Personne = fonction(){ this.name = null ; } Person.prototype.setName = fonction(nom){ this.name = nom ; } Personne.prototype.getName = fonction(){ alert(ce.nom); } Personne.prototype.getAge = fonction(){ var âge = this.age || alerte (âge); }

Créez ensuite une classe Children et intégrez toutes les méthodes et propriétés de Person :

Voici le contenu cité : var Enfants = fonction (âge) { this.name = null ; this.age = âge; } Children.prototype = new Person(); //Hériter des propriétés et méthodes de Person Children.prototype.ageJudge = function(){ //Ajout également une nouvelle méthode pour les enfants si(cet.âge > 18){ alert('adulte~'); } autre { alert('Moins de 18 ans~'); } } Children.prototype.getName = function(){ //Remplacer la méthode getName var à propos de = this.name + ' ' + this.age; alerte(à propos); } var tom = nouveaux enfants (12); var âges = tom.getAge(); //12 var juge = tom.ageJudge(); //Moins de 18 ans~ var setN = tom.setName('Tom'); var get = tom.getName(); //Tom 12

Il s'agit d'un héritage, puis nous examinons une simple réutilisation de fonction :

Voici le contenu cité : var SetColor = fonction(){ this.style.backgroundColor = '#000'; //cela pointe vers la fenêtre } document.body.onclick = SetColor; // Ceci pointe vers le corps à ce moment documnet.getElementById('color').onmouseout = SetColor; //cela pointe vers documnet.getElementById('color') Après avoir vu la fonction de ceci, je dois en avoir une nouvelle compréhension. Maintenant, j'ai une question, à savoir si cela doit être utilisé ou non. Regardons un exemple simple : var setColor = { init:fonction(obj){ this.obj = obj; //cela pointe vers setColor this.obj.onclick = this.color; }, couleur:fonction(){ this.style.backgroundColor = '#000'; //cela pointe vers obj } }

Dans une seule classe, cela pointe vers deux endroits, ce qui rend parfois les gens confus. Les gens qui viennent d'apprendre seront confus par cela et changeront légèrement la façon d'écrire du code :

Voici le contenu cité : var setColor = { init:fonction(obj){ setColor.obj = obj; setColor.obj.onclick = setColor.color; }, couleur:fonction(){ this.style.backgroundColor = '#000'; //Cela peut faciliter la réutilisation des méthodes } }

De cette façon, le code peut être plus clair.Par conséquent, lors de l'écriture du code, vous devez réfléchir à son utilisation future et à sa réutilisation. S'il est clair que l'héritage ou la réutilisation ne doivent pas être effectués, je pense personnellement que vous devriez le faire. évitez de l'utiliser autant que possible. Il existe un autre problème plus courant. Il est le suivant :

Voici le contenu cité : var Personne = fonction(){ this.name = null ; } Person.prototype.setName = fonction(nom){ this.name = nom ; } Person.setName('tom'); // Mauvaise façon : ceci dans la méthode setName pointera vers Person.prototypel, Person n'a pas de méthode setName

Comme mentionné précédemment, s'il n'est pas écrit sous la forme var p = new Person();p.setName('tom'); cela pointera directement vers Person.prototypel. Cette erreur ne se produira pas lors de la compilation ou de l'exécution. une erreur sera signalée. Parfois, cela provoquera des maux de tête. Ainsi, lors de l'écriture du code, je choisis toujours cela avec soin.

2. Encapsulation de classe

En Java, les méthodes ou propriétés d'une classe peuvent être définies comme privées, afin d'éviter les appels externes, mais JavaScript ne dispose pas d'un tel paramètre. Jetez un œil au code suivant :.

Voici le contenu cité : var personne = { nom: nul, init:fonction(nom){ this.setName(nom); }, setName:fonction(nom){ this.name = nom ; renvoie this.name ; } } personne.init('tom'); //tom

Dans cette classe, il y a un total de 2 méthodes, à savoir init et setName, et nous voulons uniquement exécuter setName depuis init, ou diverses méthodes qui y seront ajoutées à l'avenir, et ne voulons pas apparaître :

personne.setName('tom'); //tom

Appelez directement la méthode setName Pour être précis, vous souhaitez que la méthode setName soit privée et que l'attribut name soit privé. Cela empêche d'autres programmeurs d'appeler des méthodes que vous ne souhaitez pas appeler lors de l'utilisation de votre classe.
Alors, comment devrions-nous bien encapsuler les classes ? Essayez une autre méthode de programmation et voyez comment se déroule la version révisée :

Voici le contenu cité : var personne = fonction(){ nom de la variable = null ; var setName = fonction(n){ nom = n; renvoyer le nom ; } retourner{ init:fonction(n){ setName(n); } } }

De cette manière, les méthodes et propriétés initialement destinées à être privatisées peuvent être privatisées et ne peuvent pas être appelées directement de l'extérieur. Ceci est également réalisé en utilisant des fermetures. Cependant, cette méthode de programmation n'est pas facile à lire, surtout pour les novices. Il sera très difficile de voir ce type de code, et il prendra également plus de mémoire que les codes ordinaires.
D'accord, c'est tout pour l'instant. Je parlerai des fermetures et de la portée la prochaine fois que j'aurai le temps.