[partage] héritage de classes

**Willpower** · 29/12/2010, 13h59

Bonjour à tous. :-)
(mon premier poste)

J'ai décidé, il y a quelques jours, de créer de l'héritage en javascript. (juste pour le fun, car aucune utilité apparente.) J'ai donc commencé par chercher les différentes version existantes sur la toile mais celles que j'ai trouvé semblaient "mal" fonctionner. Je me suis donc dis que je pouvais m’atteler à la tâche sans craindre de refaire ce qui existe déjà.

Bref, voici mon code (qui devra certainement être amélioré).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
function searchInArray(arr,elem) {   
    if (Array.prototype.indexOf)  return arr.indexOf(elem); 
    for (var i in arr) if (arr[i] === elem)  return i;   
    return -1;   
}  
 
function __uber(fname,arg){ 
    var c = arguments.callee; 
    while(c.caller != null && typeof(c.caller.from)=="undefined") 
        c = c.caller;     
    if(c.caller!=null) 
        var parentIndex = searchInArray(this.constructor.herited,c.caller.from)-1; 
    else 
        var parentIndex = this.constructor.herited.length-1;     
    while(parentIndex>=0 && !this.parentFN[this.constructor.herited[parentIndex]]  )  
        parentIndex--; 
    if(parentIndex < 0)  
        throw fname+"() not found in parent constructors of current object."; 
    var func = this.parentFN[this.constructor.herited[parentIndex]][fname]  ; 
    var arg = arg || []; 
    return func.apply(this,arg); 
}
 
function __construct(obj){ 
	if(__construct.caller!=obj.constructor) return; // prevent from recursive calls
    for(var i=0;i<obj.constructor.herited.length;i++){// for(var i in obj.constructor.herited) will call Array.prototype and Object.prototype functions
        try{ obj.constructor.herited[i].apply(obj,__construct.caller.arguments); } 
            catch(err) { throw "error to calling parent constructor : "+i+" ["+err+"]"; } 
        try{ __copyFunctions(obj,obj.constructor.herited[i]); } 
             catch(err) { throw "error to copying parent functions of : "+i+" ["+err+"]"; } 
    } 
}
 
function __copyFunctions(obj,constructorParent){ 
    obj.parentFN = obj.parentFN || {}; 
    obj.parentFN[constructorParent] = {}; 
    for(var i in obj) if(typeof(obj[i])=='object' || typeof(obj[i])=='function'){ 
        obj.parentFN[constructorParent][i] = obj[i]; 
        obj.parentFN[constructorParent][i].from = constructorParent;  
    } 
}
 
Function.prototype.inherits = function(Parent){ 
    if(this.herited) 
        eval("var newF = "+this.toString()); // newF = clone( this ); -> change on newF.prototype will not affect this.prototype 
    else{ 
        var s = this.toString(); 
        var b = s.indexOf("{")+1; 
        eval("var newF = "+s.substring(0,b)+"__construct(this);"+s.substring(b,s.length)); 
    } 
    for(var i in Parent.prototype)  
        newF.prototype[i] = Parent.prototype[i];  
    for(var i in this.prototype)  
        newF.prototype[i] = this.prototype[i]; 
    newF.herited = (this.herited?this.herited.slice(0):[]); 
    var H = (Parent.herited?Parent.herited.slice(0):[]) //  = parent.herited[] 
    H.push(Parent); //  = parent.herited[] + parent 
    newF.herited = H.concat(newF.herited) //  = parent.herited[] + parent + this.herited[] 
    newF.name = newF.name || this.toString().substring(9,this.toString().indexOf('(')); // define Function.name property for IE  || it's useless
    //\\ this.name =  this.name || this.toString().substring(9,this.toString().indexOf('('));
	//\\ if(this.name!="(")  // the next line will don't work on unamed function 
    //\\ 	eval(this.name+" = newF"); // uncomment thoses lines to overwrite "this" function, then when you call B.inherits(A) that'll make : B = newF;  
	newF.prototype.uber = __uber;
    return newF; 
};

