Difficultés en JavaScript : explication détaillée des exemples de liaison de prototype et de constructeur

Objets et constructeurs JavaScript

Définissez un objet JavaScript comme celui-ci

var a = {
	x : 1,
	y : 2,
	add : function () {
		return this.x + this.y;
	},
	mul : function () {
		return this.x * this.y;
	}
}

De cette façon, vous définir une variable a En plus des deux membres publics x et y, cette variable a également deux fonctions (méthodes publiques) add et mul. Cependant, cette méthode de définition présente deux inconvénients :

1. Il est très gênant de générer des objets par lots. Si vous var b=a alors à chaque fois que vous modifiez les membres de b, les membres de a; sera modifié en même temps. En raison du mécanisme de référence de JavaScript

2 Si vous devez personnaliser certains membres à chaque fois que vous générez un objet, vous devez écrire l'opération d'affectation correspondante et augmenter le nombre de lignes. de code.

Ainsi, avant de définir un objet JavaScript, on peut d'abord définir un constructeur.

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

Ensuite, définissez un objet

a = new A(1, 2);

Le code ci-dessus semble simple, mais pour distinguer A partir des langages orientés objet comme le C++, A n'est pas la notion de « classe » au sens strict, car JavaScript n'a pas de classes, il appelle simplement le constructeur.

Maintenant, la question se pose : comment mettre en œuvre l'héritage ? C++ implémente clairement les trois fonctionnalités orientées objet que sont l'encapsulation, l'héritage et le polymorphisme. Cependant, pour un langage relativement grossier comme JavaScript, il n'existe pas de mécanisme d'héritage strict. Au lieu de cela, les méthodes suivantes sont utilisées pour le simuler.

Prototype JavaScript

Afin de pouvoir expliquer la fonction d'application ou d'appel ultérieure, le prototype est présenté ici. Le prototype est uniquement disponible pour Function.

Pour bien utiliser l'héritage, il faut d'abord comprendre pourquoi l'héritage est conçu ? Il ne s’agit rien de plus que « d’extraire les parties communes » pour parvenir à réutiliser le code.

Donc en JavaScript, les parties publiques sont également placées dans le prototype de Function.

Comparons deux exemples d'utilisation d'un prototype pour implémenter l'héritage

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

function B(x,y){
	
}

B.prototype=new A(1,2);

console.log(new B(3,4).add());　　//3

Dans cet exemple, le prototype de la sous-classe pointe vers un objet de classe A

Implémentons un autre exemple de B héritant de A :

function A() {
	
}

A.prototype = {
	x : 1,
	y : 2,
	add : function () {
		return this.x + this.y;
	},
	mul : function () {
		return this.x * this.y;
	}
}
A.prototype.constructor=A;

function B(){
	
}

B.prototype=A.prototype;
B.prototype.constructor=B;

L'objet prototype de B fait référence à l'objet prototype de A, car c'est une référence, donc si Quand L'objet prototype de B est modifié, l'objet prototype de A est également modifié, car essentiellement ils pointent tous vers un morceau de mémoire. Par conséquent, chaque fois que vous modifiez le prototype de type B, vous devez modifier manuellement le constructeur pour éviter toute confusion. Par rapport aux deux exemples, ce problème ne se produit pas dans l’exemple précédent car il n’y a pas de référence.

Créer un objet de type B

b=new B();

L'objet b a tous les membres de type A

console.log(b.add());  //3

Parce que chaque objet prototype a deux membres importants : constructeur et _proto_, le constructeur est essentiellement un pointeur de fonction, donc après l'exécution de B.prototype=A.prototype, le constructeur est écrasé, nous devons donc laisser le Le constructeur renvoie au constructeur de type B.

Liaison du constructeur JavaScript

Après avoir défini un constructeur de type A, définir un type B, puis à l'intérieur du constructeur de type B, le constructeur " Exécution embarquée " de type A .

function A(x, y) {
	this.x = x;
	this.y = y;
	this.add = function () {
		return this.x + this.y;
	}
	this.mul = function () {
		return this.x * this.y;
	}
}

function B(x, y, z) {
	A.apply(this, arguments);
	this.z = z;
}

console.log(new B(1,2,3));

La fonction apply est fondamentalement la même que la fonction call, et le constructeur de type A peut être exécuté à l'intérieur du constructeur de type B. Dans le même temps, vous pouvez également hériter de tous les membres de A.

Afficher les résultats :

Voici une formule : écrivez A.apply(this) dans le constructeur B, pour que l'objet construit par B puisse A tous les membres du constructeur A.

Lorsqu'il s'agit de postuler et d'appeler, un héritage multiple peut également être obtenu

function IA(){
	this.walk=function(){
		console.log("walk");
	}
}

function IB(){
	this.run=function(){
		console.log("run");
	}
}

function Person(){
	IA.apply(this);
	IB.apply(this);
}

var p=new Person();
p.walk();　　//walk    
p.run();　　//run

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!