JavaScript remplacer les méthodes

Disons que vous avez le code ci-dessous:

function A() {
    function modify(){
       x = 300;
       y = 400;
    }
    var c = new C();
}

function B() {
    function modify(){
       x = 3000;
       y = 4000;
    }
    var c = new C();
}


C = function () {
   var x = 10;
   var y = 20;

   function modify() {
      x = 30;
      y = 40;
   };

   modify();
   alert("The sum is: " + (x+y));
}

Maintenant la question est de savoir si il y a une voie dans laquelle je peux remplacer la méthode modify de C avec les méthodes qui sont dans A et B. En Java, vous utilisez le mot-clé super, mais comment pouvez-vous obtenir quelque chose comme ceci en JavaScript?

modify n'est pas une méthode mais une fonction imbriquée - il une différence entre ces deux...
En Java que vous utilisez le super mot clé pour accéder à la non-champs privés et les méthodes de la super-classe. Vous ne l'utilisez pas pour les remplacer.

InformationsquelleAutor Daniel Nastase | 2011-07-30

122

Edit: Il est désormais de six ans, depuis la première réponse a été écrite et beaucoup de choses ont changé!
- Si vous utilisez une version plus récente de JavaScript, éventuellement, compilé avec un outil comme Babel, vous pouvez l'utilisation réelle des classes.
- Si vous êtes à l'aide de la classe-comme composant constructeurs fournis par Angulaire ou Réagir, vous aurez envie de regarder dans la doc de ce cadre.
- Si vous utilisez ES5 et faire des "faux" classes à la main à l'aide de prototypes, la réponse ci-dessous est toujours aussi droite, comme il l'a toujours été.
Bonne chance!

JavaScript héritage semble un peu différent de Java. Voici comment le JavaScript natif de l'objet système recherche:
```
//Create a class
function Vehicle(color){
  this.color = color;
}

//Add an instance method
Vehicle.prototype.go = function(){
  return "Underway in " + this.color;
}

//Add a second class
function Car(color){
  this.color = color;
}

//And declare it is a subclass of the first
Car.prototype = new Vehicle();

//Override the instance method
Car.prototype.go = function(){
  return Vehicle.prototype.go.call(this) + " car"
}

//Create some instances and see the overridden behavior.
var v = new Vehicle("blue");
v.go() //"Underway in blue"

var c = new Car("red");
c.go() //"Underway in red car"
```
Malheureusement, c'est un peu moche et il n'a pas une très belle façon de "super": vous devez spécifier manuellement les parents des classes de la méthode que vous souhaitez appeler. En conséquence, il existe une variété de outils pour faire de la création de classes plus agréable. Essayez de regarder Prototype.js, Backbone.js ou un autre bibliothèque qui comprend une belle syntaxe pour faire de la programmation orientée objet en js.
- Sinon à l'aide d'un outil de "faire de la création de classes plus agréable" vous ne pourriez pas faire des classes à tous. Classique OO émulation en js obtient toujours en désordre.
- (pas de commentaire constructif) pour être le "bas niveau" de la langue dans les navigateurs monde est très laid pour aucune raison. Toujours en apprentissage, merci!
- Je crois que la place de la Voiture.prototype = new (Véhicule), ce qui devrait être la Voiture.prototype = Objet.créer(le Véhicule.prototype); non?
- est droit, voir javascript-l'héritage
- Une des raisons de la Voiture.prototype = new Véhicule(); est incorrect parce que de n'avoir rien à passer à des Véhicules() alors qu'il reçoit une couleur.
InformationsquelleAutor Adam
33

Puisque c'est un top hit sur Google, j'aimerais donner une mise à jour de réponse.