Et voici un bout de code pour le tester sommairement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
var alert = function(val){document.write(val,"<hr>");};
 
function A(){this.a=1;this.aa=function(){alert("aa");};this.obj={val:97};this.hard=function(c){alert("a.hard: "+c);};} 
A.prototype.fun = 11;
function B(name){this.b=2;this.bb=function(){alert("bb");};this.name=name;this.hard=function(v){alert("b.hard: "+v);this.uber("hard",arguments);};} 
function O(){this.o=3;this.oo=function(){alert("oo");};} 
function H(){this.h=4;this.aa=function(){alert("hh");};this.oo=function(){alert("hh");};} 
H.prototype.fun = 22;
var B = B.inherits(A); 
var H = H.inherits(B); 
var H = H.inherits(O); 
 
var h = new H("john smith"); 
 
 
 
alert("=============== FOR EACH IN ( h ) ===============");
for(var i in h)    alert(i+": "+h[i]); 
// a: 1 
// b: 2 
// o: 3 
// h: 4 
// func aa : alert hh 
// func bb : alert bb 
// func oo : alert hh 
// parentFN :  ############### object
// obj :    object
// name : "john smith" 
// uber :  ############# function
 
// overwrited functions 
alert("=============== OVERWRITED FUNCTIONS ===============");
h.aa(); // hh  
h.oo(); // hh 
alert("=============== SUPER/ORIGINAL FUNCTIONS ===============");
// super functions who been overwrited 
h.uber("aa"); // aa 
h.uber("oo"); // oo 
alert("=============== HERITED FUNCTIONS ===============");
// herited function 
h.bb(); // bb 
alert("=============== OBJECTS FROM 2 DIFFERENT INSTANCES ===============");
// test if object1.obj != object2.obj
var h2 = new H(); 
h2.obj.val++; 
alert(h2.obj.val); // 98 
alert(h.obj.val); // 97 
alert("=============== PARENTS PROTOTYPE AREN'T MODIFIED ON CHANGE OF CHILD PROTOTYPE ===============");
var a = new A();
alert(a.fun);
alert(h.fun);
alert("=============== FINAL TEST ===============");
h.hard("Happy End");

Voila, j'attend vos opinions avec impatience : Ca ne sert à rien ? Ca ne fonctionne pas ? Ca existe deja ? C'est une bonne idée à améliorer ? Suggestions ?

Bonne lecture et merci pour votre attention.

PS: code peu commenté mais j'ai essayé de le faire lisible .. puis y'a les tests pour le resultat. Car c'est ce qui compte in fine.

**sekaijin** · 02/01/2011, 18h25

ça existe déjà

il existe des dizaines d'implémentations de la notion de classes en javascript

je rappelle que JS est un langage à objet orienté prototype
et l'exploitation de cette caractéristique est très efficace alors plutôt que réinventer la roue je t'invite à comprendre et à manipuler la notion de prototype tu découvrira que nombre de notion introduite avec les langages à objet orienté classe n'ont pas de raison d'être en javascript car le langage offre des solutions simples et élégantes.

combiné au fait que js est un langage dynamique on obtient des capacités étonnantes

A+JYT

**SpaceFrog** · 02/01/2011, 19h25

rien que ça j'en ai des boutons ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var alert = function(val){document.write(val,"<hr>");};

**Willpower** · 11/01/2011, 17h53

Envoyé par sekaijin

ça existe déjà

il existe des dizaines d'implémentations de la notion de classes en javascript

je rappelle que JS est un langage à objet orienté prototype
et l'exploitation de cette caractéristique est très efficace alors plutôt que réinventer la roue je t'invite à comprendre et à manipuler la notion de prototype tu découvrira que nombre de notion introduite avec les langages à objet orienté classe n'ont pas de raison d'être en javascript car le langage offre des solutions simples et élégantes.

