Récemment, j'ai lu en ligne l'expérience de quelqu'un lors d'un entretien avec Taobao, puis j'ai découvert qu'il y avait beaucoup de choses sur lesquelles je n'étais pas clair, j'ai donc écrit quelques articles pour approfondir ma compréhension de certains problèmes.
Une question mentionnée dans l'article est la suivante : comment JavaScript implémente-t-il l'héritage ?
Ci-dessous, j'expliquerai quelques méthodes et exemples que j'ai trouvés en ligne pour approfondir mon impression.
Nous savons que la fonction en JavaScript est polyvalente. En plus d'être utilisée pour les définitions de fonctions, elle peut également être utilisée pour les définitions de classes.
L'héritage en JavaScript est un peu étrange. Contrairement au C++ et à certains langages orientés objet, il n'a pas de modifications de contrôle d'accès telles que public et privé, et il n'y a pas d'implémentation ou d'autres symboles spécifiques pour indiquer l'héritage.
Concernant l'héritage des classes JavaScript, vous pouvez vous référer à l'exemple suivant.
Copiez le code comme suit :
<script type="text/javascript">
fonction Personne() {
//propriétés
this.Gender = "femelle";
this.Age = 18 ;
this.Words = "Silence";
// méthode
this.crier = fonction() {
alert("Happy! Méthode de la classe parent");
}
}
//Hériter
fonctionProgrammer() {
this.base = Personne ;
}
Programmer.prototype = nouvelle personne ;
//Ajouter de nouvelles méthodes aux sous-classes
Programmer.prototype.typeCode = function() {
alert("Je suis codeur ! Travailleur migrant en informatique, très mécontent. Méthode de sous-classe");
}
// Exemple d'appel
fonction direBonjour() {
var a = nouveau programmeur ();
alert(a.Gender); // Appeler les propriétés de la classe parent
a.shouting(); // Appel de la méthode de la classe parent
a.typeCode(); // Appel de la méthode de la sous-classe
}
ditesBonjour();
</script>
Dans l'exemple ci-dessus, une classe de personne est d'abord déclarée, qui contient certains attributs et méthodes, puis une classe de programmeur est déclarée, qui a un attribut de base. Cet attribut n'est pas nécessaire, mais pour des raisons de spécifications et pour rechercher des objets. l'avenir Toutes les classes héritées doivent être écrites, puis la classe personne est copiée dans l'objet prototype du programmeur (prototype), ainsi l'héritage de classe est réalisé.
Simuler quelques principes de classes et d'héritage en JavaScript
Dans les langages orientés objet, nous utilisons des classes pour créer un objet personnalisé. Cependant, tout en JavaScript est un objet, alors comment créer un objet personnalisé ?
Cela nécessite l'introduction d'un autre concept - le prototype. Nous pouvons simplement considérer le prototype comme un modèle. Les objets personnalisés nouvellement créés sont tous des copies de ce modèle (prototype) (en fait, pas une copie mais un lien. C'est juste que ce type de lien est invisible et donne l'impression qu'il s'agit d'une copie).
Regardons un exemple de création d'un objet personnalisé via un prototype :
Copiez le code comme suit :
//Constructeur
function Personne (nom, sexe) {
this.name = nom ;
this.sex = sexe ;
}
//Définissez le prototype de Person. Les propriétés du prototype peuvent être référencées par des objets personnalisés.
Personne.prototype = {
getName : fonction() {
renvoie this.name ;
},
getSex : fonction() {
renvoie this.sex ;
}
}
Ici, nous appelons la fonction Person un constructeur, qui est une fonction qui crée un objet personnalisé. On voit que JavaScript simule les fonctions des classes via des constructeurs et des prototypes.
Voici un exemple pour expliquer en détail le travail spécifique effectué par JavaScript lors de la création d'un objet personnalisé :
Copiez le code comme suit :
var zhang = new Person("ZhangSan", "homme");
console.log(zhang.getName()); // "ZhangSan"
var chun = new Person("ChunHua", "femme");
console.log(chun.getName()); // "ChunHua"
Lorsque le code var zhang = new Person("ZhangSan", "man") est exécuté, les choses suivantes sont réellement effectuées en interne :
Créez un objet vide (new Object()).
Copiez les attributs (paires clé-valeur) de Person.prototype dans cet objet vide (comme nous l'avons mentionné précédemment, l'implémentation interne n'est pas une copie mais un lien caché).
Transmettez cet objet au constructeur via le mot-clé this et exécutez le constructeur.
Attribuez cet objet à la variable zhang.
Tout le travail est fait.
Afin de prouver que le modèle de prototype n'est pas copié dans l'objet instancié, mais constitue un moyen de liaison, veuillez consulter le code suivant :
Copiez le code comme suit :
function Personne (nom, sexe) {
this.name = nom ;
this.sex = sexe ;
}
Personne.prototype.age = 20 ;
var zhang = new Person("ZhangSan", "homme");
console.log(zhang.age); // 20
// Remplace l'attribut age dans le prototype
zhang.âge = 19 ;
console.log(zhang.age); // 19
supprimer zhang.age ;
// Après avoir supprimé l'âge de l'attribut d'instance, cette valeur d'attribut est à nouveau obtenue à partir du prototype
console.log(zhang.age); // 20
Dans l'exemple ci-dessus, s'il est obtenu uniquement par copie, après avoir supprimé l'attribut age, l'objet n'existera pas. Cependant, l'attribut age dans l'exemple peut toujours être affiché, ou la valeur précédente sera écrasée, indiquant que nous. n'a supprimé que l'attribut du même nom dans la sous-classe, et l'attribut age de la classe parent existe toujours dans l'objet via un lien invisible.
Comment implémenter l’héritage simple en JavaScript ?
L'exemple suivant crée une classe d'employé Employee qui hérite de toutes les propriétés du prototype de Person.
Copiez le code comme suit :
function Employé (nom, sexe, ID employé) {
this.name = nom ;
this.sex = sexe ;
this.employeeID = employeID ;
}
// Pointez le prototype de Employee vers une instance de Person
// Étant donné que les instances de Person peuvent appeler des méthodes dans le prototype Person, les instances de Employee peuvent également appeler toutes les propriétés du prototype Person.
Employé.prototype = new Person();
Employee.prototype.getEmployeeID = function() {
renvoie this.employeeID ;
} ;
var zhang = new Employee("ZhangSan", "man", "1234");
console.log(zhang.getName()); // "ZhangSan
D'accord, voici quelques processus et méthodes spécifiques pour implémenter l'héritage en JavaScript.
Bien sûr, pour résumer, le mécanisme d'héritage en JavaScript est uniquement basé sur la simulation. Comparé à certains langages orientés objet, il est approximatif et présente quelques défauts. Cependant, en général, cela ne réduit toujours pas l'efficacité des développeurs front-end. . enthousiasme.