Discussion :

[Invité]

Bonjour à tous,

Ces temps-ci je me consacre beaucoup au Javascript. J'ai testé un peu CoffeeScript parce qu'il fourni des astuces assez intéressantes. Je ne suis pas fan de la syntaxe en elle-même mais je me suis intéressé au comment de deux astuces particulières : le "=>" qui permet de binder une fonction à un scope précis, et l'héritage.

Autant j'ai bien pigé le coup du "=>", autant j'ai quelques difficultés avec certaines instructions que CoffeeScript génère lors de l'héritage. Je ne comprend pas à quoi elles servent.

Voici un exemple qui utilise la manière de faire de CoffeeScript :

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
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
var utils = {};
 
utils.anchor = function(callback, scope) {
    return function() {
        return callback.apply(scope, arguments);
    }
};
 
utils.hasProp = {}.hasOwnProperty;
 
utils.extends = function(child, parent) {
    for (var key in parent) {
        if (utils.hasProp.call(parent, key)) child[key] = parent[key];
    }
    function constructor() {
        this.constructor = child;
    }
    constructor.prototype = parent.prototype;
    child.prototype = new constructor();
    child.super = parent.prototype;
    return child;
};
 
var Person = function() {
    function Person(name) {
        this.name = name;
 
        this.hello = utils.anchor(this.hello, this);
        this.present = utils.anchor(this.present, this);
    }
 
    Person.prototype.hello = function() {
        console.log('Hello !');
    };
 
    Person.prototype.present = function() {
        console.log('My name is ' + this.name);
    };
 
    return Person;
}();
 
var Student = function() {
    utils.extends(Student, Person);
 
    function Student() {
        return Student.super.constructor.apply(this, arguments);
    }
 
    Student.prototype.present = function() {
        Student.super.present.apply(this, arguments);
        console.log('Im a student');
    };
 
    return Student;
}();
 
var toto = new Person('toto');
toto.hello();
toto.present();
setTimeout(toto.present, 1000);
var titi = new Student('titi');
titi.hello();
titi.present();
setTimeout(titi.present, 1000);

Et voici le code avec certaines instructions commentées dont je ne comprend pas l'utilité : le code produit le même résultat.

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
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
var utils = {};
 
utils.anchor = function(callback, scope) {
    return function() {
        return callback.apply(scope, arguments);
    }
};
 
//utils.hasProp = {}.hasOwnProperty;
 
utils.extends = function(child, parent) {
    /*for (var key in parent) {
        if (utils.hasProp.call(parent, key)) child[key] = parent[key];
    }*/
    function constructor() {
        //this.constructor = child;
    }
    constructor.prototype = parent.prototype;
    child.prototype = new constructor();
    child.super = parent.prototype;
    return child;
};
 
var Person = function() {
    function Person(name) {
        this.name = name;
 
        this.hello = utils.anchor(this.hello, this);
        this.present = utils.anchor(this.present, this);
    }
 
    Person.prototype.hello = function() {
        console.log('Hello !');
    };
 
    Person.prototype.present = function() {
        console.log('My name is ' + this.name);
    };
 
    return Person;
}();
 
var Student = function() {
    utils.extends(Student, Person);
 
    function Student() {
        return Student.super.constructor.apply(this, arguments);
    }
 
    Student.prototype.present = function() {
        Student.super.present.apply(this, arguments);
        console.log('Im a student');
    };
 
    return Student;
}();
 
var toto = new Person('toto');
toto.hello();
toto.present();
setTimeout(toto.present, 1000);
var titi = new Student('titi');
titi.hello();
titi.present();
setTimeout(titi.present, 1000);

Est-ce que quelqu'un comprend l'utilité des lignes commentées du deuxième code ?

Merci par avance !

[MaitreKaio]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
for (var key in parent) {
        if (utils.hasProp.call(parent, key)) child[key] = parent[key];
    }

Ce code sert à recopier dans l'enfant toutes les propriétés du parent. Probablement que c'est utile au fonctionnement interne du langage ?

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

//utils.hasProp = {}.hasOwnProperty;

ceci sert à verifier si les propriétés de l'objet sont natives ou étendues

[Invité]

Merci pour vos réponses !

Effectivement, je n'avais pas pensé au cas où des propriétés étaient insérées directement dans la fonction parente. Du coup si on fait quelque chose du type

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Parent.something = function() { /* ... */ }

avant l'exécution de l'héritage, alors Enfant aura aussi la propriété something.

EDIT :
Le coup du "this.constructor = child;" s'éclaire aussi.
Dans le code posté, il n'est pas utilisé, mais si on rajoute à la fin

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
console.log(toto.constructor);
console.log(titi.constructor);

le premier code affichera "Person" et "Person"
le deuxième code affichera "Person" et "Student"
Je n'avais pas saisi ça car je n'ai jamais utilisé la propriété constructor stockée dans le __proto__.

[Kaamo]

Le simple fait d'assigner au prototype d'un nouvel objet un autre objet permet de lui assigner toutes ses propriétés.