combiné au fait que js est un langage dynamique on obtient des capacités étonnantes

A+JYT

Tous les exemples qu'ils m'aient été donné de trouver sur le net étaient plus que primaires, ne copiaient pas les objets de l'objet (juste des référence), instancié des objet parent pour copier des prototype alors qu'aucun objet enfant n'était instancié, des problèmes avec "instanceof" et moultes autres bugs selon les version. (et pour les rares qui implémentent la fonction uber/super ... elle avait souvent du mal dès l'héritage de plus d'une classe).

Envoyé par SpaceFrog

rien que ça j'en ai des boutons ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var alert = function(val){document.write(val,"<hr>");};

heu .... en même temps, c'est juste dans la partie "test". (facebook aussi redéfini "alert").

bref, j'ai complètement retravaillé/nettoyé ma classe dont voici une nouvelle version : (ils manquent encore qqes trucs et n'est peut-être pas encore parfaite mais voilà)

http://www.borisdessy.com/

Merci d'avance pour vos avis/suggestions/améliorations.

**nault** · 11/01/2011, 18h14

tu serait surement intéressé a jeter un coup d'oeil a http://javascript.crockford.com/inheritance.html

**Willpower** · 11/01/2011, 18h27

Envoyé par nault

tu serait surement intéressé a jeter un coup d'oeil a http://javascript.crockford.com/inheritance.html

oui, une des versions les moins pourris que j'ai trouvé sur la toile, je ne me rappelle plus de tous les bugs mais déjà test :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function A(){this.obj = {val:1};alert("do something here");}
function B(){}
B.inherits(A);
 
var b1 = new B();
var b2 = new B();
 
b1.obj.val++;
alert(b2.obj.val); // 2 -> au lieu de 1

ça instancie un seul objet A .... pour les 2 objets B
et si on n'instanciait aucun objet B .. ça instancierait malgré tout un objet A

et il me semble qu'il y avait aussi des bugs avec la fonction "uber" sur l'heritage de plus d'une classe ... mais j'ai plus ça en tête.

edit:
http://www.borisdessy.com/
vs
http://www.borisdessy.com/crock.html

**Willpower** · 11/01/2011, 19h32

Envoyé par Willpower

oui, une des versions les moins pourris que j'ai trouvé sur la toile, je ne me rappelle plus de tous les bugs mais déjà test :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function A(){this.obj = {val:1};alert("do something here");}
function B(){}
B.inherits(A);
 
var b1 = new B();
var b2 = new B();
 
b1.obj.val++;
alert(b2.obj.val); // 2 -> au lieu de 1

ça instancie un seul objet A .... pour les 2 objets B
et si on n'instanciait aucun objet B .. ça instancierait malgré tout un objet A

et il me semble qu'il y avait aussi des bugs avec la fonction "uber" sur l'heritage de plus d'une classe ... mais j'ai plus ça en tête.

edit:
http://www.borisdessy.com/
vs
http://www.borisdessy.com/crock.html

