OOP et javascript : proto ou pas proto ?

Bonjour, apr�s des ann�es pass�es � utiliser les frameworks existants j'essai de revenir � l'essentiel pour une meilleure compr�hension.

En premier lieu je cherche � transposer mes connaissances de l'OO vers javascript � l'aide d'un bouquin (jS, gardez le meilleur de Douglas Crockford).

Bon, bref. J'ai bien compris qu'il n'y a pas de notion de classe en JS et que tout est objet. Je vois aussi � quoi sert le prototype.

Par contre, j'ai fait un petit test et il y a un truc qui m'�chappe.

Quelle est la diff�rence entre les m�thodes dosomething et sogood ??
A l�ex�cution j'obtiens exactement le m�me comportement (attendu). Dans ce cas, pourquoi devrais-je utiliser une d�claration par prototype ?

Merci d'avance

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

var Player = function (name) { this.name = name; this.dosomething = function(arg) { console.log(this.name + ' here with ' + arg); } }   Player.prototype.sogood = function(arg) { console.log(this.name + ' here proto with ' + arg); }   var p1 = new Player('bodo'); p1.dosomething('toto'); p1.sogood('toto');

---

Ah puis, tant qu'on y est - quelle est la diff�rence entre

Code:

---

1 2	var Player = function (name) { }

---

et

Code:

---

1 2	var Player = function Player(name) { }

---

Pour ta premi�re question, il existera toujours UNE et UNE seule instance de la fonction "sogood".

Tandis que la fonction dosomething ne sera d�clar� que lorsqu'un objet sera instanci� et sera propre � cet objet, c'est � dire qu'il existera une fonction "dosomething" pour chaque objet instanci�.

Code:

---

1 2 3 4 5 6 7 8 9

