Maison > interface Web > js tutoriel > le corps du texte

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

伊谢尔伦
Libérer: 2017-07-20 15:37:56
original
1504 Les gens l'ont consulté

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;
	}
}
Copier après la connexion

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;
	}
}
Copier après la connexion

Ensuite, définissez un objet


a = new A(1, 2);
Copier après la connexion

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
Copier après la connexion

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;
Copier après la connexion

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();
Copier après la connexion

L'objet b a tous les membres de type A


console.log(b.add());  //3
Copier après la connexion

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));
Copier après la connexion

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
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!