Annonce

>>> Bienvenue sur codelab! >>> Première visite ? >>> quelques mots sur codelab //// partage de liens //// une carte des membres//// (apéros) codelab


#1 2016-04-11 22:17:12 Javascipt avec de la classe

EricRG
membre
Lieu: Lorient
Date d'inscription: 2008-03-11
Messages: 170
Site web

Javascipt avec de la classe



Bonjour,

Il est possible d'utiliser des classes maintenant avec Javascript (j'en suis tout surpris smile )

cf : https://developer.mozilla.org/fr/docs/W … prototypes

Donc, je teste... et j'ai fait ça et ça ne marche pas : je ne vois pas pourquoi

var widget;

function setup() {
	createCanvas(640,640);
	widget= new Widget(20,57,200,80);
}

function draw() {
	widget.display();
}

class Block {
	constructor(x,y,largeur,hauteur) {
		this.x=x;
		this.y=y;
		this.largeur=largeur;
		this.hauteur=hauteur;
	}
}

class Widget extends Block {
	constructor(x,y,largeur,hauteur) {
		super(x,y,largeur,hauteur);
	}
	this.display= function() {
		rect(x,y,largeur,hauteur);
	}
}

Hors ligne

 

#2 2016-04-12 01:03:11 Re : Javascipt avec de la classe

Makio135
membre
Lieu: Lyon
Date d'inscription: 2010-11-11
Messages: 89
Site web

Re: Javascipt avec de la classe



Comme indiqué,  il s'agit d'ES6 (ECMAscript6, la nouvelle version de javascript) et un bon nombre de ses innovations ne sont pas encore supportées dans les navigateurs cf http://kangax.github.io/compat-table/es6/#test-class

Hors ligne

 

#3 2016-05-30 18:18:21 Re : Javascipt avec de la classe

EricRG
membre
Lieu: Lorient
Date d'inscription: 2008-03-11
Messages: 170
Site web

Re: Javascipt avec de la classe



Un petit message en passant :

Je regarde pas mal sur internet et sur des docs javascript ces derniers temps pour arriver à pouvoir utiliser des objets, les faire hériter, avoir l’équivalent de l'utilisation de "super" dans java...

Ce n'est pas forcément facile de trouver des docs qui soient bien écrites c'est à dire accessibles... Enfin, il me semble avoir trouvé enfin !

.. Ceci sans utiliser des bibliothèques supplémentaires puisque mon objectif n'est pas seulement de trouver une façon qui fonctionne mais aussi de comprendre les outils que j'utilise !

... et d'avoir un code le plus simple et le plus clair possible.

... donc je teste ça et j'en recause ici bientôt !

smile

P.S. et désolé Makio135 d'avoir oublié de te remercier de ta réponse !

Dernière modification par EricRG (2016-05-30 18:20:11)

Hors ligne

 

#4 2016-05-30 20:39:09 Re : Javascipt avec de la classe

Tepaze
membre
Lieu: Angers
Date d'inscription: 2014-04-14
Messages: 182

Re: Javascipt avec de la classe



Bon courage :-)

J'ai pas mal travaillé sur javascript fut un temps, et j'ai beaucoup aimé (contrairement à beaucoup d'avis lu ça et là).

Mais j'avoue que plus je me suis enfoncé dans les tréfond du langage, plus j'ai utilisé des outils externes pour ne pas ajouter de la complexité à la complexité...

Partagerais tu tes sources de docs ? Ca m'intéresse (encore).

Bien à toi

Hors ligne

 

#5 2016-05-31 14:42:03 Re : Javascipt avec de la classe

EricRG
membre
Lieu: Lorient
Date d'inscription: 2008-03-11
Messages: 170
Site web

Re: Javascipt avec de la classe



Et l'eau !,

Finalement, ce que je trouve le plus intéressant et le plus simple est ce qu'il y a sur ce site : https://javascript.info/

smile

Pour utiliser des objets, ce que j'ai trouvé de plus simple (dans le sens de compréhensible, sans bibliothèques annexes avec un code simple) est :
ceci : https://javascript.info/tutorial/pseudo … al-pattern

(simple = aussi simple que possible smile )

La seule "bibliothèque" à ajouter est :

And finally, the whole suppa-mega-oop framework.

01
	function extend(Child, Parent) {
02
	  Child.prototype = inherit(Parent.prototype)
03
	  Child.prototype.constructor = Child
04
	  Child.parent = Parent.prototype
05
	}
06
	function inherit(proto) {
07
	  function F() {}
08
	  F.prototype = proto
09
	  return new F
10
	}


D'ailleurs, je n'ai pas encore  compris pourquoi, dans la fonction inherit(proto) on a return new F ! Pourquoi return F ne suffit pas ?


Je n'ai pas encore eu le temps de vraiment m'interroger là-dessus !

P.S. je reviendrai pour faire la liste des autres choses que j'ai trouvées (et regardées puisque il y a pléthore d'informations !)

