Discussion :

[badoumba]

Bonjour � tous,

Je viens du C/C++ et essaye de comprendre l'�quivalent des classes par l'emploi de prototype et de classes imm�diates en particulier.

Je dois cr�er mes propres objets pour une application et cherche la meilleur fa�on de le faire. J'ai ici 2 template de 'classe' que j'ai extrait de classes de Three.js que j'utilise actuellement. Ils semblent structur�s diff�remment, hormis le fait que l'un int�gre la gestion des �v�nements.

Si quelqu'un avait un peu de temps pour faire le tour de ces deux template. Vous trouverez mes questions plus particuli�res en dessous de chaque bloc.

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
ClassName = function ( param, domElement ) {
 
	var _this = this;
	this.param = param;
	this.domElement = ( domElement !== undefined ) ? domElement : document;
 
	// API
	this.apivar = 1.0;
 
	// internals
	var _internalVar = true;
 
	//dispatchEvents
	var changeEvent = { type: 'change' };
 
	//methods
	this.firstMethod = function () {
 
	};
 
	this.secondMethod = ( function() {
		var intern = true;
		return function secondMethod() {
 
		};
	}() );
 
	var immediateVar = ( function () {
		var intern = true;
		return function immediateVar( param ) {
				param = false;
			return param;
		};
	}() );
 
	// events
	function mouseup( event ) {
		if ( _this.enabled === false ) return;
		event.preventDefault();
		event.stopPropagation();
		document.removeEventListener( 'mousemove', mousemove );
		document.removeEventListener( 'mouseup', mouseup );
		_this.dispatchEvent( changeEvent );
	}
 
	this.dispose = function() {
 
		this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
		document.removeEventListener( 'mousemove', mousemove, false );
		window.removeEventListener( 'keydown', keydown, false );
	};
 
	this.domElement.addEventListener( 'contextmenu', contextmenu, false );
	window.addEventListener( 'keydown', keydown, false );
};
 
ClassName.prototype = Object.create( ClassName.prototype );
ClassName.prototype.constructor = ClassName;

Q: Il y a l� 3 types de fonctions et je souhaiterais comprendre quel est leur usage typique et dans quel situation je devrais moi aussi cr�er ce type de fonction
- firstMethod d�clar�e simplement
- secondMethod est une fonction imm�diate mais dont le retour est affect� au nom d'une fonction
- thirdMethod est une fonction imm�diate mais dont le retour est affect� � un nom de variable