À l'aide de ES6 classes fait de l'héritage et redéfinition de méthode beaucoup plus simple:
```
'use strict';

class A {
    speak() {
        console.log("I'm A");
    }
}

class B extends A {
    speak() {
        super.speak();

        console.log("I'm B");
    }
}

var a = new A();
a.speak();
//Output:
//I'm A

var b = new B();
b.speak();
//Output:
//I'm A
//I'm B
```
La super mot clé se réfère à la classe parent lorsque utilisé dans la classe qui hérite. Aussi, toutes les méthodes de la classe parent sont liés à l'instance de l'enfant, de sorte que vous n'avez pas à écrire super.method.apply(this);.

Comme pour la compatibilité: l'ES6 tableau de compatibilité affiche uniquement les versions les plus récentes des acteurs majeurs de la prise en charge de classes (pour la plupart). V8 navigateurs en ont eu depuis le mois de janvier de cette année (Chrome et Opera), et Firefox, en utilisant le SpiderMonkey JS moteur, voir les classes le mois prochain avec leur Firefox 45 communiqué. Sur le côté mobile, Android n'est toujours pas en charge cette fonctionnalité, tandis que iOS 9, la libération il y a cinq mois, a une prise en charge partielle.

Heureusement, il y a Babel, une bibliothèque JS pour re-compilation de l'Harmonie code dans ES5 code. Les Classes, et beaucoup d'autres fonctionnalités utiles dans ES6 votre code Javascript beaucoup plus lisible et maintenable.
- Cette réponse mérite plus de crédit et est actuellement la bonne réponse.
InformationsquelleAutor Yotam Ofek
6

Une fois devrait éviter l'émulation classique OO et l'utilisation prototypique OO au lieu. Une belle bibliothèque utilitaire pour le prototype de l'OO est traits.

