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

JavaScript Discussion :

Onze idées fausses sur l'héritage en JavaScript [Tutoriel]


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut Onze idées fausses sur l'héritage en JavaScript


    Je vous propose aujourd'hui une traduction d'un billet de blog posé sur Medium par Eric Elliott, intitulé « Common Misconceptions About Inheritance in JavaScript ». Eric Eliott est l'auteur de plusieurs ouvrages sur la programmation d'applications JavaScript et un speaker bien connu dans les conférences de développeurs.

    Dans cet article, Eric fait le tour des idées fausses qu'il entend régulièrement sur les notions d'héritage en JavaScript. En particulier, il s'oppose à l'idée généralement répandue que l'héritage classique à base de classes est le plus approprié pour JavaScript. Si vous êtes un adepte de la programmation orientée objet mais maîtrisez encore mal la notion de prototypes, c'est une lecture indispensable pour bien appréhender le langage. Eric est connu pour ses opinions bien tranchées, mais ses conseils sont généralement avisés.

    Sans plus attendre, voici l'article :
    Onze idées fausses sur l'héritage en JavaScript

    Et le billet original sur Medium.

    Bonne lecture, et n'hésitez pas à poursuivre le débat en commentaires.

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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
    /*
     * II code 2
     * Attention notation template, pas "..." mais `...`
     */
     
    let animal = {
        'animalType' : 'animal',
        describe( ){
            return `An ${this.animalType}, with ${this.furColor} fur,
                ${this.legs} legs, and a ${this.tail} tail.`;
        }
    };
     
    /*
     * Mauvais usage de assign() entraînant l'usage inutile
     * de create() et une dégradation des performances.
     *
     * Le nouvel objet mouse est une copie de l'objet animal
     * modifié par un objet anonyme. Donc mouse contient la
     * méthode describe().
     */ 
     
    let mouse = Object.assign( {}, animal, {
        'animalType' : 'mouse',
        'furColor' : 'brown',
        'legs' : 4,
        'tail' : 'long, skinny'
    });
     
    // L'auteur utilise cette écriture, voir X code 2 : let ninjamouse = Object.assign( {}, mouse, ninja );
     
    console.log( 'mouse : ', mouse.describe() );
    /*
     * An mouse, with brown fur,
                4 legs, and a long, skinny tail.
     */
     
    console.log( 'mouse keys : ', Object.keys( mouse ) );
    // ["animalType", "describe", "furColor", "legs", "tail"]

    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
    /*
     * III code 1
     * Attention notation template, pas "..." mais `...`
     */
     
    let animal = {
        'animalType' : 'animal',
        describe( ){
            return `An ${this.animalType} with ${this.furColor} fur,
                ${this.legs} legs, and a ${this.tail} tail.`;
    }
    };
     
    let mouseFactory = function mouseFactory( ){
        return Object.assign( {}, animal, {
            'animalType' : 'mouse',
            'furColor' : 'brown',
            'legs' : 4,
            'tail' : 'long, skinny'
        });
    };
     
    let mickey = mouseFactory();
     
    console.log( 'mickey : ', mickey.describe() );
    /*
     * An mouse with brown fur,
                4 legs, and a long, skinny tail.
     */
     
    console.log( 'mickey keys : ', Object.keys( mickey ) );
    // ["animalType", "describe", "furColor", "legs", "tail"]
    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
    /*
     * IV code 1
     * Attention notation template, pas "..." mais `...`
     */
     
    let animal = {
        'animalType' : 'animal',
        describe( ){
            return `An ${this.animalType} with ${this.furColor} fur,
                ${this.legs} legs, and a ${this.tail} tail.`;
        }
    };
     
    let mouseFactory = function mouseFactory( ){
        let secret = 'secret agent';
     
        return Object.assign( {}, animal, {
            'animalType' : 'mouse',
            'furColor' : 'brown',
            'legs' : 4,
            'tail' : 'long, skinny',
            profession( ){
                return secret;
            }
        });
    };
     
    let james = mouseFactory();
     
    console.log( 'james : ', james.describe() );
    /*
     * An mouse with brown fur,
                4 legs, and a long, skinny tail.
     */
     
    console.log( 'james keys : ', Object.keys( james ) );
    // ["animalType", "describe", "furColor", "legs", "tail"]
     
    console.log( james.profession() );
    // secret agent

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    Merci c'est corrigé. On a eu quelques problèmes avec les guillemets sur cet article...

  4. #4
    Membre expérimenté
    Avatar de Paleo
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2013
    Messages
    242
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Bénin

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2013
    Messages : 242
    Par défaut
    Merci pour cet article.

    Une coquille ici :

    * nommer le type de l'objet comme le nom du constructeur […]
    * permettre à de vérifier ou non si la référence

  5. #5
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    Il manquait des mots, un bug à la génération de l'article. Merci du signalement.

  6. #6
    Membre expérimenté
    Avatar de Paleo
    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2013
    Messages
    242
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Bénin

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Septembre 2013
    Messages : 242
    Par défaut
    Sinon le contenu de cet article est vraiment bon, et les pointeurs vers les autres articles du même auteur le sont tout autant. Je suis sensible à la critique des hiérarchies d'héritage en POO. Je crois que je vais tenter un essai avec stampit.

Discussions similaires

  1. Un pseudo héritage en javascript
    Par sekaijin dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 05/07/2006, 11h31
  2. Construire chemin sur bouton avec évt Javascript
    Par Ph. B. dans le forum XMLRAD
    Réponses: 4
    Dernier message: 27/05/2003, 10h26

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