Dernière modification par EricRG (2016-05-31 15:00:18)

Hors ligne

 

#6 2016-06-01 09:11:59 Re : Javascipt avec de la classe

Tepaze
membre
Lieu: Angers
Date d'inscription: 2014-04-14
Messages: 182

Re: Javascipt avec de la classe



Ainsi on obtient un objet en retour, et non une fonction... Un objet qui contiendra peut être des fonctions.

C'est mon analyse en tout cas. Je ne certifie pas, ça fait bien 3 ou 4 ans que j'ai un peu laché...

Hors ligne

 

#7 2016-06-06 15:11:28 Re : Javascipt avec de la classe

EricRG
membre
Lieu: Lorient
Date d'inscription: 2008-03-11
Messages: 170
Site web

Re: Javascipt avec de la classe



Ca y est !!!!!!!!!!!

j'y suis ENFIN arrivé !!!!!!!!

Voici, ci-dessous, mon code de test qui fonctionne enfin sans générer aucun message d'erreur dans la console web.

Maintenant (qu'il me semble) avoir compris ce dont il retourne dans l’organisation de javascript, je ne trouve plus cela compliqué du tout !!! En fait, je trouve plutôt que ce sont les explications que l'on trouve ici ou là qui le sont. C'est comme si les programmeurs habitués aux systèmes de Classes et d'Instances avaient du mal à vraiment comprendre le système par prototypes et qu'ils ,'arrivaient pas du coup à l'expliquer !!!

Je vais essayer de pondre ma propre explication. Je la mettrai par ici et vous pourrez me dire ce que vous en pensez.

Le code d'essai :

"use strict" // Indispensable pour que javascript donne des informations correctes dans la console web en cas d'erreurs

function extend(Child, Parent) {
  Child.prototype = inherit(Parent.prototype);
  Child.prototype.constructor = Child;
  Child.parent = Parent.prototype;
}

function inherit(proto) {
  function F() {};
  F.prototype = proto;
  return new F();
}


function Animal(nom) { // "Constructeur" de la  "Classe" Animal
    this.nom=nom;
    this.genre="Animal";
}

Animal.prototype.action=function () { // méthode de la "Classe" Animal
        alert(this.nom+" avance ! ("+this.genre+")");
}

Animal.prototype.genre="Animal.prototype"; // Variable dans l'objet Animal.prototype

var unAnimal=new Animal("un cerf"); // new fabrique une copie de l'objet Ainimal et l'exécute donc passe les paramètres : "un Cerf" dans this.nom

unAnimal.action(); // pas de "méthode" action() dans unA,imal, donc la trouve dans son prototype qui est l'objet Animal.prototype

function Chat(nom) {
    Animal.call(this,nom); // le "super" : exécute le "constructeur" de Animal dans le contexte du nouvel objet Chat (=this)
    this.genre="Chat"; // cette variable genre se trouve dans l'objet Chat
}

extend(Chat,Animal); // le protoype du prototype de Chat devient le prototype de Animal : Chat---(prototype)--->Chat.prototype-----(prototype)----->Animal.prototype

Chat.prototype.action=function () {
    Animal.prototype.action.call(this); // le "super" de la "méthode"
    alert("en miaulant !");
}

var unChat=new Chat("Peluche");

// unChat---(prototype)--->Chat.prototype-----(prototype)----->Animal.prototype

Chat.prototype.genre="chat.prototype";

unChat.action();

var chat2=new Chat("Minnie");

chat2.genre="chatte"; // ce genre se trouve uniquement dans l'objet chat2 lui-même

chat2.action();

Dernière modification par EricRG (2016-06-06 15:20:39)

Hors ligne

 

#8 2016-06-09 22:07:01 Re : Javascipt avec de la classe

Tepaze
membre
Lieu: Angers
Date d'inscription: 2014-04-14
Messages: 182

Re: Javascipt avec de la classe



Salut,

Ca m'interesse, alors je cherche à comprendre moi aussi.

J'ai tester ton code, mais je ne comprend pas

Chat.prototype.genre = Animal.prototype

Pourquoi fais tu hériter le genre (du Chat) du prototypage de Animal ? L'héritage (les prototypages) est reçu lors de la création  d'une nouvelle instance...

J'obtiens exactement le même resultat avec le code ci dessous (mais j'ai peut être loupé un truc) :

