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 :
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 :
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 :
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>
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
.
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.
La propriété JavaScript prototype
vous permet d'ajouter de nouvelles propriétés à l'objet constructeurs :
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 :
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.