Méthodes de simulation JavaScript pour implémenter les compétences d'héritage_javascript

L'exemple de cet article décrit la méthode de simulation JavaScript pour implémenter l'héritage. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Nous savons tous que JavaScript ne peut simuler et implémenter des « classes » qu'en OO, ce qui signifie qu'il n'y a pas d'héritage de classes en JavaScript. Nous ne pouvons simuler l'implémentation qu'en ajoutant ou en réécrivant des attributs dans l'objet d'origine.

Définissez d'abord une classe parent,

//父类
function ParentClass() {
 this.className = "ParentClass";
 this.auth = "Auth";
 this.version = "V1.0";
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}

1. Implémentation du prototype :

//子类
//1、prototype继承
function ChildClassByPrototype() {
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByPrototype.prototype = new ParentClass();
var cctest1 = new ChildClassByPrototype();
cctest1.parentClassInfo();
cctest1.classInfo();

Cette méthode est très simple, il suffit d'attribuer l'instance de la classe parent à l'attribut prototype de la sous-classe, et la sous-classe peut ensuite utiliser les méthodes et les attributs du père. Ici, nous utilisons en fait la fonctionnalité de recherche vers le haut dans la chaîne de prototypes, comme la méthode cctest1.parentClassInfo() dans cet exemple. JavaScript recherchera d'abord la méthode parentClassInfo() dans l'instance de ChildClassByPrototype. , il continue donc à rechercher la propriété prototype ChildClassByPrototype et la valeur de sa propriété prototype est une instance de ParentClass, qui possède la méthode parentClassInfo(), donc la recherche se termine et l'appel réussit.

2. Appliquer la mise en œuvre :

//2、apply继承
function ChildClassByApply() {
 ParentClass.apply(this, new Array());
 //ParentClass.apply(this, []);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}

Appliquer en JavaScript peut être compris comme remplacer la méthode B par la méthode A. Le premier paramètre est l'objet de la méthode B elle-même et le deuxième paramètre est un tableau. Les valeurs du tableau sont les paramètres qui doivent l'être. passé à la méthode A. List, si le paramètre est vide, c'est-à-dire qu'aucun paramètre n'est passé, il peut être transmis via new Array(), [].

3. Appel à la mise en œuvre du prototype :

//3、call+prototype继承
function ChildClassByCall() {
 ParentClass.call(this, arguments);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();

Call et apply ont des fonctions similaires, c'est-à-dire qu'ils remplacent tous deux la méthode B par la méthode A, mais les paramètres transmis sont différents. Le premier paramètre de la méthode d'appel est l'objet de la méthode B elle-même et les paramètres suivants n'ont pas besoin. doivent être enveloppés dans un tableau et doivent être directement livrés dans l'ordre. Puisque les fonctions sont presque les mêmes, pourquoi y a-t-il une phrase supplémentaire sur l'affectation du prototype ? En effet, la méthode d'appel implémente uniquement le remplacement de méthode et ne copie pas les attributs d'objet.

Chaque méthode a son environnement applicable, par exemple, si la classe parent a un constructeur paramétré :

function ParentClass(className, auth, version) {
 this.className = className;
 this.auth = auth;
 this.version = version;
 this.parentClassInfo = function () {
 return this.className + "\n" + this.auth + "\n" + this.version;
 }
}

Dans ce cas, le prototype n'est pas applicable, et postuler ou appeler peut être utilisé

 ;

function ChildClassByApply(className, auth, version) {
 ParentClass.apply(this, [className, auth, version]);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
function ChildClassByCall(className, auth, version) {
 ParentClass.call(this, arguments[0], arguments[1], arguments[2]);
 //ParentClass.call(this, className, auth, version);
 this.date = "2013-07-26";
 this.classInfo = function () {
  return this.parentClassInfo() + "\n" + this.date;
 }
}
ChildClassByCall.prototype = new ParentClass();

Instanciation :

var cctest2 = new ChildClassByApply("ParentClass", "Auth", "V1.0");
var cctest3 = new ChildClassByCall("ParentClass", "Auth", "V1.0");

Comment choisir entre postuler et appeler ? Dans l'héritage OO, la sous-classe hérite de la classe parent, elle doit donc également être le type de la classe parent. Autrement dit, ChildClassByCall et ChildClassByApply devraient également être de type ParentClass, mais si nous utilisons "instanceof" pour les détecter, nous constaterons que les sous-classes héritées via apply ne sont pas de type ParentClass. Par conséquent, nous vous recommandons d’utiliser un prototype d’appel pour simuler l’héritage. On dit que l'héritage de l'API Google Map utilise cette méthode.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.