citation :

var Animal = function(nom){
        this.nom=nom, this.genre="Animal";

        this.isCat = function(){
            return (this.genre == "Chat" || this.genre == "Chatte" ) ? "C'est un félin" : "Ce n'est pas un félin";
        }

        return this;
    }
   
    Animal.prototype.action = function(){
            console.log(this.nom+" avance ! ("+this.genre+")");
    }

    var unAnimal=new Animal("un cerf");

    unAnimal.action();
    console.log(unAnimal.isCat());


    function Chat(nom) {
    Animal.call(this, nom);
    this.genre="Chat";
    }


    Chat.prototype.action=function () {
    Animal.prototype.action.call(this);
    console.log("en miaulant !");
    }

    var unChat=new Chat("MiAout_1");
   
    var unChat2=new Chat("MiAout_2");
    unChat2.genre = "Chatte";
   
    console.log("Bilan");
    unChat.action();
    unChat2.action();
   
    console.log(unChat.genre);
    console.log(unChat2.genre);

    console.log(unChat.isCat());
    console.log(unChat2.isCat());

Bien à toi

Hors ligne

 

#9 2016-06-10 17:22:27 Re : Javascipt avec de la classe

EricRG
membre
Lieu: Lorient
Date d'inscription: 2008-03-11
Messages: 170
Site web

Re: Javascipt avec de la classe



.... genre  ="genre.prototype"

Il y a des guillemets !!!!  C'était juste pour savoir quel objet précis est pris en compte pour la réponse !

(je réponds au reste de ton message dès que je peux là je n'ai que cinq minutes smile  )

Hors ligne

 

#10 2016-06-10 21:26:50 Re : Javascipt avec de la classe

Tepaze
membre
Lieu: Angers
Date d'inscription: 2014-04-14
Messages: 182

Re: Javascipt avec de la classe



Ah ok :-)
Je n'avais pas compris ;-)

En tout cas merci pour tes partages utiles.

Hors ligne

 

#11 2016-06-11 11:02:57 Re : Javascipt avec de la classe

EricRG
membre
Lieu: Lorient
Date d'inscription: 2008-03-11
Messages: 170
Site web

Re: Javascipt avec de la classe



Ca y est, j'ai lu ton code.   smile

L'objet de ma petite recherche était de trouver une façon de faire de "l'héritage de Classe" avec Javascript.

Alors, évidemment, il n'y a pas de classes en Javascript mais un système de prototypes ce qui est complétement différent. Tous les objets sont dynamiques, en mémoire et modifiables à tout moment.

Il est possible de garder les concepts de Classes et d'instances pour programmer en javascript à condition de bien comprendre comment fonctionne le système par prototypes.

