Constructeur

  • Utilisation des constructeurs

Exemple

Dans le dossier 5-poo :

  • Ajoutez le fichier 5-constructeur.html

1
<!DOCTYPE html>
2
<html lang="fr">
3
    <head>
4
        <title>JS POO Constructeur</title>
5
        <meta charset="utf-8" />
6
        <meta name="viewport" content="width=device-width, initial-scale=1" />
7
        <link
8
          href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css"
9
          rel="stylesheet"
10
          integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx"
11
          crossorigin="anonymous"
12
        />
13
        <style> main > div {background-color: #c5c5c5;}</style>
14
    </head>
15
    <body>
16
        <header class="p-2 bg-secondary text-light bg-gradient">
17
            <section>
18
                <h1>JS - POO - Constructeur</h1>
19
            </section>
20
        </header>
21
22
        <main>
23
            <div class="p-3 row">
24
                <h2>Cercles</h2>
25
            </div>
26
27
            <div class="row p-3">
28
                <div class="col-form-label col-1">Origine</div>
29
                <div class="col-4 row">
30
                    <div class="col input-group mb-3">
31
                        <span class="input-group-text">X</span>
32
                        <input type="text" id="x" class="form-control">
33
                    </div>
34
                    <div class="col input-group mb-3">
35
                        <span class="input-group-text">Y</span>
36
                        <input type="text" id="y" class="form-control">
37
                    </div>
38
                </div>
39
            </div>
40
            <div class="row p-3">
41
                <div class="col-form-label col-1">Rayon</div>
42
                <div class="col-4 row">
43
                    <div class="col input-group mb-3">
44
                        <span class="input-group-text">Rayon</span>
45
                        <input type="text" id="rayon" class="form-control">
46
                    </div>
47
                </div>
48
                <div class="col-2">
49
                    <button type="submit" onclick="ajouterCercle();afficher();" class="btn btn-primary">Ajouter Cercle</button>
50
                </div>
51
            </div>
52
53
            <div class='row p-3'>
54
                <div class="col-form-label col-1">Liste</div>
55
                <div class='col-6'>
56
                    <textarea id="liste" cols="60" rows="8" readonly></textarea>
57
                </div>
58
            </div>
59
60
61
        </main>
62
63
        <footer>
64
            <nav class="navbar navbar-expand-lg navbar-light bg-secondary bg-gradient">
65
              <ul class="navbar-nav mr-auto mb-2 mb-lg-0">
66
                <li class="nav-item">
67
                  <a class="nav-link" href="https://www.univ-littoral.fr/">ULCO</a>
68
                </li>
69
                <li class="nav-item">
70
                  <a class="nav-link" href="https://fcu.univ-littoral.fr/">FCU</a>
71
                </li>
72
                <li class="nav-item">
73
                  <a class="nav-link" href="https://deust-bcmm.univ-littoral.fr/">W2D</a>
74
                </li>
75
              </ul>
76
            </nav>
77
        </footer>
78
79
        <script src="js/5-constructeur.js"></script>
80
81
    </body>
82
</html>
  • Dans le dossier js ajoutez le fichier 5-constructeur.js
1
const x = document.querySelector('#x');
2
const y = document.querySelector('#y');
3
const rayon = document.querySelector('#rayon');
4
const liste = document.querySelector('#liste');
5
const listeFormes = [];
6
7
function Forme(x, y) {
8
    this.x = x;
9
    this.y = y;
10
};
11
12
Object.defineProperties(Forme.prototype, Object.getOwnPropertyDescriptors({
13
    get x() {
14
        return this._x + 'cm';
15
    },
16
    set x(x) {
17
        this._x = x;
18
    },
19
    get y() {
20
        return this._y + 'cm';
21
    },
22
    set y(y) {
23
        this._y = y;
24
    },
25
}));
26
27
function Cercle(x, y, rayon) {
28
    Forme.call(this, x, y);
29
    this.rayon = rayon;
30
};
31
32
Object.defineProperties(Cercle.prototype, Object.getOwnPropertyDescriptors({
33
    get rayon() {
34
        return this._rayon + 'cm';
35
    },
36
    set rayon(rayon) {
37
        this._rayon = rayon;
38
    },
39
    perimetre() {
40
        return 2 * Math.PI * this._rayon;
41
    },
42
    toString() {
43
        return "Cercle de centre (" + this.x + ", " + this.y +
44
            ") de perimetre " + this.perimetre().toFixed(2) + 'cm';
45
    }
46
}));
47
48
Object.setPrototypeOf(Cercle.prototype, Forme.prototype);
49
50
const ajouterCercle = () => {
51
    const newCercle = new Cercle(+x.value, +y.value, +rayon.value);
52
    listeFormes.push(newCercle);
53
    console.log("newCercle :");
54
    console.log(newCercle);
55
    console.log("newCercle.__proto__ :");
56
    console.log(newCercle.__proto__);
57
    console.log("newCercle.__proto__.__proto__ :");
58
    console.log(newCercle.__proto__.__proto__);
59
    console.log("newCercle.__proto__.__proto__.__proto__ :");
60
    console.log(newCercle.__proto__.__proto__.__proto__);
61
}
62
63
const afficher = () => {
64
     liste.value = listeFormes.reduce((texte, element) => texte + element + "\n", "");
65
}
function Forme(x, y){...} : constructeur Forme.
Object.defineProperties(Forme.prototype, descripteurs) : ajout des descripteurs au protoype de Forme.
Object.setPrototypeOf(Cercle.prototype, Forme.prototype) : crée le lien de prototypage entre Cercle.prototype et Forme.prototype.
Ouvrez dans votre navigateur le fichier 5-constructeur.html
Ouvrez la console. Vous pouvez voir l'objet newCercle et sa chaîne de prototypage.