Q: Quelle est la raison d'�tre de cette ligne exactement ? Est-ce l'�quivalent de Object.assign( ClassName.prototype,... du second template ci-apr�s ?
ClassName.prototype = Object.create( ClassName.prototype );

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
( function () {
	ClassName = function (){
 
	};
 
	Object.assign( ClassName.prototype, {
		firstMethod: function (param) {
 
		},
 
		secondMethod: function (param) {
 
		}
	});
 
	function thirdFunction (param) {
		return param;
	}
 
	function FourthFunction () {
		Object.assign ( FourthFunction.prototype, {
			fifthFunction: function () {
 
			}
		});
	}
}) ();

Q: Est-ce que thirdFunction n'est pas inclue dans le bloc Prototype par ce qu'elle n'a pas besoin d'�tre h�rit�e?
Q: Pourquoi fifthFunction est-elle imbriqu�e ainsi, quel en est l'usage ? Comment l'appelle t-on ?

Merci par avance pour le temps pass� � d�cortiquer ces deux squelettes !

Badoumba

[danielhagnoul]

JS a �t� cr�� avec l'h�ritage par prototype, mais, depuis la sortie de ES2015, il dispose du mot cl� "Class" et de l'h�ritage par classes. Les puristes ne jurent que pas les "prototypes" et ils vous diront que cette "Class" est juste du "sucre syntaxique". Ils ont raison ! Mais d'autres, j'en suis, sont en faveur de l'h�ritage par classes, car c'est comme cela que nous avons appris l'h�ritage lors de la sortie du C++.

Bref, on peut utiliser les deux, mais pas en m�me temps ! Il faut vous d�cider pour une approche et vous y tenir.

Prototype : https://www.google.be/search?q=mdn+h...hrome&ie=UTF-8
Class : https://developer.mozilla.org/fr/doc...erence/Classes

[Beginner.]

Salut,

Justement je me pose aussi ce genre de question, je lis des chapitres de livres, des articles, des tutos... Et je trouve que c'est la jungle � ce niveau-l�, chacun a un avis et le d�fend, parfois certains proposent leurs propres librairies apr�s ce qui est dure c'est que comme JS �volue eh bien parfois des arguments qui �taient bon � une �poque ne le sont plus au moment o� tu lis tout �a donc tu dois encore faire le tri par rapport � �a et on s'y perd facilement quand on a pas suivie l'histoire depuis le d�but...

Q: Est-ce que thirdFunction n'est pas inclue dans le bloc Prototype par ce qu'elle n'a pas besoin d'�tre h�rit�e?

En tant que d�butant un peu perdu (te voil� pr�venu) et vu que tu viens du C/C++ je dirais que c'est une m�thode priv�e : si tu cr�es une instance de ClassName celle-ci n�aura pas acc�s � la m�thode thirdFunction par contre elle aura acc�s aux m�thodes firstMethod, secondMethod...

J'ai chang� un peu ton code pour tester :

Code javascript :

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
(function () {
    ClassName = function () {
 
    };
 
    Object.assign(ClassName.prototype, {
        firstMethod: function (param) {
            console.log("Salut je suis firstMethod, je suis accéssible...");
        },
 
        secondMethod: function (param) {
            console.log("Salut je suis secondMethod, je suis accéssible...");
        }
    });
 
    function thirdFunction(param) {        
        return param;
    }
 
    function FourthFunction() {
        Object.assign(FourthFunction.prototype, {
            fifthFunction: function () {
 
            }
        });
    }
})();

Ensuite on peut tester :

Code javascript :

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

1
2
3
4
var objClassName = new ClassName();
objClassName.firstMethod(); // ok ---> Salut je suis firstMethod, je suis accéssible...
objClassName.secondMethod(); // ok ---> Salut je suis secondMethod, je suis accéssible...
objClassName.thirdFunction(); // pas ok ---> Uncaught TypeError: objClassName.thirdFunction is not a function

...

[Beginner.]

Q: Il y a l� 3 types de fonctions et je souhaiterais comprendre quel est leur usage typique et dans quel situation je devrais moi aussi cr�er ce type de fonction
- firstMethod d�clar�e simplement
- secondMethod est une fonction imm�diate mais dont le retour est affect� au nom d'une fonction
- thirdMethod est une fonction imm�diate mais dont le retour est affect� � un nom de variable

Ben je vois pas de quelle thirdMethod tu parles mais avec secondMethod ben il y a un point commun avec ce que je disais � la question pr�c�dente : pour moi �a permet d'avoir des donn�es priv�es, public... Par exemple la variable "intern" n'est accessible qu'� l'int�rieur de la fonction qui retourne une autre fonction (cette derni�re ayant acc�s � la variable "intern")...

Il y a un livre qui peut t'int�resser, notamment ce chapitre : https://fr.eloquentjavascript.net/chapter3.html...

Pour tes questions regarde notamment � partir de ce passage :

Cependant, et c�est un ph�nom�ne subtil mais extr�mement utile, lorsqu�une fonction est d�finie � l�int�rieur d�une autre fonction, son environnement local sera bas� sur l�environnement local qui l�entoure plut�t que sur l�environnement global.

D'ailleurs apr�s il donne un exemple du m�me genre :

Voici un cas qui pourrait vous surprendre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var variable = "globale";
 
function fonctionParente() {
    var variable = "locale";
 
    function fonctionFille() {
        print(variable);
    }
    return fonctionFille;
}
 
var fille = fonctionParente();
fille();

[Beginner.]

Ben je vois pas de quelle thirdMethod tu parles mais avec secondMethod ben il y a un point commun avec ce que je disais � la question pr�c�dente : pour moi �a permet d'avoir des donn�es priv�es, public...

Un autre usage des fonctions qui retournent une fonction : https://davidwalsh.name/javascript-functions

[Beginner.]

Salut,

Dans ce fil j'ai employ� des expressions comme "m�thode priv�e" ou "donn�es priv�es"... Je ne dis pas qu'elles sont correctes mais en tous cas certains les emploient ***...

Par contre ce ne sont pas des propri�t�s, je me permet de reproduire la r�ponse de Sylvain :

M�me chose, maVar et maFonction sont des variables locales, pas des propri�t�s priv�es puisque ce ne sont pas des propri�t�s, elles n'appartiennent pas � un objet. Si on d�clare a posteriori d'autres m�thodes sur cet objet, elles ne pourront pas acc�der � ces variables car on ne sera plus dans le m�me scope. Inversement, ces variables sont accessibles depuis n'importe quel code � l'int�rieur de l'IIFE, m�me si ce code n'a rien � voir avec l'objet retourn�.

Se servir d'une IIFE pour d�clarer des variables sans polluer le scope ext�rieur est un pattern tr�s utile, mais on ne peut pas appeler �a des propri�t�s priv�es, ni m�me des propri�t�s tout court.

*** D'ailleurs voici un passage (tir� de :JavaScript: The World�s Most Misunderstood Programming Language) o� Douglas Crockford semble r�pondre � ceux qui pr�tendent que les objets JS ne peuvent pas avoir de variables/m�thodes priv�es :

Some argue that JavaScript is not truly object oriented because it does not provide information hiding. That is, objects cannot have private variables and private methods: All members are public.

But it turns out that JavaScript objects can have private variables and private methods. (Click here now to find out how.) Of course, few understand this because JavaScript is the world's most misunderstood programming language.

[badoumba]

Merci les gars pour vos r�ponses, pardon pour mon retour un peu tardif.
Je lis le contenu de vos liens en d�tail. Je reviendrai commenter mes classes exemples si besoin.

Merci encore pour le temps pass