Discussion :

[SylvainPV]

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.

[danielhagnoul]

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

[SylvainPV]

Merci c'est corrigé. On a eu quelques problèmes avec les guillemets sur cet article...

[Paleo]

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

[SylvainPV]

Il manquait des mots, un bug à la génération de l'article. Merci du signalement.

[Paleo]

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.