SOO : Orienté objet JavaTutoriel de script avec exemple

Qu’est-ce que le concept OOPS dans JavaScénario?

Souvent, les variables ou les tableaux ne suffisent pas pour simuler des situations réelles. JavaScript vous permet de créer des objets qui se comportent comme des objets réels. Un étudiant ou une maison peuvent être des objets possédant de nombreuses caractéristiques uniques. Vous pouvez définir des propriétés et des méthodes pour vos objets afin de simplifier la programmation. Si votre objet est un étudiant, il aura des propriétés telles que le prénom, le nom et l'identifiant, ainsi que des méthodes comme calculer le rang ou changer l'adresse. Si votre objet est une maison, il aura des propriétés telles que le nombre de pièces, la couleur de la peinture et l'emplacement, ainsi que des méthodes comme calculer la surface ou changer le propriétaire.

Programmation orientée objet en JavaLe scénario repose donc sur quatre idées que vous découvrirez sur cette page : groupeping Intégrer l'état et le comportement dans un objet, réutiliser un modèle via un constructeur, partager des méthodes via le prototype et restreindre l'accès direct aux données internes. Si vous débutez avec ce langage, commencez par ceci. introduction à Javascénario puis revenez ici.

Comment créer un objet

Vous pouvez créer un objet comme ceci :

var objName = new Object();
objName.property1 = value1;
objName.property2 = value2;
objName.method1 = function()
{
  // line of code
}

OU, en utilisant la forme littérale de l'objet plus courte :

var objName = { property1: value1, property2: value2, method1: function()
{
  // lines of code
} };

Accéder aux propriétés et méthodes des objets

Vous pouvez accéder à une propriété d'un objet en utilisant la notation pointée, et vous pouvez appeler une méthode en ajoutant des parenthèses :

objectname.propertyname;   // read a property
objectname.methodname();   // call a method
objectname["propertyname"]; // bracket notation, useful for dynamic keys

Essayez cet exemple vous-même :

<html>
<head>
	<title>Objects!!!</title>
	<script type="text/javascript">
      var student = new Object();
      student.fName = "John";
      student.lName = "Smith";
      student.id = 5;
      student.markE = 76;
      student.markM = 99;
      student.markS = 87;
      student.calculateAverage = function()
      {
      	return (student.markE + student.markM + student.markS)/3;
      };
      student.displayDetails = function()
      {
        document.write("Student Id: " + student.id + "<br />");
        document.write("Name: " + student.fName + " " + student.lName + "<br />");
        var avg = student.calculateAverage();
        document.write("Average Marks: " + avg);
      };
		student.displayDetails();
	</script>
</head>
<body>
</body>
</html>

Sortie :

Student Id: 5
Name: John Smith
Average Marks: 87.33333333333333

Constructeur OUPS

Créer des objets un par un n'est pas très utile, car il faudrait répéter le même code pour chaque étudiant. C'est là qu'intervient le constructeur d'objet. Un constructeur est une fonction ordinaire appelée avec le constructeur. New mot-clé ; il définit un type d’objet qui peut être réutilisé pour chaque instance individuelle.

À l'intérieur d'un constructeur, ceci. fait référence au nouvel objet en cours de création, de sorte que chaque instance reçoit sa propre copie des valeurs transmises. Les valeurs associées, telles que les marques, sont souvent stockées dans un tableau afin qu'ils puissent être totalisés en une seule opération.

Essayez cet exemple vous-même :

<html>
<head>
	<script type="text/javascript">
		function Student(first, last, id, english, maths, science)
        {
          this.fName = first;
          this.lName = last;
          this.id = id;
          this.markE = english;
          this.markM = maths;
          this.markS = science;
          this.calculateAverage = function()
          {
         	 return (this.markE + this.markM + this.markS)/3;
          }
		  this.displayDetails = function()
		  {
            document.write("Student Id: " + this.id + "<br />");
            document.write("Name: " + this.fName + " " + this.lName + "<br />");
            var avg = this.calculateAverage();
            document.write("Average Marks: " + avg + "<br /><br />");
		  }
		}
        var st1 = new Student("John", "Smith", 15, 85, 79, 90);
        var st2 = new Student("Hannah", "Turner", 23, 75, 80, 82);
        var st3 = new Student("Kevin", "White", 4, 93, 89, 90);
        var st4 = new Student("Rose", "Taylor", 11, 55, 63, 45);
        st1.displayDetails();
        st2.displayDetails();
        st3.displayDetails();
        st4.displayDetails();
	</script>
