IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Contribuez Discussion :

[source]constructeur ou extension javascript poo ?


Sujet :

Contribuez

  1. #1
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut [source]constructeur ou extension javascript poo ?
    En fait je ne sais pas trop comment l'appeler ...

    c'est assez limité au niveau utilisation, mais j'ai trouvé le principe tellement fun que j vous livre le code...

    Ce code s'applique lorsque l'on utilise ce type de programmation en javascript
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var func1 = function(nom, prenom){ 
    				this.nom=nom;
    				this.prenom=prenom;
    				}
    on instancie un objet :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var foo=new func1('Axel','Bazar')
    ce qui permet ensuite :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    alert(foo.nom+ ' ' +foo.prenom)
    imaginons que l'on veuille surcharger (etendre) func1 ...
    Je n'ai trouvé aucune methode permettant de le faire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    function extend(fn,prop){
    var reg=/function\(([^)]*)\)\{((.*|(\r\n)*)*)\}/gim
    reg.exec(fn.toString())
    return new Function(RegExp.$1+',prop',RegExp.$2+'this.'+prop+'=prop;')
    }
    utilisation:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    func1=extend(func1,'adresse')
    ce qui permet ensuite de faire:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var bar=new func1('Axel','Bazar','Paris')
    alert(bar.nom+' '+bar.prenom+' à ' +bar.adresse)
    J'ai peut être réinventé le fil à couper l'eau tiède nucléaire ?
    De là a vous dire précisément l'utilité de la chose ...

    PS j'ai tenté de le prototyper mais cela supposerait de pouvoir modifier this dans le prototype, d'ou la nécessité de passer par une fonction anonyme séparée
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  2. #2
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : Février 2009
    Messages : 354
    Points : 491
    Points
    491
    Par défaut
    salut spacefrog, ton script ressemble à la sur définition des méthodes.

    Me suis amusé à faire un petit script aussi

    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
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="style/menu.css" type="text/css" />
    <link rel="stylesheet" href="style/menuh.css" type="text/css" />
     
    <script type="text/javascript" >
     
     
     
     
        function Class(config, extend){
            config.initialize = config.initialize || function(){};
            //le super constructeur
            var klass = function(){
                if(this.initialize.overdefined){
                    this.initialize.overdefined[arguments.length].apply(this, arguments);
                }else
                    this.initialize.apply(this, arguments);
     
            };
     
            if(extend){
                // on hérite classiquement la classe 
                var tmp = function(){};
                tmp.prototype =  extend.prototype;      
                klass.prototype = new tmp();
     
                //pour chaque fonction du prototype  on définit la méthode inherit
                var overdefined;
                for(var i in config){
                    klass.prototype[i] = config[i];
                    if(typeof config[i] == 'function'){
                        var m = extend.prototype[i];
                        if(overdefined = config[i].overdefined){
                            for(var j in overdefined)
                                overdefined[j].inherit = Class.getInherit(m);
                        }else
                            config[i].inherit = Class.getInherit(m);
                    }
                }
     
            }else klass.prototype = config;
     
            //return le constructeur    
            return klass;
        }
     
        //retourne la fonction inherit en fonction de la méthode dérivé (si surdéfinit ou pas)
        Class.getInherit = function(method){
            return function(obj, args){
                return (method.overdefined ? method.overdefined[args.length]: method).apply(obj, args || []);
            }
        };
     
        //créer une méthode surdéfinit, qui renvoie la bonne méthode en fonction du nombre de paramatre
        Class.overdefine = function(){
            function func(obj){
                var args = Array.prototype.slice.call(arguments);
                args.shift();
                return func.overdefined[args.length].apply(obj, args);
            }
            func.overdefined = {};
     
     
            func.addFunction = function(fn){
                var m = fn.toString().match(/function\s*\w*\((.*)\)/); 
                func.overdefined[m ? m[1].split(',').length : 0] = fn; 
                fn.overdefined = func;
            };
     
            for(var i = 0, l = arguments.length; i < l; i++)
                func.addFunction(arguments[i]);
     
            return func;
        };
     
        var Personne = Class({
            //constructeur
            initialize : function(sexe, age){
                this.sexe = sexe;
                this.age = age;
            },
            affiche : function(){
                return 'Je suis une personne de sexe ' + 
                this.sexe + ', j\'ai ' +this.age+ 'ans' +
                (this.nationnalite ? ' et j\'ai la nationnalité ' + this.nationnalite + '.' : '.')+
                (this.religion ? ' et je suis ' + this.religion + '.' : '.');
            }
        });
     
        //rajoute une méthode surdéfinit
        Personne.prototype.initialize = Class.overdefine(Personne.prototype.initialize, 
            function(sexe, age, nationnalite){
                arguments.callee.overdefined(this, sexe, age);//appel au constructeur surdéfinit à deux parametre
                this.nationnalite = nationnalite;
            } 
        );
     
        //rajoute une méthode aux tableau de méthode surdéfinit
        Personne.prototype.initialize.addFunction(function(sexe, age, nationnalite, religion){
                arguments.callee.overdefined(this, sexe, age, nationnalite);//appel au constructeur à trois parametre
                this.religion = religion;
            } 
        );
     
        alert(new Personne('masculin', 28).affiche());
        alert(new Personne('masculin', 28, 'Française').affiche());
        alert(new Personne('masculin', 28, 'Française', 'athée').affiche());
     
        var Parent = Class({
            //le constructeur , surdéfinit , 
            initialize : Class.overdefine(
                function(sexe, age, nbEnfants){
                    arguments.callee.inherit(this, [sexe, age]);//appel de la méthode dérivé
                    this.nbEnfants = nbEnfants;
                },function(sexe, age, nationnalite, nbEnfants){
                    arguments.callee.inherit(this, [sexe, age, nationnalite]);
                    this.nbEnfants = nbEnfants;
                }
            ),
            affiche : function(){
                return arguments.callee.inherit(this) + 'Et j\'ai ' +this.nbEnfants+ ' enfant(s)';
            }
        }, Personne);
     
        alert(new Parent('masculin', 28, 0).affiche());
        alert(new Parent('masculin', 28, 'Française', 0).affiche());
     
    </script>
     
    </head>
     
    <body>
     
    </body>
    </html>
    a+

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    Gros défaut de ma methode elle est destructrice. si l'on surcharge une fonction déja instanciée, elle perd son contenu
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Peut-être avec
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    var func1 = function(nom, prenom){ 
    	this.nom=this.nom || nom;
    	this.prenom=this.prenom || prenom;
    }
    non ?
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 637
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 637
    Points : 66 658
    Points
    66 658
    Billets dans le blog
    1
    Par défaut
    Non en fait faudrait faire une boucle pour cloner le contenu ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  6. #6
    Membre confirmé
    Profil pro
    Inscrit en
    Février 2009
    Messages
    354
    Détails du profil
    Informations personnelles :
    Localisation : France, Sarthe (Pays de la Loire)

    Informations forums :
    Inscription : Février 2009
    Messages : 354
    Points : 491
    Points
    491
    Par défaut
    Gros défaut de ma méthode elle est destructrice. si l'on surcharge une fonction déjà instanciée, elle perd son contenu
    J'ai pas bien compris , mais je vois au moins deux problèmes avec ta méthode.
    1 - Si on surcharge un constructeur, les nouvelle instances ne sont plus du même type que les précédentes.
    2 - On peux plus appeler l'ancien constructeur , ce qui est le but de surcharger une méthode.

    le seule moyen pour simuler la surcharge c'est de passer par le prototype, en appelant les méthode dans leur contexte de classe et non pas de prototype...

Discussions similaires

  1. Bloquer images chrome extension Javascript
    Par imothep85 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 17/05/2015, 14h27
  2. Réponses: 2
    Dernier message: 20/03/2015, 17h33
  3. Réponses: 0
    Dernier message: 29/11/2009, 21h58
  4. Changement de source d'image via javascript
    Par jultoys dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 12/05/2007, 16h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo