Page d'accueil>Tutoriel de conception de sites Web>Normalisation WEB

Discussion sur les objets JavaScript

Auteur：Eve Cole Date de mise à jour：2025-02-10 11:50:24

En raison de la flexibilité de JavaScript, tout le monde peut écrire du code en fonction de ses propres habitudes. progressivement commencé.

1. Objet littéral:

Ce qui suit est le contenu cité:

var personne = {
Nom: NULL,
setName: function (name) {
this.name = name;
Renvoie ce.name;
},
getName: function () {
alert (this.name);
}
}

Une méthode de programmation avec des fonctionnalités JavaScript, contient le nom d'attribut, la méthode setName et GetName dans l'unité de classe. Il n'est pas privé et peut être appelé.

2. Mode d'appel du constructeur prototype

Ce qui suit est le contenu cité:

var personne = fonction () {
this.name = null;
}
Personne.prototype.setname = fonction (name) {
this.name = name;
}
Personne.prototype.getName = function () {
alert (this.name);
}


Il s'agit également d'une méthode de programmation très courante. classe). L'erreur vient de ce pointant vers Person.prototype, et la personne n'a pas de méthode setName.

3. Utilisez des fonctions anonymes pour programmer des fonctions

Ce qui suit est le contenu cité:

(fonction(){
var name;

var setName = function (n) {
name = n;
}
fenêtre ['personne'] ['setName'] = setName;

var getName = function () {
alerte (nom);
}
fenêtre ['personne'] ['getName'] = getName;
}) ()

L'un des plus grands avantages de l'émergence des classes est qu'il réduit l'émergence de variables mondiales, mais si vous êtes toujours habitué à la programmation fonctionnelle, cela n'a pas d'importance. fonction à l'intérieur, et il n'est pas nécessaire de s'inquiéter de l'émergence de variables globales. et méthodes privées.

4. Programmation classique (je ne sais pas de quel nom c'est)

Ce qui suit est le contenu cité:

var personne = fonction () {
var name = null;
retourner{
setName: function (n) {
name = n;
},
getName: function () {
alerte (nom);
}
}
}

Il est très similaire aux littéraux d'objet, mais la différence est qu'il est mis à part et peut être des méthodes et des attributs privés.

5. Chaîne de méthode

Ce qui suit est le contenu cité:

var personne = fonction () {
this.name = null;
}
Personne.prototype = {
setName: function (name) {
this.name = name;
retourner ceci;
},
getName: function () {
alert (this.name);
retourner ceci;
}
}

JQuery est la bibliothèque de liens de méthode la plus classique.

Ce qui suit est le contenu cité:

var p = new personne ();
p.setName ('tom'). getName (). setName ('ray'). getName ();


Étant donné que la fin de chaque méthode est renvoyée;

Je suis plus familier avec ces méthodes.

1. À propos de ce pointeur

Ceci est utilisé lors de la création de différents types, mais quelle est cette fonction?
Créez d'abord la classe de personne:

Ce qui suit est le contenu cité:

var personne = fonction () {
this.name = null;
}
Personne.prototype.setname = fonction (name) {
this.name = name;
}
Personne.prototype.getName = function () {
alert (this.name);
}
Personne.prototype.getage = function () {
var age = this.age || '';
alerte (âge);
}

Créez ensuite une classe pour enfants et intégrez toutes les méthodes et propriétés de la personne:

Ce qui suit est le contenu cité:

var enfants = fonction (âge) {
this.name = null;
this.age = âge;
}
Enfants.prototype = new personne ();
Enfants.prototype.ageJudge = function () {// ajouter une nouvelle méthode pour les enfants
if (this.age> 18) {
alerte ('adulte ~');
} autre {
alert ('J'ai moins de 18 ans ~');
}
}
Enfants.prototype.getName = function () {// réécriture la méthode getName
var environ = this.name + '' + this.age;
alerte (environ);
}
var tom = nouveaux enfants (12);
var âges = tom.getage ();
var juge = tom.agejudge (); // inférieur à 18 ans ~ ~
var setn = tom.setname ('tom');
var get = tom.getName ();

Il s'agit de l'héritage, puis regardons une fonction simple réutilisation:

Ce qui suit est le contenu cité:

var setColor = function () {
this.style.backgroundcolor = '# 000';
}
document.body.onclick = setColor;
documentnet.getElementById ('Color'). OnMouseout = setColor;

Après avoir vu la fonction de cela, je dois avoir une nouvelle compréhension de cela.

var setColor = {
init: function (obj) {
this.obj = obj;
this.obj.onclick = this.color;
},
Couleur: fonction () {
this.style.backgroundcolor = '# 000';
}
}

Juste dans une classe, cela pointe vers deux endroits, et parfois cela rend les gens confus.

Ce qui suit est le contenu cité:

var setColor = {
init: function (obj) {
setColor.obj = obj;
setColor.obj.onclick = setColor.color;
},
Couleur: fonction () {
this.style.backgroundcolor = '# 000';
}
}

De cette façon, le code peut être plus clair. Évité autant que possible.

Ce qui suit est le contenu cité:

var personne = fonction () {
this.name = null;
}
Personne.prototype.setname = fonction (name) {
this.name = name;
}
Person.setName ('Tom');

Comme mentionné précédemment, si vous ne l'écrivez pas comme var p = new Person (); Il signalera une erreur.

2. Encapsulation de classe

Dans Java, les méthodes ou les propriétés de la classe peuvent être définies sur privé, afin que les appels externes puissent être évités.

Ce qui suit est le contenu cité:

var personne = {
Nom: NULL,
init: function (name) {
this.setName (nom);
},
setName: function (name) {
this.name = name;
Renvoie ce.name;
}
}
personne.init ('tom');

Dans cette classe, il existe 2 méthodes, à savoir init et setName.

Person.SetName ('Tom');

Appelez directement la méthode SetName.
Alors, comment devons-nous emballer la classe?

Ce qui suit est le contenu cité:

var personne = fonction () {
var name = null;
var setName = function (n) {
name = n;
nom de retour;
}
retourner{
init: function (n) {
setName (n);
}
}
}

De cette façon, nous pouvons dire que les méthodes et les attributs qui étaient initialement destinés à être privatisés sont privatisés et que l'extérieur ne peut pas être appelé directement. Pas facile à lire, en particulier pour les débutants.
D'accord, tout pour l'instant.

Articles connexes