</head>
<body>
</body>
</html>

Sortie :

Student Id: 15
Name: John Smith
Average Marks: 84.66666666666667

Student Id: 23
Name: Hannah Turner
Average Marks: 79

Student Id: 4
Name: Kevin White
Average Marks: 90.66666666666667

Student Id: 11
Name: Rose Taylor
Average Marks: 54.333333333333336

Parcourez les propriétés d'un objet

syntaxe:

for (variablename in objectname)
{
  // lines of code to be executed
}

Le pour/dans boucle est généralement utilisé pour parcourir les propriétés d'un objet. Vous pouvez donner n'importe quel nom à la variablemais le nom de l'objet doit correspondre à un objet existant. À chaque itération, la variable contient la propriété clé sous forme de chaîne de caractères, la valeur est donc lue avec une notation entre crochets, comme ceci : employé[x].

Essayez cet exemple vous-même :

<html>
<head>
	<script type="text/javascript">
		var employee={first:"John", last:"Doe", department:"Accounts"};
        var details = "";
        document.write("<b>Using for/in loops </b><br />");
        for (var x in employee)
        {
          details = x + ": " + employee[x];
          document.write(details + "<br />");
        }
	</script>
</head>
<body>
</body>
</html>

Sortie :

Using for/in loops
first: John
last: Doe
department: Accounts

Deux points sont à retenir. Une boucle for/in parcourt également les propriétés énumérables héritées par la chaîne de prototypes ; une garde telle que Objet.prototype.hasOwnProperty.call(employé, x) est souvent ajouté. Pour les objets de données simples, Objet.clés(employé) or Objet.entrées(employé) est généralement plus clair, car les deux ne renvoient que les propriétés propres à l'objet.

Quelle est la syntaxe des classes ES6 ? JavaScénario?

ECMAScript 2015, communément appelé ES6, a ajouté les classe Mot-clé. Une classe est un sucre syntaxique par rapport au système de prototypes déjà utilisé par la fonction constructeur ci-dessus : aucun nouveau modèle objet n'a été introduit. Exécution type d'étudiant sur une classe renvoie toujours la chaîne « fonction », et chaque méthode écrite dans le corps de la classe est installée sur Étudiant.prototypece qui signifie que toutes les instances partagent une seule copie de cette méthode au lieu que chaque objet possède la sienne.

La syntaxe gomme également certaines aspérités. Les corps de classe s'exécutent toujours en mode strict, appelant une classe sans New Au lieu de polluer silencieusement l'objet global, une exception TypeError est levée, et les accesseurs, mutateurs et membres statiques disposent d'un emplacement dédié. Il en résulte un code plus court qui exprime la même intention.

class Student {
  constructor(first, last, id, english, maths, science) {
    this.fName = first;
    this.lName = last;
    this.id = id;
    this.marks = [english, maths, science];
  }

  calculateAverage() {
    const total = this.marks.reduce((sum, m) => sum + m, 0);
    return total / this.marks.length;
  }

  displayDetails() {
    console.log("Student Id: " + this.id);
    console.log("Name: " + this.fName + " " + this.lName);
    console.log("Average Marks: " + this.calculateAverage().toFixed(2));
  }
}

const st1 = new Student("John", "Smith", 15, 85, 79, 90);
st1.displayDetails();
console.log(typeof Student);
console.log(st1.calculateAverage === Student.prototype.calculateAverage);

Sortie :

Student Id: 15
Name: John Smith
Average Marks: 84.67
function
true

Les deux dernières lignes le prouvent : la classe est toujours une fonction, et la méthode sur l'instance est exactement le même objet fonction stocké dans le prototype.

Fonction constructeur vs classe ES6

Comment implémenter l'héritage avec extends et super

L'héritage permet à un type spécialisé de réutiliser les propriétés et les méthodes d'un type plus général. Avant ES6, cela impliquait de configurer manuellement la chaîne de prototypes en trois étapes distinctes, et il était facile d'en oublier une.

function Person(fName, lName) {
  this.fName = fName;
  this.lName = lName;
}

Person.prototype.introduce = function () {
  return "I am " + this.fName + " " + this.lName;
};

function Student(fName, lName, id) {
  Person.call(this, fName, lName);   // 1. borrow the parent constructor
  this.id = id;
}

Student.prototype = Object.create(Person.prototype); // 2. link the chain
Student.prototype.constructor = Student;              // 3. repair constructor

var st = new Student("Kevin", "White", 4);
console.log(st.introduce());
console.log(st instanceof Person);

