JeuWeb - Crée ton jeu par navigateur
Le futur de Javascript : ECMAScript 6 et ECMAScript 5 - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : Le futur de Javascript : ECMAScript 6 et ECMAScript 5 (/showthread.php?tid=5823)



Le futur de Javascript : ECMAScript 6 et ECMAScript 5 - Maks - 25-03-2012

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/JavaScript/Reference/Global_Objects/Object/GetPrototypeOf

GetPrototypeOf() : retourne le prototype d'un objet

=> similaire à obj.prototype ??

Les autres toujours pour les objets : https://developer.mozilla.org/en/JavaScript/New_in_JavaScript/1.8.5

exemples d'application : http://ejohn.org/blog/ecmascript-5-objects-and-properties/

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/dmitrysoshnikov/falsyvalues-dmitry-soshnikov-ecmascript-6
https://developer.mozilla.org/en/JavaScript/ECMAScript_6_support_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


RE: Le futur de Javascript : ECMAScript 6 et ECMAScript 5 - niahoo - 19-06-2013

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 ...


RE: Le futur de Javascript : ECMAScript 6 et ECMAScript 5 - Maks - 19-06-2013

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


RE: Le futur de Javascript : ECMAScript 6 et ECMAScript 5 - niahoo - 19-06-2013

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