Explication détaillée de l'utilisation des modèles de base et des méthodes d'amélioration de l'héritage prototypique JavaScript avec des exemples

En Javascript, chaque fonction a un attribut prototype pointant vers son propre prototype, et l'objet créé par cette fonction a aussi un attribut __proto__ pointant vers ce prototype, et le prototype de la fonction est un objet, donc cet objet aussi Il y aura un __proto__ pointant vers son propre prototype, et cela va couche par couche jusqu'au prototype de l'objet Object, formant ainsi une chaîne de prototypes.

Chaque fonction est un objet créé par la fonction Function, donc chaque fonction possède également un attribut __proto__ pointant vers le prototype de la fonction Function. Ce qu'il faut souligner ici, c'est que c'est l'attribut __proto__ de chaque objet qui forme réellement la chaîne de prototypes, et non l'attribut prototype de la fonction, ce qui est très important.

Mode de base :

var Parent = function(){
    this.name = 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(){
    this.name = 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent() ;
var child = new Child() ;
console.log(parent.getName()) ; //parent
console.log(child.getName()) ; //child

C'est le moyen le plus simple d'implémenter l'héritage prototypique : attribuez directement l'objet de la classe parent au prototype du constructeur de sous-classe, afin que l'objet du constructeur de sous-classe. sous-classe Vous pouvez accéder aux propriétés du prototype de la classe parent et du constructeur de la classe parent. Les avantages de cette méthode sont évidents : l'implémentation est très simple et ne nécessite aucune opération particulière. En même temps, les inconvénients sont également évidents si la sous-classe doit effectuer la même action d'initialisation que dans le constructeur de la classe parent. cela doit être fait dans le constructeur de la sous-classe. Répétez à nouveau l'opération dans la classe parent :

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    this.name = name || 'child' ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

Dans le cas ci-dessus, il vous suffit d'initialiser l'attribut name Si le travail d'initialisation continue d'augmenter, cela. la méthode est très peu pratique. Par conséquent, il existe la méthode améliorée suivante : Emprunter le constructeur

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = new Parent() ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

La méthode ci-dessus appelle le constructeur de la classe parent via apply dans le constructeur de sous-classe Pour effectuer la même chose travail d'initialisation, de sorte que quelle que soit la quantité de travail d'initialisation effectuée dans la classe parent, la sous-classe peut également effectuer le même travail d'initialisation. Mais il y a toujours un problème avec l'implémentation ci-dessus. Le constructeur de la classe parent est exécuté deux fois, une fois dans le constructeur de la sous-classe et une fois lors de l'attribution du prototype de la sous-classe, c'est très redondant, nous devons donc encore apporter une amélioration :.

var Parent = function(name){
    this.name = name || 'parent' ;
} ;
Parent.prototype.getName = function(){
    return this.name ;
} ;
Parent.prototype.obj = {a : 1} ;
var Child = function(name){
    Parent.apply(this,arguments) ;
} ;
Child.prototype = Parent.prototype ;
var parent = new Parent('myParent') ;
var child = new Child('myChild') ;
console.log(parent.getName()) ; //myParent
console.log(child.getName()) ; //myChild

De cette façon, nous n'avons besoin d'exécuter le constructeur de la classe parent qu'une seule fois dans le constructeur de la sous-classe, et en même temps, nous pouvons hériter des attributs dans le prototype de la classe parent . Ceci est également plus conforme à l'intention initiale du prototype, qui est de mettre le contenu qui doit être réutilisé dans le prototype.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!