Le futur de Javascript : ECMAScript 6 et ECMAScript 5

[Maks]

D'abord l'état actuel d'ES5

http://kangax.github.com/es5-compat-table/#

Conclusion :
Firefox : Depuis la v4 tout y est
Chrome : Tout y est depuis la v10
Safari : Ok depuis v5.1 (5.1.4 pour Function.prototype.bind en plus)
Opera 12 : Ok mais pas encore sortie
Opera < 12 : bah.... [/troll of]
IE 9 : Tout y est c'est dire

Les oubliés d'ES5

https://developer.mozilla.org/en/JavaScr...rototypeOf

GetPrototypeOf() : retourne le prototype d'un objet

=> similaire à obj.prototype ??

Les autres toujours pour les objets : https://developer.mozilla.org/en/JavaScr...ript/1.8.5

exemples d'application : http://ejohn.org/blog/ecmascript-5-objec...roperties/

object.create()

var obj = Object.create(Object.prototype);

var obj2 = {};



// la meme chose

Bon...

Object.defineProperty()

var o = {}; // Creates a new object  

  

Object.defineProperty(o, "a", {value : 37,  

                               writable : false});  

  

alert(o.a); // alerts 37  

o.a = 25;  

alert(o.a); // alerts 37. The assignment didn't work. No error thrown 

Oh une constante !

Les "vrais" setters et getters actuellement :

// Example of an object property added with defineProperty with an accessor property descriptor  

var bValue;  

Object.defineProperty(o, "b", {get : function(){ return bValue; },  

                               set : function(newValue){ bValue = newValue; },  

                               enumerable : true,  

                               configurable : true});  

o.b = 38;  

// 'b' property exists in the o object and its value is 38  

// The value of o.b is now always identical to bValue, unless o.b is redefined  

Object.preventExtensions(obj)

var obj = {};  

var obj2 = Object.preventExtensions(obj);  

Maintenant impossible d'ajouter des attributs/méthodes publiques à obj2...

Object.freezer() et Object.seal() permet aussi de réglementer ça aussi.

Conclusion : Ces méthodes permettent de mieux gérer les objets, clairement. Pourtant je ne vois pas beaucoup de scripts les utilisant

Ecmascript 6

Let
Permet de déclarer une variable avec pour scope le block actuel

Ok : Firefox >= 4 avec <script type='text/javascript;version=1.7'>// foo</script>
Fail : Tous les autres (activable sous Chrome avec une manip console V8)

function letTest() {  

  let x = 31;  

  if (true) {  

    let x = 71;  // different variable  

    alert(x);  // 71  

  }  

  alert(x);  // 31  

}

Fini les closures.

Const
Permet de déclarer une constante

Ok : Chrome 17, Firefox 11, Safari 5.1.4
Fail : IE 9

Conclusion : Pourquoi s'en priver dans Node.js ? On peut donc déjà utiliser un peu d'ES6

const FOO = 2;



FOO = 3; // ne fait rien



console.log(FOO); // 2

Class
Permet de déclarer une classe

Indisponible

class Monster {

  // The contextual keyword "constructor" followed by an argument

  // list and a body defines the body of the class’s constructor

  // function. public and private declarations in the constructor

  // declare and initialize per-instance properties. Assignments

  // such as "this.foo = bar;" also set public properties.

  constructor(name, health) {

    public name = name;

    private health = health;

  }

 

  // An identifier followed by an argument list and body defines a

  // method. A “method” here is simply a function property on some

  // object.

  attack(target) {

    log('The monster attacks ' + target);

  }

 

  // The contextual keyword "get" followed by an identifier and

  // a curly body defines a getter in the same way that "get"

  // defines one in an object literal.

  get isAlive() {

    return private(this).health > 0;

  }

 

  // Likewise, "set" can be used to define setters.

  set health(value) {

    if (value < 0) {

      throw new Error('Health must be non-negative.')

    }

    private(this).health = value

  }

 

  // After a "public" modifier,

  // an identifier optionally followed by "=" and an expression

  // declares a prototype property and initializes it to the value

  // of that expression. 

  public numAttacks = 0;

 

  // After a "public" modifier,

  // the keyword "const" followed by an identifier and an

  // initializer declares a constant prototype property.

  public const attackMessage = 'The monster hits you!';

}

Notez l'apparition des setters, getters, portée et du constructeur
http://wiki.ecmascript.org/doku.php?id=harmony:classes

D'autres exemples : yield, module, import

http://www.slideshare.net/dmitrysoshniko...mascript-6
https://developer.mozilla.org/en/JavaScr...in_Mozilla

Ecrire de l'ES6 dès maintenant : http://www.thecssninja.com/demo/source_mapping/ES6/

Compatiblité ES6 : http://kangax.github.com/es5-compat-table/es6/

Voilà qui devrait relancer le débat sur le rapprochement du modèle objet de JS avec un modèle objet plus classique (ce qui devait avoir lieu avec ES4, abandonné).

---

Un exemple qui tourne (un peu lentement objectivement) en ECMAScript 6 : http://jsbin.com/uvepos/2/edit

[niahoo]

bon ben c'est bien beau tout ça mais moi j'aimerais bien utiliser les générateurs avec yield. C'est apparemment sorti depuis 2006 mais à part firefox y a pas un navigateur qui soit foutu de l'implémenter ...

[Maks]

J'ai entendu parlé des generators dernièrement, c'est ok pour node.js v0.11 donc ça devrait plus tarder sous chrome j'imagine

[niahoo]

Dommage j'aurais bien codé avec dès aujourd'hui mais je vais pas les attendre ... je repasserai sur mon appli plus tard