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 !