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 !
Partager