Prototypes JavaScript


Table des matières

    Afficher la table des matières


Tous les objets JavaScript héritent des propriétés et des méthodes à partir d'un prototype.


Dans le chapitre précédent, nous avons appris à utiliser un constructeur d'objet :

Exemple

function Person(first, last, age, eyecolor) {
   
this.firstName = first;
  this.lastName = last;
   
this.age = age;
   
this.eyeColor = eyecolor;
}

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>Using an object constructor:</p>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML =
"My father is " + myFather.age + ". My mother is " + myMother.age; 
</script>

</body>
</html>

Nous avons également appris que vous ne pouvez pas ajouter une nouvelle propriété à un constructeur d'objet existant :

Exemple

Person.nationality = "English";

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>You cannot add a new property to a constructor function.</p>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.nationality = "English";

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality; 
</script>

</body>
</html>

Pour ajouter une nouvelle propriété à un constructeur, vous devez l'ajouter au fonction constructeur :

Exemple

function Person(first, last, age, eyecolor) {
   
this.firstName = first;
   
this.lastName = last;
   
this.age = age;
   
this.eyeColor = eyecolor;
  this.nationality = "English";
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Objects</h1>

<p>Using an object constructor:</p>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
  this.nationality = "English";
}

const myFather = new Person("John", "Doe", 50, "blue");
const myMother = new Person("Sally", "Rally", 48, "green");

document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality + ". The nationality of my mother is " + myMother.nationality;
</script>

</body>
</html>


Héritage des prototypes

Tous les objets JavaScript héritent des propriétés et méthodes d'un prototype :

  • Les objets Date héritent de Date.prototype

  • Les objets Array héritent de Array.prototype

  • Les objets Person héritent de Person.prototype

Le Object.prototype se trouve en haut de la chaîne d'héritage du prototype :

Objets Date, objets Array et Person les objets héritent de Object.prototype.


Ajout de propriétés et de méthodes aux objets

Parfois, vous souhaitez ajouter de nouvelles propriétés (ou méthodes) à tous les objets existants d'un type donné.

Parfois, vous souhaitez ajouter de nouvelles propriétés (ou méthodes) à un objet constructeur.


Utilisation de la propriété prototype

La propriété JavaScript prototype vous permet d'ajouter de nouvelles propriétés à l'objet constructeurs :

Exemple

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
    this.eyeColor = eyecolor;
}

 Person.prototype.nationality = "English";

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p>The prototype property allows you to add new methods to objects constructors:</p>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.nationality = "English";

const myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"The nationality of my father is " + myFather.nationality; 
</script>

</body>
</html>

La propriété JavaScript prototype vous permet également d'ajouter de nouvelles méthodes aux objets constructeurs :

Exemple

function Person(first, last, age, eyecolor) {
    this.firstName = first;
    this.lastName = last;
    this.age = age;
  this.eyeColor = eyecolor;
}

 Person.prototype.name = function() {
    return this.firstName + " " + this.lastName;
};

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.name = function() {
  return this.firstName + " " + this.lastName
};

const myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"My father is " + myFather.name(); 
</script>

</body>
</html>

Modifiez uniquement vos propres prototypes. Ne modifiez jamais les prototypes de objets JavaScript standards.