En JavaScript, l'héritage est un mécanisme qui permet la création de nouvelles classes basées sur des classes existantes ; l'héritage offre une flexibilité pour les sous-classes et peut réutiliser les méthodes et les variables des classes parentes. Le processus d'héritage peut être réalisé à l'aide d'un prototype. chaînes et constructeurs.
L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.
L'héritage JavaScript est un mécanisme qui nous permet de créer de nouvelles classes basées sur des classes existantes ; il offre la flexibilité aux sous-classes de réutiliser les méthodes et les variables des classes parentes. Le processus d'héritage est le processus du général au spécial.
Il entretient une relation IS-A.
Le mot-clé extends est utilisé dans les expressions de classe ou les déclarations de classe.
En utilisant le mot-clé extends, nous pouvons obtenir toutes les propriétés et comportements des objets intégrés ainsi que des classes personnalisées.
Nous pouvons également implémenter l'héritage en utilisant une approche basée sur des prototypes.
Comment JavaScript implémente-t-il l’héritage ?
1. Chaîne prototype
Idée de base : utilisez des prototypes pour permettre à un type de référence d'hériter des propriétés et des méthodes d'un autre type de référence.
La relation entre les constructeurs, les prototypes et les instances : chaque constructeur possède un objet prototype, l'objet prototype contient un pointeur vers le constructeur et l'instance contient un pointeur interne vers l'objet prototype.
Exemple d'héritage d'implémentation de chaîne de prototype :
function SuperType() {this.property = true;}SuperType.prototype.getSuperValue = function() {return this.property;}function subType() {this.property = false;}//Inherited SuperTypeSubType.prototype = new SuperType ( );SubType.prototype.getSubValue = function (){return this.property;}var instance = new SubType();console.log(instance.getSuperValue());//true2. Emprunter un constructeur
Idée de base : appelez le constructeur de superclasse à l'intérieur du constructeur de sous-type, et le constructeur peut être exécuté sur l'objet nouvellement créé en utilisant les méthodes call() et apply().
exemple:
function SuperType() {this.colors = ["red","blue","green"];}function SubType() {SuperType.call(this);//Inherits SuperType}var instance1 = new SubType(); .colors.push("black");console.log(instance1.colors);//"red","bleu","vert","noir"var instance2 = new SubType();console.log(instance2 . couleurs);//"rouge", "bleu", "vert"3. Héritage combiné
Idée de base : un modèle d'héritage qui combine la technologie de chaînage de prototypes et d'emprunts aux constructeurs pour profiter du meilleur des deux mondes.
exemple:
function SuperType(name) {this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function() {console.log(this.name); }function SubType(name, age) {SuperType.call(this,name);//Attribut hérité this.age = age;}//Méthode héritée SubType.prototype = new SuperType();Subtype.prototype.constructor = Subtype; Subtype.prototype.sayAge = function() {console.log(this.age);}var instance1 = new SubType("EvanChen",18);instance1.colors.push("black");consol.log(instance1. couleurs);//"rouge","bleu","vert","noir"instance1.sayName();//"EvanChen"instance1.sayAge();//18var instance2 = new SubType("EvanChen666",20 );console.log(instance2.colors);//"rouge","bleu","vert"instance2.sayName();//"EvanChen666"instance2.sayAge();//204. Héritage prototype
L'idée de base : les prototypes vous permettent de créer de nouveaux objets basés sur des objets existants sans avoir à créer de types personnalisés.
L'idée d'héritage prototypique peut être illustrée par la fonction suivante :
function object(o) {function F(){}F.prototype = o;return new F();}exemple:
var personne = {nom:"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = object(person);anotherPerson.name = "Greg";anotherPerson.friends.push( "Rob");var yetAnotherPerson = object(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby","Court" ,"Van", "Rob", "Barbie"ECMAScript 5 standardise l'héritage prototypique via la nouvelle méthode Object.create(), qui accepte deux paramètres : un objet utilisé comme prototype du nouvel objet et un objet utilisé comme nouvel objet pour définir des propriétés supplémentaires.
var personne = {nom :"EvanChen",friends:["Shelby","Court","Van"];};var anotherPerson = Object.create(person);anotherPerson.name = "Greg";anotherPerson.friends. push("Rob");var yetAnotherPerson = Object.create(person);yetAnotherPerson.name = "Linda";yetAnotherPerson.friends.push("Barbie");console.log(person.friends);//"Shelby" ,"Cour", "Van", "Rob", "Barbie"5. Héritage parasitaire
L'idée de base : créer une fonction qui encapsule simplement le processus d'héritage, améliore l'objet d'une manière ou d'une autre en interne et renvoie l'objet comme s'il faisait réellement tout le travail.
exemple:
function createAnother(original) {var clone = object(original);clone.sayHi = function () {alert("salut");};return clone;}var person = {name:"EvanChen",friends:["Shelby ","Cour","Van"];};var anotherPerson = createAnother(person);anotherPerson.sayHi();///"salut"6. Héritage combinatoire parasitaire
Idée de base : hériter des propriétés en empruntant des fonctions et hériter des méthodes via la forme hybride de la chaîne de prototypes
Son modèle de base est le suivant :
function includeProperty(subType, superType) {var prototype = object(superType.prototype);//Créer un objet prototype.constructor = subType;//Améliorer l'objet subType.prototype = prototype;//Spécifier un objet}exemple:
function SuperType(name){this.name = name;this.colors = ["red","blue","green"];}SuperType.prototype.sayName = function (){alert(this.name);}; function SubType(nom,age){SuperType.call(this,name);this.age = age;}inheritProperty(SubType,SuperType);SubType.prototype.sayAge = function() {alert(this.age);}