Plutôt que d'écraser les méthodes et mise en place de l'héritage des chaînes (il faut toujours privilégier une composition d'objet sur l'objet de l'héritage de), vous devez être le regroupement des fonctions réutilisables dans les traits et la création d'objets avec ceux-ci.

Live Exemple
```
var modifyA = {
    modify: function() {
        this.x = 300;
        this.y = 400;
    }
};

var modifyB = {
    modify: function() {
        this.x = 3000;
        this.y = 4000;
    }
};

C = function(trait) {
    var o = Object.create(Object.prototype, Trait(trait));

    o.modify();
    console.log("sum : " + (o.x + o.y));

    return o;
}

//C(modifyA);
C(modifyB);
```
- Vous ne répondez pas à la question. Cela devrait être un commentaire si quoi que ce soit.
- laissez-nous continuer cette discussion dans le chat
InformationsquelleAutor Raynos
3

modifier() dans votre exemple est une fonction privée, qui ne sera pas accessible à partir de n'importe où, mais à l'intérieur de votre A, B ou C de la définition. Vous devez le déclarer comme
```
this.modify = function(){}
```
C n'a pas de référence à ses parents, à moins que vous passez à C. Si C est mis en place pour hériter de A ou de B, il héritera de ses méthodes publiques (et pas de ses fonctions privées comme vous devez le modifier() définie). Une fois que C hérite des méthodes de son parent, vous pouvez remplacer les méthodes héritées.
- modifier est une fonction locale. Il n'est pas privé en javascript
- local/privé, n'est-ce pas la même chose, juste un autre terme?
- pas vraiment. Mais les gens ont la mauvaise habitude de mélanger les deux.
InformationsquelleAutor Alex Heyd

la méthode modify() que vous avez appelé dans la dernière est appelée dans un contexte global
si vous souhaitez remplacer modify() vous devez d'abord hériter A ou B.

Peut-être que vous essayez de faire ceci:

Dans ce cas C hérite A

function A() {
    this.modify = function() {
        alert("in A");
    }
}

function B() {
    this.modify = function() {
        alert("in B");
    }
}

C = function() {
    this.modify = function() {
        alert("in C");
    };

    C.prototype.modify(); //you can call this method where you need to call modify of the parent class
}

C.prototype = new A();

C.prototype.modify() aurait le mauvais this valeur. À savoir C.prototype au lieu de l'instance de c. Veuillez utiliser .call(this) mais alors, votre réponse est juste un doublon 🙂
merci de remarquer

InformationsquelleAutor lovesh

1

Pas, sauf si vous faites toutes les variables "public", c'est à dire en faire des membres de la Function soit directement ou par l'intermédiaire de la prototype propriété.
```
var C = function( ) {
    this.x = 10 , this.y = 20 ;
    this.modify = function( ) {
        this.x = 30 , this.y = 40 ;
        console.log("(!) C >> " + (this.x + this.y) ) ;
    } ;
} ;

var A = function( ) {
    this.modify = function( ) {
       this.x = 300 , this.y = 400 ;
       console.log("(!) A >> " + (this.x + this.y) ) ;
    } ;
} ;
    A.prototype = new C ;

var B = function( ) {
    this.modify = function( ) {
       this.x = 3000 , this.y = 4000 ;
       console.log("(!) B >> " + (this.x + this.y) ) ;
    } ;
} ;


new C( ).modify( ) ;
new A( ).modify( ) ;
new B( ).modify( ) ; 
```
- tester ici
Vous remarquerez quelques changements.

Plus important encore, l'appel à la soi-disant "super-classes" constructeur est maintenant implicite dans cette ligne:
```
<name>.prototype = new C ;
```
Les deux A et B auront désormais individuellement modifiables membres x et y qui ne serait pas le cas si nous avions écrit ... = C à la place.

Puis, x, y et modify sont "tout public" membres ainsi que l'attribution d'un autre Function à eux
```
 <name>.prototype.modify = function( ) { /* ... */}
```
va "remplacer" l'original Function de ce nom.

Enfin, l'appel à modify ne peut pas être fait dans le Function déclaration parce que l'appel implicite à la "super-classe" devait être exécutée de nouveau lorsque nous avons mis sur la soi-disant "super-classe" à la prototype propriété de la soi-disant "sous-classes".

Mais bon, c'est plus ou moins comment vous pourriez faire ce genre de chose en JavaScript.

HTH,

FK
- Il n'y a pas de point dans le <name>.prototype = new C; votre répétition tous les membres du prototype de toute façon
- Oui, il est. À savoir, toutes les hériter Objects serait partage le même membre dans C si vous n'avez pas instancier un C Objet. Ainsi, en changeant x dans A allait changer x dans C et donc changer x dans B. Ce qui est évidemment undesireable.
- vous avez manqué le point. Vous pouvez supprimer la ligne et le code continue de fonctionner
- Vous êtes absent de votre propre point j'ai peur. 😉 Nous voulons A et B d'hériter de C. Si cette ligne serait manquant, ce ne serait pas le cas. En fait, le seul prototype à la fois A ainsi que B serait "l'ombre" d'avoir accès à, dans ce cas, serait Object.prototype.
- regarder le code. A et B ne pas utiliser l'un des membres de C, dont le prototype. Donc, "hériter" de C est inutile. C'est parce que A et B redéfinir x,y et modify et donc de l'ombre tous C's membres. Quel est le point de mettre de C dans le prototype si vous n'êtes pas à l'utiliser? C'est du code mort.
- C'est artificiel et abstrait exemple. Je suppose que, dans un cas particulier C auraient membres hérités par A et B. Sinon, ce ne serait pas un problème concernant l'héritage de toute façon.
InformationsquelleAutor FK82

JS:

function A() {
    var c = new C();
	c.modify = function(){
		c.x = 123;
		c.y = 333;
	}
	c.sum();
}

function B() {
    var c = new C();
	c.modify = function(){
		c.x = 999;
		c.y = 333;
	}
	c.sum();
}


C = function () {
   this.x = 10;
   this.y = 20;

   this.modify = function() {
      this.x = 30;
      this.y = 40;
   };
   
   this.sum = function(){
	this.modify();
	console.log("The sum is: " + (this.x+this.y));
   }
}

A();
B();

InformationsquelleAutor nghien_net 89

Vous devez vous connecter pour publier un commentaire.