Explication détaillée de la chaîne de prototypes d'héritage JavaScript et exemples d'utilisation de constructeurs empruntés

Chaîne de prototypes

Le moyen le plus simple d'implémenter l'héritage en JavaScript est d'utiliser la chaîne de prototypes pour pointer le prototype du sous-type vers l'instance du type parent, qui est, "subtype .prototype = new parent type();", la méthode d'implémentation est la suivante :

// 为父类型创建构造函数
function SuperType() {
  this.name = ['wuyuchang', 'Jack', 'Tim'];
  this.property = true;
}

// 为父类型添加方法
SuperType.prototype.getSuerperValue = function() {
  return this.property;
}

// 为子类型创建构造函数
function SubType() {
  this.test = ['h1', 'h2', 'h3', 'h4'];
  this.subproperty = false;
}

// 实现继承的关键步骤，子类型的原型指向父类型的实例
SubType.prototype = new SuperType();

// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}


/* 以下为测试代码示例 */
var instance1 = new SubType();
instance1.name.push('wyc');
instance1.test.push('h5');
alert(instance1.getSuerperValue());    // true
alert(instance1.getSubValue());      // false
alert(instance1.name);          // wuyuchang,Jack,Tim,wyc
alert(instance1.test);          // h1,h2,h3,h4,h5


var instance2 = new SubType();
alert(instance2.name);          // wuyuchang,Jack,Tim,wyc
alert(instance2.test);          // h1,h2,h3,h4

Vous pouvez voir que le code ci-dessus est un simple héritage implémenté via la chaîne de prototypes, Mais il y a encore quelques problèmes dans l'exemple de code de test. Je crois que les enfants qui ont lu mon article de blog "Explication de base du JS orienté objet, mode usine, mode constructeur, mode prototype, mode hybride, mode prototype dynamique" doivent savoir que le premier problème avec le code de la chaîne de prototypes est que le prototype de le sous-type est des instances du type parent, c'est-à-dire les propriétés du type parent contenues dans le prototype du sous-type, ce qui entraîne que les propriétés du prototype des valeurs de type référence sont partagées par toutes les instances. L'instance1.name.push('wyc'); du code ci-dessus peut prouver l'existence de ce problème. Le deuxième problème avec la chaîne de prototypes est que lors de la création d'une instance d'un sous-type, les paramètres ne peuvent pas être transmis au constructeur du supertype. Par conséquent, dans le développement réel, nous utilisons rarement la chaîne de prototypes seule.

Constructeurs d'emprunt

Afin de résoudre les deux problèmes existant dans la chaîne de prototypes, les développeurs ont commencé à utiliser une technique appelée constructeurs d'emprunt pour résoudre les problèmes existants dans le prototype problème de chaîne. L'idée d'implémentation de cette technologie est également assez simple. Il suffit d'appeler le constructeur du type parent au sein du constructeur du sous-type. N'oubliez pas qu'une fonction n'est rien d'autre qu'un objet qui exécute du code dans un environnement spécifique, les constructeurs peuvent donc être exécutés via les méthodes apply() ou call(). Le code est le suivant :

// 为父类型创建构造函数
function SuperType(name) {
  this.name = name;
  this.color = ['pink', 'yellow'];
  this.property = true;

  this.testFun = function() {
    alert('http://tools.jb51.net/');
  }
}

// 为父类型添加方法
SuperType.prototype.getSuerperValue = function() {
  return this.property;
}

// 为子类型创建构造函数
function SubType(name) {
  SuperType.call(this, name);
  this.test = ['h1', 'h2', 'h3', 'h4'];
  this.subproperty = false;
}

// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}


/* 以下为测试代码示例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun();            // http://tools.jb51.net/
alert(instance1.name);            // wuyuchang,Jack,Nick,hello
// alert(instance1.getSuerperValue());    // error 报错
alert(instance1.test);            // h1,h2,h3,h4,h5    
alert(instance1.getSubValue());        // false    
alert(instance1.color);            // pink,yellow,blue

var instance2 = new SubType('wyc');
instance2.testFun();            // http://tools.jb51.net/
alert(instance2.name);            // wyc    
// alert(instance2.getSuerperValue());    // error 报错
alert(instance2.test);            // h1,h2,h3,h4
alert(instance2.getSubValue());        // false
alert(instance2.color);            // pink,yellow

Vous pouvez voir que le constructeur du sous-type SubType dans le code ci-dessus appelle le supertype "SuperType.call(this, name) ;" Cela permet d'hériter des attributs et peut également transmettre des paramètres au type parent lors de la création d'une instance du sous-type, mais de nouveaux problèmes surviennent à nouveau. Vous pouvez voir que j'ai défini une méthode dans le constructeur du type parent : testFun, et une méthode dans le prototype du type parent : getSuperValue. Cependant, après avoir instancié le sous-type, vous ne pouvez toujours pas appeler la méthode getSuperValue définie dans le prototype du type parent. Vous ne pouvez appeler que la méthode constructeur du type parent : testFun. Cela revient à utiliser uniquement le modèle de constructeur lors de la création d'objets, ce qui rend la fonction non réutilisable. Compte tenu de ces problèmes, la technique de l’emprunt aux constructeurs est rarement utilisée seule.

Héritage combiné (chaîne de prototypes + constructeur emprunté)

Comme son nom l'indique, l'héritage composé est un modèle qui combine les avantages de la chaîne de prototypes et des constructeurs empruntés. L'implémentation est également très simple puisqu'il s'agit d'une combinaison, elle combine certainement les avantages des deux parties, c'est-à-dire que la chaîne de prototypes hérite de la méthode et que le constructeur hérite des propriétés. Le code spécifique est implémenté comme suit :

// 为父类型创建构造函数
function SuperType(name) {
  this.name = name;
  this.color = ['pink', 'yellow'];
  this.property = true;

  this.testFun = function() {
    alert('http://tools.jb51.net/');
  }
}

// 为父类型添加方法
SuperType.prototype.getSuerperValue = function() {
  return this.property;
}

// 为子类型创建构造函数
function SubType(name) {
  SuperType.call(this, name);
  this.test = ['h1', 'h2', 'h3', 'h4'];
  this.subproperty = false;
}

SubType.prototype = new SuperType();

// 在此处给子类型添加方法，一定要在实现继承之后，否则会在将指针指向父类型的实例，则方法为空
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}


/* 以下为测试代码示例 */
var instance1 = new SubType(['wuyuchang', 'Jack', 'Nick']);
instance1.name.push('hello');
instance1.test.push('h5');
instance1.color.push('blue');
instance1.testFun();            // http://tools.jb51.net/
alert(instance1.name);            // wuyuchang,Jack,Nick,hello
alert(instance1.getSuerperValue());      // true
alert(instance1.test);            // h1,h2,h3,h4,h5    
alert(instance1.getSubValue());        // false    
alert(instance1.color);            // pink,yellow,blue

var instance2 = new SubType('wyc');
instance2.testFun();            // http://tools.jb51.net/
alert(instance2.name);            // wyc    
alert(instance2.getSuerperValue());      // true
alert(instance2.test);            // h1,h2,h3,h4
alert(instance2.getSubValue());        // false
alert(instance2.color);            // pink,yellow

Le code ci-dessus hérite des propriétés du type parent via SuperType.call(this, name) et via SubType); prototype = new SuperType() ;Hérite de la méthode du type parent. Le code ci-dessus résout facilement les problèmes rencontrés par la chaîne de prototypes et les constructeurs empruntés, et est devenu la méthode d'héritage d'instance la plus couramment utilisée en JavaScript.

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!