ex: var p1 = new Player('bodo1'); var p2 = new Player('bodo2'); if( p1.dosomething == p2.dosomething ){ // FALSE } if( p1.sogood == p2.sogood ){ // TRUE }

---

ne pas dupliquer une fonction (avec les prototypes) permet notament d'�pargner pas mal de placer et d'ex�cution lors que tu cr�es des quantit�s cons�quentes d'objets.

tu peux tester si une fonction (ou attribut) est propre � un objet grace � la m�thode "hasOwnProperty"

Code:

---

p1.hasOwnProperty('sogood'); // false

---

l'avantage de red�clarer une m�thode � l'int�rieur de l'objet peut par exemple �tre utile pour acc�der � des champs priv�s comme les getters.

Code:

---

1 2 3 4 5 6 7 8 9

function Player(name){ var _name = name; this.getName = function(){ return _name; }; } Player.prototype.getNameProto = function(){ return _name; // ne fonctionnera pas };

---

Citation:

---

Dans ce cas, pourquoi devrais-je utiliser une d�claration par prototype ?

---

Tout simplement pour des questions entre autre de performances.
Lorsque tu d�clares la m�thode dans le constructeur, chaque instance de l'objet que tu vas cr�er va d�finir sa propre m�thode, alors que si tu la d�clares dans le prototype, chaque instance h�ritera de la m�me d�finition.

Citation:

---

Envoy� par Paganoni

Ah puis, tant qu'on y est - quelle est la diff�rence entre

Code:

---

1 2	var Player = function (name) { }

---

et

Code:

---

1 2	var Player = function Player(name) { }

---

---

le 2�me exemple n'existe pas vraiment (sauf erreur de codeur) car �a revient au m�me que de faire :

Code:

---

function Player(name){}

---

maintenant la diff�rence entre :

Code:

---

1 2 3

function Player(){} et Player = function(){};

---

est que dans le 2�me cas il s'agissent d'une fonction anonyme assign� � la variable "Player". (enfin au pointeur, vu que tout les objets et fonctions se joue avec des pointeurs en javascript.)

dans le premier cas, il s'agit d'une fonction nomm�e qui se �galement point� par la variable "Player".

en gros, les 2 fa�ons de faire se valent et son (quasi) �quivalentes. les deux sont en g�n�ral autant utilis�s. m�me si la function nomm�e permet (sous chrome et firefox mais pas IE) de renvoyer le nom de la fonction via l'attribut "name". ex :

Code:

---

1 2 3 4 5 6 7

function b(){}; var maFonction = b; alert(maFonction.name); // b   var b = function(){}; var maFonction = b; alert(maFonction.name); // ... null ou undefined (je sais plus ^^)

---

en bref, �a d�pendra surtout de tes habitudes si tu pr�f�res d'avoir voir "function" ou le nom de la fonction.

aussi si tu as l'habitude de coder dans des objets, tu auras plus tendances � utiliser l'assignation je pense, par habitude. ex :

Code:

---

1 2 3 4 5 6

var obj = { alpha : function(){}, beta : function(){}, num : 5, text : "blabla" };

---

enfin, derni�re anecdote, le point-virgule n'est pas n�cessaire � la fin de la d�claration d'une fonction tandis qu'il est obligatoire apr�s une assignation. il est donc souvent oubli� quand on d�bute en javascript et est source d'erreur. ex :

Code:

---

function alpha(){}/*pas besoin de ; ici*/alpha();

---

Code:

---

var alpha = function(){};/*besoin du ; ici pour clore l'assignation*/alpha();

---

voila, cet �norme texte pour dire que les 2 reviennent exactement au m�me. :mrgreen:

Rha bin c'est bien s�r !

Merci beaucoup pour vos �claircissements !

Citation:

---

Envoy� par Willpower

le 2�me exemple n'existe pas vraiment (sauf erreur de codeur)

---

Si si, �a existe, et non non ce n'est pas une erreur :mouarf: C'est m�me tr�s utile car le nom de la fonction appara�t dans la pile d'appel quand on fait du debug.

Un exemple tout simple :

Code:

---

1 2	<input type="button" id="bouton1" value="1" /> <input type="button" id="bouton2" value="2" />

---

Code:

---

1 2 3 4 5 6 7 8 9 10

document.getElementById('bouton1').addEventListener( 'click', function() { // fonction anonyme var x; x.flute = 'oups'; }, false); document.getElementById('bouton2').addEventListener( 'click', function Hareng() { // fonction nommée var x; x.reponse = 42; }, false);

---

Avec Firebug, j'obtiens ceci quand je clique sur � 1 � :

Code:

---

1 2 3

x is undefined (?)() x.flute = 'oups';

---

et ceci quand je clique sur � 2 � :

Code:

---

1 2 3

x is undefined Hareng() x.reponse = 42;

---

;)

en fait, je parlais de nommer la fonction et de r�assigner la fonction dans elle-m�me :

Code:

---

var NOM = function NOM(){};

---

qui n'avait aucun sens et qui revenait � faire tout simplement :

Code:

---

function NOM(){}

---

Ah oui, l� je suis d'accord, �a revient exactement au m�me ;)

Non �a ne revient pas vraiment au m�me.

L'une est une expression et l'autre est une d�claration, ce qui veut dire que les deux ne sont pas �valu�es au m�me moment.

La d�claration sera �valu�e (elle ainsi que les autres d�clarations qu'elle contient) � l'entr�e du contexte), l'expression sera �valu�e � l'execution.

Cela peut avoir son importance en cas d'�valuation tardive (lazy init) ou de branchement de code. Si les invariantes � initialiser sont couteuse, tr�s rarement utilis�es ou si l'on veut impl�menter un Strategy Pattern, il peut �tre utile de maitriser ces subtilit�s.

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// ici casCritique sera initialisé quoi qu'il arrive, même si l'on ne s'en sert jamais   if(uneChanceSurUnMilliard === true){ function casCritique(){ // initialisation complexe très couteuse } } else{ // NOOP }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11

// ici casCritique (enfin, la valeur de la variable casCritique pour être exact) sera initialisé une fois sur un milliard   if(uneChanceSurUnMilliard === true){ var casCritique = function casCritique(){ // initialisation complexe très couteuse } } else{ // NOOP }

---

Bon apr�s dans la pratique 99% du temps, OSEF.

Clap Clap Clap.

Tu viens de m'apprendre qqe chose que je ne connaissais mais ABSOLUMENT pas en javascript. :ccool:

Je viens donc de lire un excellent article � ce sujet : http://kangax.github.com/nfe/


Donc comme tu le dis, ce n'est pas du tout pareil car :

Code:

---

1 2 3

try{alpha(); } catch(e){alert("error: alpha");} function alpha(){alert(' exec alpha');}

---

ne provoquera pas d'erreur.

tandis que :

Code:

---

1 2 3

try{alpha(); } catch(e){alert("error: alpha");} var alpha = function alpha(){alert(' exec alpha');}

---

en provoquera.


http://www.smileyemoticone.com/Smile...t/respect1.gif


edit:
Un autre exemple impressionant donn� dans l'article :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// Never do this! // Some browsers will declare `foo` as the one returning 'first', // while others — returning 'second' if(true) { function foo() { return 'first'; } } else { function foo() { return 'second'; } } alert(foo());

---

sous chrome, j'ai bien "second" qui s'affiche. :?

je m'amuse comme un fou depuis qqes minutes avec �a, en fait �a peut avoir des cons�quence effroyable pour ceux qui travaillent � plusieurs sur un gros projet sans savoir ce qui pr�c�de. (par exemple si chaque partie peut �crasser toutes les variables pr�c�dentes .. surtout une variable nomm� "tmp" par exemple)

Code:

---

1 2 3 4 5 6 7

// CODE INCONNU PRECEDENT var tmp = function(){alert('piège');};   // CODE EN COURS .. function tmp(){alert('tmp');}; // affichera "piège" tmp();

---

ou plus tordu :

Code:

---

1 2 3 4 5 6 7

// CODE INCONNU PRECEDENT var tmp = (function(tmp){return function(){tmp();};})(tmp);   // CODE EN COURS .. function tmp(){alert(arguments.callee == tmp);}; // affichera "false" tmp();

---

edit: en version plus extr�me pour surcharger une m�thode qui n'existe pas encore (enfin je veux dire qui se trouve en tout d�but de code) :

Code:

---

1 2 3 4 5 6 7 8

// CODE INCONNU PRECEDENT var tmp = (function(tmp){return function(){tmp.apply(this,arguments);};})(tmp);   // CODE EN COURS .. var code = Math.random(); function tmp(c){ if(c==code) alert(arguments.callee == tmp);}; // affichera "false" tmp(code);

---

Huhum, je vois que tu es all� puiser l'information directement � la meilleure source. :ccool:

Les articles de kangax sont effectivement la r�f�rence absolue sur ce sujet.

Si cela t'int�resse tant que �a je te conseille la g�nialissime s�rie d'articles "ECMA-262-3 in detail" de Dmitry Soshnikov.
Notamment les deux premiers chapitres qui expliquent toutes les bases et m�canisme internes � l'origine de ces subtilit�s :
http://dmitrysoshnikov.com/ecmascrip...tion-contexts/

Dans un autre registre tu as aussi cet autre article de kangax qui explique quelques diff�rences entre les variables et les propri�t�s selon les types de contextes d'execution. (je te conseille de lire pr�alablement les deux premiers chapitres de soshnikov pour bien tout comprendre, mais tu peux faire sans).

http://perfectionkills.com/understanding-delete/

Et sinon le tr�s bon javascript.info a un article dessus :
http://javascript.info/tutorial/func...nd-expressions

je suis devenu accro :mrgreen:

Code:

---

1 2 3 4 5 6 7 8 9 10

// hook all declarations (function(f,i){for(i in window) if("sessionStorage"!=i && typeof (f=window[i]) == 'function' && !f.toString().match(/\[native code\]/) ) window[i] = (function(f,n){return function(){alert(n+' hooked');f.apply(this,arguments);};})(f,i);})();   // test code here function alpha(){ document.write('alpha<br/>'); } alpha();

---