Tu n'utilises pas la fonciton extend() donc tu es obligé de recréer la "méthode" action() ( je mets bien le mot méthode entre guillemets : c'est une fonction que j'utilise en tant que méthode par référence à la façon de programmer par Classes/Instances comme dans Java ou autre). Alors, même si tu recrée la "méthode" action()  dans l'obejt Chat en utilisant la méthode action() de l'objet Animal.prototype, tu es quand même obligé de la recréer dans Chat. Imagine si tu as une dizaine de "méthodes" à recréer ainsi !!! De même, imagine que tu doive rajouter à un code existant, une "méthode" dans la "classe parente" pour que tes "classes" filles déjà écrites en bénificient : tu devrais les recréer dans toutes les "classes filles".

L'utilisation de cette fonction extend() n'est pas la seule façon de s'y prendre. Il semble qu'il y ait une fonction Objetct.create() qui peut être utilisée mais elle ne fonctionne pas partout.... et il y a peutêtre encore d'autres façons de s'y prendre.

Alors, d'après d'autres informations que j'ai pu voir, en Javascript, il n'est pas nécessaire d'utiliser les concepts de l'héritage etc puisque n'importe quelle fonction peut être appelée dans n'importe quel contexte avec les fonctions call et apply.

C'est une question de choix.

Pour ma part, je souhaite programmer en Javascript avec les concepts de Classes etc car, j'aurais tendance à formuler mes obejts en utilisant UML puis en programmant en Javascript (avec P5.js) et/ou en Java (avec Processing) (tout en gardant les même shémas UML pour m'y retrouver).

------------------------------

Dans Javaxript, on pourrait (en s'y prenant comme dans mon exemple) écrire que :

uneInstanceDeLaClasseTruc-----(prototype)---->ClasseTruc.prototype-------(prototype)----->ClasseParenteDeTruc.prototype

En se rendant compte que : uneClasse.prototype va contenir les valeurs par défaut des variables + les méthodes de la "Classe" mais pas le constructeur qui lui se trouve dans l'objet uneClasse proprement dit (et d'ailleurs dans toutes les instances puisque new crée une copie de uneClasse )

Si on veut pousser le bouchon plus loin pour que le code du constructeur soit aussi dans uneClasse.prototype on pourrait écrire un code de ce genre :

function Machin(<arguments éventuels>) {
_constructeur(<arguments éventuels = les même !!!>);
}

var Machin.prototype._constructeur = function(<...>) {
-------le constructeur ici-----
}

Le caractère souligné _ devant une fonction ou une variable indiquant au programmeur qu'il s'agit d'une variable ou méthode privée/protégée (même si elle 'nest pas réellement privée /protégée pusique qu'on peut l'utiliser techniquement quand don veut).

Bon, mais le gain en mémoire ne justifie pas forcément cette petite complication du code.

Remarque : je sait qu'il existe un attiribut constructor mais je n'ai pas encore bien compris cet aspect ! smile

Hors ligne

 

#12 2016-06-11 23:28:47 Re : Javascipt avec de la classe

Tepaze
membre
Lieu: Angers
Date d'inscription: 2014-04-14
Messages: 182

Re: Javascipt avec de la classe