on voit directement en plus des 2 autres problèmes(référence d'objets et problème avec uber), que les prototype d'une classe héritée sont écrasés par les prototypes parents avec la méthode de crockford.

**sekaijin** · 11/01/2011, 20h03

Envoyé par Willpower

heu .... en même temps, c'est juste dans la partie "test". (facebook aussi redéfini "alert").

ce n'est pas la redéfinition d'alert qui donne des boutons c'est utiliser document.write

A+JYT

**sekaijin** · 11/01/2011, 20h07

http://www.sencha.com/learn/Manual:I...tance_(French)
http://www.sencha.com/learn/Manual:Intro

le-modèle-objet-de-javascript-ou-comment-vivre-sans-classes

A+JYT

**Willpower** · 11/01/2011, 21h16

Envoyé par sekaijin

http://www.sencha.com/learn/Manual:I...tance_(French)
http://www.sencha.com/learn/Manual:Intro

le-modèle-objet-de-javascript-ou-comment-vivre-sans-classes

A+JYT

Je regarderai le premier lien à mon aise chez moi.
Par contre je ne vois pas ce que tu as voulu me montrer avec le second ?

**Willpower** · 12/01/2011, 19h49

Envoyé par Willpower

Je regarderai le premier lien à mon aise chez moi.
Par contre je ne vois pas ce que tu as voulu me montrer avec le second ?

bon, j'ai essayé d'adapter mes tests avec cette lib :

http://www.borisdessy.com/Ext.html

1) je n'arrive pas à appeler la fonction "foo" parente (mais là, j'avoue que c'est sans doute/peut-être moi qui suis incompétent)
2) il faut appeler explicitement, soi même, le constructeur parent d'une classe enfant. (c'est dommage selon moi).
3) les prototypes des classes hérités sont détruit comme on le voit clairement dans mes tests : un objet "C" perd son prototype "zz", ne possède pas le prototype "yy" de son parent "B" mais ne possède que le "xx" de la classe "A".

A part seulement, en jetant un oeil à leurs code, je dois reconnaître que c'est le mieux fait que j'ai pu voir jusqu'à présent. (avec le mien, of course^^)

**Willpower** · 12/01/2011, 20h16

Pour mon 3ème point, il suffit de rajouter 2 lignes dans leurs code, je vais leurs proposer l'update.

**sekaijin** · 13/01/2011, 11h45

Envoyé par Willpower

Je regarderai le premier lien à mon aise chez moi.
Par contre je ne vois pas ce que tu as voulu me montrer avec le second ?

simplement que la réflexion sur la notion de classe dans cette lib
n'a pas chercher à sacrifier celle de prototype mais à l'utiliser.
et proposer pour chaque design patter de la Conception Orienté Objet une solution qui utilise au mieux la notion de classe et de prototype.

une réflexion donc qui va au de la volonté de transforme js d'un langage de prototype vers un langage de classe et qui cher à englober d'autre notion qui l'accompagne

A+JYT

**zalzasta** · 13/01/2011, 14h53

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function A(){}
 
function B(){}
 
B.prototype = new A();

B hérite de toutes les attributs et méthode de A et possède ses propres méthodes et attributs.

Le seul hic, c'est la notion de 'super' qui n'existe pas en JavaScript

**Willpower** · 13/01/2011, 18h44

Envoyé par zalzasta

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function A(){}
 
function B(){}
 
B.prototype = new A();

B hérite de toutes les attributs et méthode de A et possède ses propres méthodes et attributs.

Le seul hic, c'est la notion de 'super' qui n'existe pas en JavaScript

oui, c'est la méthode utilisé par crockford ça( à laquelle il ajoute une fonction super).

les problèmes comme je l'ai expliqué plus haut, c'est que :
1)
2) ça écrase les prototype de B
3) ça instancie un objet A même si aucun objet B n'est instancié
4) ça n'instancie qu'un seul objet A même si plusieurs objets B sont instanciés
5) par conséquence si A possède des objets, ses héritiés n'auront pas chacun un objet mais juste une référence vers cet objet unique créé lors du new A();

exmple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
function A(this.obj = {var:2;};alert("construction de A");)
function B()
B.prototype.myvar = 99;
B.prototype = new A(); // construction de A -> prob 3
var b1 = new B(); // pas de construction de A -> prob 4
alert(b1.myvar); // undefined -> prob 2
var b2 = new B(); // pas de construction de A -> prob 4
b1.obj.val++;
alert(b2.obj.val); // 3 au lieu de 2 -> prob 5

