[Mini-tuto] Programmation orienté objet en JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Création d'une fonction constructeur Foo
function Foo(arg1) {
   /* *** ATTRIBUTS *** */
   this.attr1 = "One";
   this.attr2 = arg1;
 
   // METHODE PRIVILEGED
   this.method1 = function(param1) {
      console.log(this.attr1 + " " + this.attr2 + " " + param1);
   };
}
 
// Instanciation de l'objet
var myInstance = new Foo("Two");
 
// Exécuter une méthode
myInstance.method1("Three");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Création d'une fonction constructeur
function Foo(arg1){
   /* *** ATTRIBUTS *** */
   this.attr1 = "One";
   this.attr2 = arg1;
 
   /* *** NE PAS DECLARER VOS METHODES ICI !!! *** */
}
 
/* *** DEFINITION DES METHODES *** */
Foo.prototype.method1 = function(param1) {
   console.log(this.attr1 + " " + this.attr2 + " " + param1);
};
 
// Instanciation de l'objet
var myInstance = new Foo("Two");
 
// Exécuter une méthode
myInstance.method1("Three");

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
// https://tc39.github.io/ecma262/#sec-array.prototype.includes
if (!Array.prototype.includes) {
  Object.defineProperty(Array.prototype, 'includes', {
    value: function(searchElement, fromIndex) {
 
      // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }
 
      var o = Object(this);
 
      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;
 
      // 3. If len is 0, return false.
      if (len === 0) {
        return false;
      }
 
      // 4. Let n be ? ToInteger(fromIndex).
      //    (If fromIndex is undefined, this step produces the value 0.)
      var n = fromIndex | 0;
 
      // 5. If n ≥ 0, then
      //  a. Let k be n.
      // 6. Else n < 0,
      //  a. Let k be len + n.
      //  b. If k < 0, let k be 0.
      var k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
 
      function sameValueZero(x, y) {
        return x === y || (typeof x === 'number' && typeof y === 'number' && isNaN(x) && isNaN(y));
      }
 
      // 7. Repeat, while k < len
      while (k < len) {
        // a. Let elementK be the result of ? Get(O, ! ToString(k)).
        // b. If SameValueZero(searchElement, elementK) is true, return true.
        // c. Increase k by 1. 
        if (sameValueZero(o[k], searchElement)) {
          return true;
        }
        k++;
      }
 
      // 8. Return false
      return false;
    }
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// Création d'une fonction constructeur enfant
function ChildFoo(arg1, arg2) {
   Foo.call(this, arg1); // Appel du constructeur parent
   this.attr3 = arg2;
}
 
/* *** HERITAGE PAR PROTOTYPE *** */
ChildFoo.prototype = Object.create(Foo.prototype);
 
/* *** DEFINITION DES METHODES DE LA FONCTION CONSTRUCTEUR ENFANT *** */
ChildFoo.prototype.method2 = function(param1, param2) {
   console.log(this.attr1 + " " + this.attr2 + " " + this.attr3 + " " + param1 + " " + param2);
};
 
// Instanciation de l'objet
var c = new ChildFoo("Two", "Three");
 
// Exécuter une méthode
c.method1("Three");         // Hérité de Foo
c.method2("Four", "Five");

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var anonymousInstance = undefined;
 
// Création d'un objet sans properties (5 styles d'écritures équivalents)
anonymousInstance = {};
anonymousInstance = new Object();
anonymousInstance = Object.create(Object.prototype);
anonymousInstance = new function() {};
anonymousInstance = new class {}; // ES6 only
 
// Création des properties
anonymousInstance.a = 1; 
anonymousInstance.b = 2;
anonymousInstance.c = function() {
   // Code...
};

1
2
3
4
5
var o = new Bar(2, 4);
console.log(o.privilegedMethod());
console.log(o.publicAttribute);
console.log(Bar.staticAttribute); // ES5 only
console.log(Bar.staticMethod());