L'Orienté Objet

avec
JavaScript 

Brace yourself for
ES6+, Angular  & TypeScript

Par Loïc TRUCHOT 

  1. Programmation Orientée Objet: les bases
    • 0 & 1 -->   vars  & funcs   -->   objects
    • Une usine universelle pour les objets
    • et dans JavaScript ?
       
  2. ECMA Script 5 classes & objects
    • OOPs Oo  
    • THAT this
    • an emulated class
    • an emulated inheritance
       
  3. Ecma Script 6 classes & objects
    • use class & classes vocabulary
    • other tips for ES6
       
  4. TypeScript classes & objects
    •  first steps with typescript

Table of contents

1 - OOP Basis: 0 & 1

  • Aristotle to Wittgenstein: logical truth tables 
  • Flowcharts, CPU, algorithmic, langage, In/Out
  • transistors
  •  turing machine

Qu'est ce qui a mené à la POO ?

  • Stocker données dans vars 
  • Stocker les procédures réutilisables (aka functions)
  • Stocker des branches de vars (aka hashtable or objects)
  • Ordonner procédures
  • Une branche devient un "sous-programme" avec ses procédures
  • Programme: arbre de vars et funcs qui utilisent ces vars
var a = 5;
var b = false;
var c = 2 + 3;
var d = function() { 
  console.log('program scope:', a + c); 
} // 1 2

if (a === c) { // 1 3
    d(); // 4
} else {
    a = b; // 1 2
}

var newProgram = {
    a: 5,
    b: false,
    c: 2 + 8,
    d: function() { 
      console.log('subprogram :', this.a + this.c); 
    }
}

newProgram.d();

Une usine universelle

  • le scope du sous programme est appelé this
  • Platon: idéalisme & classes
  • variables deviennent properties
  • Un usine, un moule pour créer de nouveaux objets : le constructor
  • functions deviennent methods
  • un concept = une classe, une réalité = un objet

  Organiser et rester DRY

  • Vocabulaire spécifique pour indiquer les liens et éviter les accidents: public, protected, private, etc.
  • Héritage: une class peut extends une autre class
  • Kant: abstract class &  methods to extend, interface à implement, override, etc.
  • Méthodes et paramètres avec le mot clef static

Les classes dans JavaScript ES5

  • Sartre et le matérialisme: "L'existence précède l'essence."
  • JavaScript n'est pas nativement OO: ​
    • Multi-paradigmes, principalement fonctionnel
    • Orienté Prototype
  • Utiliser les objets en tant que prototypes pour créer d'autres objets
  • JS est devenue trop populaire, les  dev OO ont eu besoin d'utiliser ce paradigme avec JS (voir scandale ES4)
  • La communauté JS a inventé plusieurs patterns OO après ES5
  • ES6 a introduit des raccourcis vers ces patterns, et non pas une vraie Orientation Objet
var dog = {
  concept: 'animal',
  species: 'dog',
  paws: 4,
  sayIMBeautiful: function () {
    console.log("I'm a beautiful " + this.species + 
  ', the cutest ' + this.concept + ' with ' + this.paws + ' paws.');
  }
}

var Cat = function () {
}
Cat.prototype = dog;

cat = new Cat();
dog.sayIMBeautiful();
cat.sayIMBeautiful();
var bonjour = {};

console.log(bonjour.constructor)

Exemple orienté prototype 1

// PROTOTYPE
var player = {
  name: "unknow player",
  score: 0,
  win: function() {
    this.score++;
  },
  displayScore: function() {
    console.log("score of " + this.name + " is " + this.score);
  }
};

var peach = Object.create(player);
peach.name = 'Peach';
peach.win();
peach.displayScore();
console.log(peach);

// composition over inheritance

Exemple orienté prototype 2

2 - OO ES5:  OOPs oO

  • avant ES6: classes émulées
  • Tout est objet, malgré les faux "types": tout a des methodes & propriétés
  • Tous est  instanceof d'une simili-class 
  • Cela reste des « fausses classes » : en fait, des clones d'objets avec un this et un prototype
var planet =  {
  name: 'Mars'
}
console.log('typeof ' + planet.name + ' is ' + typeof planet);

console.log('constructor of ' + planet.name + ' is ' + planet.constructor)

var fish = "killerwhale".replace('k', '');
console.log('typeof ' + fish + ' is ' + typeof fish);
console.log('construct of ' + fish + ' is ' + fish.constructor)


console.log(planet instanceof Object);
console.log(fish instanceof String);

// replace ? toString ?
console.log((2).toString())
console.log('test'.replace('t', ''));

  THAT this

  • confusing this
  • bind this and arrow functions
  • call this
  • bootstrap this with new
  • this in objects
  • this in functions

 ES5:  emuler une  class

  • One class, one scope
  •  constructor ?
  •  public properties ?
  •  public methods ?
  •  public & static ?
  •  private props & methods ?
  •  private static ?

 ES5:  émuler l'héritage

  •  equivalent of extends
  •  equivalent of super
  •  what a mess...

 ES6: la grande class

  •  ...but a lot more simplier
  •  and extends sounds so good....
  •  a shortcut...
  • exept the lack of OO vocabulary & concepts

 TypeScript: ESNext, vivons dans le futur

export class Player {
  public name;
  private _banned;
  private _level;
  readonly type = 'Human Player';
  protected isRich = false;
  static levels = {
    n: 'noob',
    a: 'average',
    m: 'master'
  };
  constructor(name, public age, banned?) {
    this.name = name;
    this._banned = banned;
  }
  getStatus() {
    return this._banned;
  }
  get formattedAge() {
    return this.age + ' ans';
  }
  set level(lvl) {
    this._level = Player.levels[lvl];
  }
  get level(): string {
    return this._level;
  }
}

 TypeScript: ESNext, vivons dans le futur

import { Player } from './Player.class';

export class RichPlayer extends Player {
  constructor(name, age, public amount) {
    super(name, age, false);
    // this._banned = true;
    this.isRich = true;
  }
  getStatus() {
    console.log('Les joueurs riches ne peuvent pas être bannis');
    return super.getStatus();
  }
}

OOJS2019

By Loïc TRUCHOT

Made with Slides.com

OOJS2019

  • 332

More from Loïc TRUCHOT