Je reste dubitatif... tongue
Je n'ai jamais programmé en Java. Et je n'ai utilisé des classes qu'en php. Donc peut être quelque chose m'échappe...
Pour autant, créer un héritage en Javascript, jusqu'a maintenant j'ai fais comme cela (l'exemple est un peu long, désolé):

citation :

Mamifere = function(init_nom){
    var _this=this, nom=init_nom, zone_evolution="terrestre";

    this.nb_pattes=0;

    this.zone_evolution = function(){
        if ( typeof(arguments[0]) != "undefined" ){
            zone_evolution = arguments[0];
        }else{
            return zone_evolution;
        };
    };

    this.est_bipede = function(){
        if ( this.nb_pattes == 2 ){
            return true;
        };
        return false;
    };

    this.son_nom = function(){
        return nom;
    }

    this.deplacement = function(){
        if ( zone_evolution == "terrestre" ){
            return "marche";
        }
        return "Non Définit";
    };

    return this;
};

animal1 = new Mamifere("homme_1");
console.log(animal1.son_nom());

animal1.nb_pattes = 2;

console.log((animal1.est_bipede()) ? "Bipede" : "Non Bipede");
console.log(animal1.zone_evolution());

var Baleine = function(init_nom){
    Mamifere.call(this, init_nom);
    this.deplacement = function(){
        if ( this.zone_evolution() == "aquatique"){
            return "Nage";
        }
        return "undefined";
    }
    this.nb_pattes = 0;
};


var Chat = function(init_nom){
    Mamifere.call(this, init_nom);

    var type_poils;
    this.nb_pattes = 4;
   
    this.type_poils = function(){
        if ( typeof(arguments[0]) != "undefined" ){
            type_poils = arguments[0];
        }else{
            return type_poils;
        };
    };
};


var moby_dick = new Baleine("moby_dick");
console.log(moby_dick.son_nom());
console.log((moby_dick.est_bipede()) ? "Bipede" : "Non Bipede");

moby_dick.zone_evolution("aquatique");

console.log(moby_dick.zone_evolution());
console.log(moby_dick.deplacement());

// Les fonction ci dessous étant uiquement pour la Classe Chat, une erreur est produite.
//moby_dick.type_poils("inconnu par moi");
//console.log(moby_dick.type_poils());


var miaout = new Chat("MiAout");
console.log(miaout.son_nom());
console.log((miaout.est_bipede()) ? "Bipede" : "Non Bipede");
console.log(miaout.son_nom());
console.log(miaout.zone_evolution());

miaout.type_poils("roux");
console.log(miaout.type_poils());

On retrouve donc des variables privées (non accessibles sans passer par une "méthode"), des variables publics (this.nb_pattes), des fonctions héritées sans avoir à les ré-écrires...

Je n'ai utilisé le prototypage que lors de la création d'objet complexe (pour moi, c'est donc relatif big_smile) où l'objet était crée à la fin de la définition de la fonction. Par exemple un objet gérant le comportement d'un GUI (et à cette occasion j'utilisais le mot clé constructor) :

citation :

var Mon_Nom = (function(){
  var constructor = function(){
    this.nom = "toto";
  };

  constructor.prototype.mon_nom = function(){
    return "mon nom est : "+this.nom;
  }

  return new constructor();
})();
console.log(Mon_Nom.mon_nom());

Je te fais part de mes expériences, car j'ai fais cela en me renseignant, mais de façon empirique, et je me suis toujours demandé si j'utilisais la bonne façon, car j'ai toujours trouvé bizarre la façon de faire par rapport au php par exemple... Du coup, le fait que tu t'y intéresse me replonge la dedans lol

En espérant être utile à ta reflexion...

Hors ligne

 

#13 2016-06-13 14:44:26 Re : Javascipt avec de la classe

EricRG
membre
Lieu: Lorient
Date d'inscription: 2008-03-11
Messages: 170
Site web

Re: Javascipt avec de la classe



Coucou,

je pense qu'il y a plusieurs "bonnes façons" de s'y prendre !

Je vais étudier ton message précédent et je reviens smile

Hors ligne

 

#14 2016-06-13 15:07:09 Re : Javascipt avec de la classe

EricRG
membre
Lieu: Lorient
Date d'inscription: 2008-03-11
Messages: 170
Site web

Re: Javascipt avec de la classe



Je me pose une autre question :

J'ai vu su'il était possible d'avoir un passage de paramètres à une fonction en utilisant un objet comme cela :

chose=uneFontion({
unParametre: bla,
unAutre: blablabla
})

où bla et blablabla peuvent être une valeur ou une fonction

mais je me demande comment l'on récupère ces valeurs dans le code de la fonction...cool

Hors ligne

 

#15 2016-06-13 18:18:24 Re : Javascipt avec de la classe

Tepaze
membre
Lieu: Angers
Date d'inscription: 2014-04-14
Messages: 182

Re: Javascipt avec de la classe



Salut,

Tous les arguments passé à une fonction sont dans l'objet arguments
ex :

function affiche(){
  for(i in arguments) alert(i);
}

Hors ligne

 

fil rss de cette discussion : rss

Pied de page des forums

Powered by FluxBB

codelab, graphisme & code : emoc / 2008-2017