la solution (résumée) est de créer une fonction temporaire avec une copie des prototypes de la CLASS A (et non pas d'un de ses objets) et d'instancié cette fonction (vide donc pas de problème d'execution non voulue) pour copier ses prototype (copie et non pas référence)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function F(){}
F.prototype = A.prototype;
B.prototype = new F();

Ici, les méthodes et champs définis en interne dans A ne seront pas copié dans B, il faut donc régler cela en appelant explicitement le constructeur de A dans B.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
function B(){
A.apply(this,arguments);
}

Et cela corrige bien les appels à A lors de chaque instanciation des objets B.

En résumé, l'héritage sans fonction super/uber ce résume donc simplement à :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
function A(){ 
  //methodes & variables internes à A
}
A.prototype..... // methodes & variables génériques de A
function B(){
  A.apply(this,arguments);
  //methodes & variables internes à B
}
function F(){}
F.prototype = A.prototype;
B.prototype = new F();
B.prototype.... // methodes & variables génériques de B

**zalzasta** · 14/01/2011, 10h28

Cela marche très bien pour moi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function A(myvar){
    var _myvar = null;    // Ma variable privée
 
    /*  getteur et setteur */
    this.getMyVar = function()
        {return this._myvar;}
 
    this.setMyVar = function(myvar)
        {this._myvar = myvar;}
 
    this.setMyVar(myvar);    // contructeur par initialisation
}
 
function B(myvar){
    A.call(this, myvar); };
 
B.prototype = new A(); // héritage de A
 
var b1 = new B(0); // la classe A instancie myVar à O grace au call
 
var b2 = new B(0); // la classe A instancie myVar à O grace au call
b2.setMyVar(2);        // On modifie myVar de b2 grace au setteur de A
 
var b3 = new B(0); // la classe A instancie myVar à O grace au call
b3.setMyVar(3);        // On modifie myVar de b3 grace au setteur de A
 
alert(b1.getMyVar()); // On a bien 0
alert(b2.getMyVar()); // On a bien 2
alert(b3.getMyVar()); // On a bien 3
 
// On a bien une classe A instancié pour chaque objet B
// Ou est le problème ?

Cordialement

**Willpower** · 14/01/2011, 14h24

Envoyé par zalzasta

Cela marche très bien pour moi

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function A(myvar){
    var _myvar = null;    // Ma variable privée
 
    /*  getteur et setteur */
    this.getMyVar = function()
        {return this._myvar;}
 
    this.setMyVar = function(myvar)
        {this._myvar = myvar;}
 
    this.setMyVar(myvar);    // contructeur par initialisation
}
 
function B(myvar){
    A.call(this, myvar); };
 
B.prototype = new A(); // héritage de A
 
var b1 = new B(0); // la classe A instancie myVar à O grace au call
 
var b2 = new B(0); // la classe A instancie myVar à O grace au call
b2.setMyVar(2);        // On modifie myVar de b2 grace au setteur de A
 
var b3 = new B(0); // la classe A instancie myVar à O grace au call
b3.setMyVar(3);        // On modifie myVar de b3 grace au setteur de A
 
alert(b1.getMyVar()); // On a bien 0
alert(b2.getMyVar()); // On a bien 2
alert(b3.getMyVar()); // On a bien 3
 
// On a bien une classe A instancié pour chaque objet B
// Ou est le problème ?

Cordialement

Lis ce que j'ai ecrit, je t'ai donné tout une série d'exemples où ça posait problème et en expliquant le pourquoi. Désolé mais je ne peux pas mieux faire.

Dans ton exemple tu instancies 4 fois A au lieu de 3.

Édit: dans ton exemple tu pourrais meme carrément supprimer le B. Prototype = new A() et tu obtiendrais exactement les même résultats à tes tests. Ce qui montre bien qu'un exemple qui fonctionne n'est pas une preuve qu'une solution fonctionne. Contrairement à son opposée qui est vraie : un exemple qui ne fonctionne pas prouve qu'une solution ne fonctionne pas. ;-)

[partage] héritage de classes

JavaScript

Discussions similaires

Partager

Partager