Sortie :

I am Kevin White
true

Le S'étend Le mot-clé effectue les trois étapes pour vous, et super offre un moyen simple d'atteindre le parent. Il existe deux utilisations distinctes de super:

• super(…) comme appel exécute le constructeur parent. Il n'est valide qu'à l'intérieur d'un constructeur dérivé et doit être exécuté avant que vous ne touchiez ceci., sinon une erreur de référence est levée.
• super.méthode() La recherche de propriété invoque la version parente d'une méthode que l'enfant a redéfinie, ce qui permet d'étendre un comportement au lieu de le remplacer.

class Person {
  constructor(fName, lName) {
    this.fName = fName;
    this.lName = lName;
  }

  introduce() {
    return "I am " + this.fName + " " + this.lName;
  }
}

class Student extends Person {
  constructor(fName, lName, id) {
    super(fName, lName);   // must run before "this" is used
    this.id = id;
  }

  introduce() {
    return super.introduce() + ", roll number " + this.id;
  }
}

const st = new Student("Hannah", "Turner", 23);
console.log(st.introduce());
console.log(st instanceof Student, st instanceof Person);
console.log(Object.getPrototypeOf(Student.prototype) === Person.prototype);

Sortie :

I am Hannah Turner, roll number 23
true true
true

La troisième ligne est la plus importante. Elle confirme que S'étend Le produit reproduisait exactement le lien prototype de la version manuelle construite à la main ; les classes ne remplaçaient donc pas l’enchaînement de prototypes. Elles masquaient simplement le code répétitif. Lorsqu’une propriété est lue à partir de stLe moteur examine l'instance, puis Étudiant.prototype, puis Personne.prototype, puis Objet.prototype, et s'arrête à la première correspondance ; ce chemin de recherche constitue la chaîne prototype.

Comment réaliser l'encapsulation avec des champs de classe privés

L'encapsulation signifie garderping Un état interne hors de portée, ne pouvant être modifié que par des méthodes que vous contrôlez. Depuis des années. JavaLes développeurs de scripts ont simulé cela avec un trait de soulignement initial, mais un nom tel que _équilibre Il ne s'agit que d'une convention et n'importe quel code peut la remplacer. Moderne JavaScript offre une véritable confidentialité : un champ dont le nom commence par # n'est accessible que depuis le corps de la classe qui la déclare.

Les terrains privés présentent trois avantages concrets :

• Elles doivent être déclarées dans le corps de la classe avant utilisation, ce qui documente l'état interne du type en un seul endroit.
• Ils sont invisibles à Objet.clés, JSON.stringify, et pour/dans, afin que l'état interne ne soit pas divulgué dans la sortie sérialisée.
• Modifier un champ privé depuis l'extérieur de la classe constitue une erreur de syntaxe, détectée avant même l'exécution du code, et non un bogue silencieux.

class BankAccount {
  #balance = 0;

  constructor(owner, opening) {
    this.owner = owner;
    this.#balance = opening;
  }

  deposit(amount) {
    if (amount <= 0) {
      return "Deposit must be positive";
    }
    this.#balance += amount;
    return this.owner + " balance: " + this.#balance;
  }

  get balance() {
    return this.#balance;
  }
}

const acc = new BankAccount("John", 500);
console.log(acc.deposit(250));
console.log(acc.deposit(-40));
console.log("Read via getter: " + acc.balance);
console.log("Own keys: " + Object.keys(acc));
console.log("JSON: " + JSON.stringify(acc));

Sortie :

John balance: 750
Deposit must be positive
Read via getter: 750
Own keys: owner
JSON: {"owner":"John"}

L'équilibre n'apparaît jamais dans Objet.clés ou dans la chaîne JSON, et le dépôt négatif est rejeté par la méthode au lieu de corrompre le champ. obtenir le solde() L'accesseur expose une vue en lecture seule, ce qui est la méthode habituelle pour publier un état privé en toute sécurité.

Maintenant que les concepts d'objets, de prototypes, de classes, d'héritage et d'encapsulation sont clairs, continuez à développer. Entraînez-vous à maîtriser les fondamentaux avec ces exemples. pratique JavaExemples de code de script, travaillez à travers Interactif JavaExercices de scénario, appliquer des classes à des algorithmes tels que tri rapide dans Javascénario, nettoyer la sortie en utilisant Javaformatage des chaînes de scriptet voyez comment statique typing modifications de la conception des objets dans TypeScript.

FAQ