OOP et javascript : proto ou pas proto ?

**Paganoni** · 09/12/2011, 14h48

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
var Player = function (name) {
}

et

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**Willpower** · 09/12/2011, 14h57

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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
};

**Bovino** · 09/12/2011, 14h58

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.

**Willpower** · 09/12/2011, 15h12

Envoy� par Paganoni

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
var Player = function (name) {
}

et

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

function Player(name){}

maintenant la diff�rence entre :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**Paganoni** · 09/12/2011, 18h14

Rha bin c'est bien s�r !

Merci beaucoup pour vos �claircissements !

**Watilin** · 09/12/2011, 21h28

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

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 HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

et ceci quand je clique sur � 2 � :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
x is undefined
Hareng()
x.reponse = 42;

**Willpower** · 09/12/2011, 21h51

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

var NOM = function NOM(){};

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

function NOM(){}

**Watilin** · 10/12/2011, 17h13

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

**TheGwy** · 12/12/2011, 12h31

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**Willpower** · 12/12/2011, 16h13

Clap Clap Clap.

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

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

ne provoquera pas d'erreur.

tandis que :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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

en provoquera.

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

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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.

**Willpower** · 12/12/2011, 16h45

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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);

**TheGwy** · 12/12/2011, 17h52

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

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/

**dukej** · 12/12/2011, 21h25

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

**Willpower** · 13/12/2011, 03h26

je suis devenu accro

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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();

OOP et javascript : proto ou pas proto ?

JavaScript

Discussions similaires

Partager

Partager