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é