JavaScript 1.5 to 2.0
   John Resig (ejohn.org)
    Mozilla Corporation
The Big Picture
                     ECMAScript 3


JavaScript 1.5   ActionScript 2      JScript        Etc.


SpiderMonke...
Jav
          aS




1999
             crip
                 t1
                    .5
       Jav




2005
          aS
  ...
The JavaScript Language
    Current:
✦
    JavaScript 1.5 (Firefox 1, ES3)
    JavaScript 1.6 (Firefox 1.5)
✦

    JavaScr...
JavaScript 1.5
    Getters and Setters
✦
    ✦ Extra power over properties
    ✦ Two powerful uses:
      ✦ Private data a...
Getters and Setters
    var n = “John”;
✦
    var obj = {};
    obj.__defineGetter__(“name”,
     function(){ return n; });...
Lazy-Loading Data
    var pixelsDone;
✦
    data.__defineGetter__(”pixels”, function(){
      if ( pixelsDone )
        ret...
JavaScript 1.6
    Array Extras
✦
    ✦ indexOf / lastIndexOf
      [0,1,2].indexOf(1) == 1
    ✦ every / filter / some
   ...
JavaScript 1.7
    Generators and Iterators
✦
    ✦ Lazy-load data
      ✦ Database querying
    ✦ Threading
      http://...
Generators and Iterators
    function fib() {
✦
      var i = 0, j = 1;
      while (true) {
        yield i;
        var t...
let
    Block-level statements
✦

    for ( let i = 0; i < 10; i++ ) { }
✦

    while ( true ) { let test = 5; }
✦

    le...
Array Comprehension
    [i for ( let i = 0; i < 3; i++ )]
✦
    // => [0, 1, 2]
    function range(begin, end) {
✦
      f...
Destructuring
    var [newA, newB] = [a, b];
✦

    var newA = a, newB = b;
✦

    [a, b] = [b, a]
✦

    function test(){...
JavaScript 1.8
    Mostly a bug fix release
✦

    Expression Closures
✦
    function(x){ return x * x; }
    function(x) x...
reduce
    Great for summing or concating
✦
    [x for ( x in 100 )]
     .reduce(function(a,b) a+b);
    [[...],[...]]
✦
...
JavaScript 1.9
    Merge object properties:
✦
    Object.extend( baseObj, otherObj )
    Function.prototype.bind()
✦
    f...
defineProperty
    Object.defineProperty(obj, name, value,
✦
    types)
    var obj = {};
✦
    Object.defineProperty(obj, “n...
JSON
    mozilla.JSON.parse(“{name:’John’}”)
✦
    // => {name: ‘John’}
    mozilla.JSON.serialize({name:’John’})
✦
    //...
Catchalls
    var props = {};
✦
    var obj = {
      test: true,
      get *(name){
        return props[name];
      },
...
JavaScript 2 Goals
    Backwards Compatible
✦

    Suitable to developing large systems
✦

    Allow for reusable librarie...
Features
    Classes and Interfaces
✦

    Packages and Namespaces
✦

    Type Annotations
✦

    Strict Verification
✦

  ...
The Direction
                         ECMAScript 4


JavaScript 2         ActionScript 4      JScript       Etc.


      ...
Tamarin
    Tamarin
✦
    ✦ New Virtual Machine from Adobe
    ✦ Perfect for ActionScript
      ✦ (a mutant cousin of Java...
Three Monkies
    ActionMonkey
✦
    ✦ Integrating Tamarin into SpiderMonkey
    ✦ Powering Firefox 4 (?) + JavaScript 2

...
Classes
Classes
    class Programmer {
✦
       var name;
       var city = “Boston, MA”;
       const interest = “computers”;
   ...
Dynamic Classes
    dynamic class Programmer {
✦
      var name;
      var city = “Boston, MA”;
      const interest = “co...
Getters and Setters
    class Programmer {
✦
       var _name;
       function get name(){ return _name; }
       function...
Catch-Alls
    dynamic class Programmer {
✦
      meta function get(name) { ... }
      meta function set(name, value) {
 ...
Inheritance
    class Artist {
✦
       function draw() { alert(“Drawing!”); }
    }
    class Designer extends Artist {
 ...
Inheritance (cont.)
    ‘final’ methods can’t be overriden
✦

    class Artist {
✦
       final function draw() {alert(“Draw...
Inheritance (cont.)
    ‘final’ classes can’t be inherited from
✦

    final class Artist {
✦
      function draw() { alert(...
Metaclass
    Provide global functions and properties on
✦
    a class object
    class Users {
✦
       static function fi...
Interfaces
    Verify that a class implements another
✦

    class Artist {
✦
       function draw();
    }

    class Des...
Types
Types
    Types are broken down into:
✦
    ✦ string
    ✦ double (ECMAScript 3-style Number)
    ✦ boolean
Type Annotations
    var name : string = “John”;
✦

    let x : double = 5.3;
✦

    function stuff( x: string, obj: Object...
Function Types
    Only return specific types:
✦
    function isValid() : boolean { }
    Only be used on certain objects t...
Rest Arguments
    function stuff( name, ...values ){
✦
      alert( values.length );
    }
    stuff( “John”, 1, 2, 3, 4 );...
Union and Any Types
    var test : (string, double) = “test”;
✦
    test = 3;
    test = {}; // ERROR
    These are equiva...
Type Definitions
    type Point = { x: double, y: double };
✦

    var p : Point = { x: 3.0, y: 24.0 };
✦
Nullability
    Prevent variables from accepting null
✦
    values
    var name : * = “John”;
✦

    var name : string! = ...
Initialization
    class User {
✦
       var name : string!; // Must be initialized
       function User( n ) : name = n {...
“like”
    type Point = { x: double, y: double };
✦

    if ( { x: 3, y: 5 } like Point )
✦
       alert( “That looks like...
Parameterized Types
    var m: Map.<string, *>;
✦

    class Point.<T> {
✦
       var x: T, y: T;
    }
    var p = new Po...
Structure
Namespaces
    namespace extra = “extra”;
✦

    Pre-defined namespaces:
✦
    ✦ __ES4__
      ✦ intrinsic
      ✦ iterator...
Multimethods
    generic function intersect(s1, s2);
✦
    generic function intersect(s1: Shape, s2: Shape ) {
      // .....
Iteration
    class Fib {
✦
       private var a=0, b=1;

        iterator function get(deep:boolean = false) : IteratorTy...
For .. Each
    For each loops through values
✦

    let s = “”;
✦
    for each ( let n in [“a”,”b”,”c”] )
        s += n;...
Self-Hosting
Map.es
    The reference implementation’s classes are
✦
    written in ECMAScript
    package
✦
    {
      use namespace ...
More Info
    ECMAScript 4 Progress:
✦
    http://spreadsheets.google.com/ccc?key=pFIHldY_CkszsFxMkQOReAQ&hl=en


    ECMA...
Próximos SlideShares
Carregando em…5
×

JavaScript 1.5 to 2.0 (TomTom)

14.529 visualizações

Publicada em

TomTom (May 2008).

Publicada em: Negócios, Tecnologia
  • Seja o primeiro a comentar

JavaScript 1.5 to 2.0 (TomTom)

  1. JavaScript 1.5 to 2.0 John Resig (ejohn.org) Mozilla Corporation
  2. The Big Picture ECMAScript 3 JavaScript 1.5 ActionScript 2 JScript Etc. SpiderMonkey AVM JScript Engine KJS (Apple) Rhino Opera
  3. Jav aS 1999 crip t1 .5 Jav 2005 aS crip t1 .6 Jav 2006 aS crip t1 .7 Jav aS 2008 c Jav ript aS 1.8 cr ipt Ja Path to JavaScript 2 1.9 va 2009 Sc ri pt 2
  4. The JavaScript Language Current: ✦ JavaScript 1.5 (Firefox 1, ES3) JavaScript 1.6 (Firefox 1.5) ✦ JavaScript 1.7 (Firefox 2) ✦ JavaScipt 1.8 (Firefox 3) ✦ JavaScript 1.9 (Firefox 3.1) ✦ JavaScript 2 (Firefox 4, ES4) ✦
  5. JavaScript 1.5 Getters and Setters ✦ ✦ Extra power over properties ✦ Two powerful uses: ✦ Private data access ✦ Lazy-loading data var n = “John”; ✦ var obj = { get name(){ return n; }, set name(value){ n = value; } }; obj.name = “Ted”; obj.name == “Ted” // true
  6. Getters and Setters var n = “John”; ✦ var obj = {}; obj.__defineGetter__(“name”, function(){ return n; }); obj.__defineSetter__(“name”, function(value){ n = value; }); obj.name = “Ted”; obj.name == “Ted”; // true obj.__lookupGetter__(“name”) ✦ // => function(){ return n; } // __lookupSetter__ too!
  7. Lazy-Loading Data var pixelsDone; ✦ data.__defineGetter__(”pixels”, function(){ if ( pixelsDone ) return pixelsDone; pixelsDone = []; for ( var i = 0; i < pixels.length; i += 4 ){ pixelsDone.push( p.color(...) ); } return pixelsDone; }); obj.pixels[3] ✦
  8. JavaScript 1.6 Array Extras ✦ ✦ indexOf / lastIndexOf [0,1,2].indexOf(1) == 1 ✦ every / filter / some [0,1,2].every(function(val){ return val > 0; }); // false ✦ map [0,1,2].map(function(val){return val + 1;}); // [1,2,3] ✦ forEach [0,1,2].forEach(function(val,index){});
  9. JavaScript 1.7 Generators and Iterators ✦ ✦ Lazy-load data ✦ Database querying ✦ Threading http://www.neilmix.com/2007/02/07/ threading-in-javascript-17/
  10. Generators and Iterators function fib() { ✦ var i = 0, j = 1; while (true) { yield i; var t = i; i = j; j += t; } } var g = fib(); for ( var i in g ) { document.write(i + “<br>n”); if ( i > 100 ) break; }
  11. let Block-level statements ✦ for ( let i = 0; i < 10; i++ ) { } ✦ while ( true ) { let test = 5; } ✦ let (test = 5) { ✦ function stuff(){ return test; } } { let test = 5; ✦ { let test = 6; print(test);} print(test); }
  12. Array Comprehension [i for ( let i = 0; i < 3; i++ )] ✦ // => [0, 1, 2] function range(begin, end) { ✦ for (let i = begin; i < end; ++i) { yield i; } } [i for each (i in range(0, 3))]
  13. Destructuring var [newA, newB] = [a, b]; ✦ var newA = a, newB = b; ✦ [a, b] = [b, a] ✦ function test(){ return [0, 1]; } ✦ let [a, b] = test(); var [, c] = test(); var {name: name} = {name: “John”} ✦ name == “John” var {name} = {name: “John”} ✦
  14. JavaScript 1.8 Mostly a bug fix release ✦ Expression Closures ✦ function(x){ return x * x; } function(x) x * x; Generator Expressions ✦ function val_iter(obj) { return (obj[x] for (x in obj)); } for ( let value in val_iter(obj) ) { ... }
  15. reduce Great for summing or concating ✦ [x for ( x in 100 )] .reduce(function(a,b) a+b); [[...],[...]] ✦ .reduce(function(a,b){ a.concat(b);}, []) reduceRight ✦
  16. JavaScript 1.9 Merge object properties: ✦ Object.extend( baseObj, otherObj ) Function.prototype.bind() ✦ fn.bind(someThis) “ string ”.trim() ✦ // => “string” mozilla.hashcode(someObj) ✦ // => 1234 (unique ID)
  17. defineProperty Object.defineProperty(obj, name, value, ✦ types) var obj = {}; ✦ Object.defineProperty(obj, “name”, “John”, Object.NOT_WRITABLE | Object.NOT_DELETABLE); obj.name = “Test”; obj.name == “John”; delete obj.name obj.name == “John”;
  18. JSON mozilla.JSON.parse(“{name:’John’}”) ✦ // => {name: ‘John’} mozilla.JSON.serialize({name:’John’}) ✦ // => “{name:’John’}”
  19. Catchalls var props = {}; ✦ var obj = { test: true, get *(name){ return props[name]; }, set *(name, value){ props[name] = value; } } obj.__defineGetter_(“”, function(){}) ✦
  20. JavaScript 2 Goals Backwards Compatible ✦ Suitable to developing large systems ✦ Allow for reusable libraries ✦ Merge previous efforts (ActionScript) ✦ Fix ECMAScript 3 bugs ✦ Keep it usable for small programs ✦
  21. Features Classes and Interfaces ✦ Packages and Namespaces ✦ Type Annotations ✦ Strict Verification ✦ Optimization ✦ Syntax Shortcuts ✦ Iterators and Generators ✦ Self-hosting ✦
  22. The Direction ECMAScript 4 JavaScript 2 ActionScript 4 JScript Etc. Screaming Tamarin KJS (Apple) Monkey Opera
  23. Tamarin Tamarin ✦ ✦ New Virtual Machine from Adobe ✦ Perfect for ActionScript ✦ (a mutant cousin of JavaScript 2) The Three Monkeys: ✦ ✦ ActionMonkey ✦ ScreamingMonkey ✦ IronMonkey
  24. Three Monkies ActionMonkey ✦ ✦ Integrating Tamarin into SpiderMonkey ✦ Powering Firefox 4 (?) + JavaScript 2 ScreamingMonkey ✦ ✦ Forcing Tamarin into Internet Explorer ✦ (Kicking and screaming?) IronMonkey ✦ ✦ Bringing Python + Ruby to Tamarin
  25. Classes
  26. Classes class Programmer { ✦ var name; var city = “Boston, MA”; const interest = “computers”; function work() {} } var p = new Programmer; ✦ p.name = “John”; p.work(); p.work.apply( someotherp ); p.interest = “science”; // Error
  27. Dynamic Classes dynamic class Programmer { ✦ var name; var city = “Boston, MA”; const interest = “computers”; function work() {} } var p = new Programmer; ✦ p.lastName = “Resig”; for ( var i in p ) alert( i ); // alert( “Resig” );
  28. Getters and Setters class Programmer { ✦ var _name; function get name(){ return _name; } function set name(value){ _name = value + “ Resig”; } } var p = new Programmer; ✦ p.name = “John”; alert( p.name ); // “John Resig”
  29. Catch-Alls dynamic class Programmer { ✦ meta function get(name) { ... } meta function set(name, value) { alert(“Setting “ + name + “ to “ + value); } } var p = new Programmer ✦ p.name = “John”; // alert(“Setting name to John”);
  30. Inheritance class Artist { ✦ function draw() { alert(“Drawing!”); } } class Designer extends Artist { override function draw() { alert(“Designing!”); } } var d = new Designer ✦ d.draw(); // alert(“Designing!”);
  31. Inheritance (cont.) ‘final’ methods can’t be overriden ✦ class Artist { ✦ final function draw() {alert(“Drawing!”);} } class Designer extends Artist { // ERROR: Can’t override draw! override function draw() { alert(“Designing!”); } }
  32. Inheritance (cont.) ‘final’ classes can’t be inherited from ✦ final class Artist { ✦ function draw() { alert(“Drawing!”); } } // ERROR: Can’t inherit from Artist class Designer extends Artist { override function draw() { alert(“Designing!”); } }
  33. Metaclass Provide global functions and properties on ✦ a class object class Users { ✦ static function find( name ) { // ... } } Users.find( “John” ); ✦
  34. Interfaces Verify that a class implements another ✦ class Artist { ✦ function draw(); } class Designer implements Artist { function draw() { alert(“Designing!”); } } if ( Designer is Artist ) ✦ alert(“Designers are Artists!”);
  35. Types
  36. Types Types are broken down into: ✦ ✦ string ✦ double (ECMAScript 3-style Number) ✦ boolean
  37. Type Annotations var name : string = “John”; ✦ let x : double = 5.3; ✦ function stuff( x: string, obj: Object ) : ✦ boolean {}
  38. Function Types Only return specific types: ✦ function isValid() : boolean { } Only be used on certain objects types: ✦ function every( this: Array ) { for ( var i = 0; i < this.length; i++ ) alert( this[i] ); } every.call( [0,1,2] ); // alert(0); alert(1); alert(2); every.call({a: “b”}); // ERROR
  39. Rest Arguments function stuff( name, ...values ){ ✦ alert( values.length ); } stuff( “John”, 1, 2, 3, 4 ); ✦ // alert( 4 ); function stuff( name : string, ...values : [double] ) : void ✦ { alert( values.length ); } var array = [1,2,3,4]; ✦ stuff( “John”, ...array );
  40. Union and Any Types var test : (string, double) = “test”; ✦ test = 3; test = {}; // ERROR These are equivalent: ✦ ✦ var test : * = “test”; ✦ var test = “test”;
  41. Type Definitions type Point = { x: double, y: double }; ✦ var p : Point = { x: 3.0, y: 24.0 }; ✦
  42. Nullability Prevent variables from accepting null ✦ values var name : * = “John”; ✦ var name : string! = “John”; ✦ name = “Ted”; name = null; // ERROR function test( name: string? ) { ✦ alert( name ); }
  43. Initialization class User { ✦ var name : string!; // Must be initialized function User( n ) : name = n { // ... } }
  44. “like” type Point = { x: double, y: double }; ✦ if ( { x: 3, y: 5 } like Point ) ✦ alert( “That looks like a point to me!” ); if ( !({ x: 3 } like Point) ) ✦ alert( “Not a point!” ); // Loop over array-like things: ✦ function every( a: like { length: double } ) { for ( var i = 0; i < a.length; i++ ) alert( a[i] ); }
  45. Parameterized Types var m: Map.<string, *>; ✦ class Point.<T> { ✦ var x: T, y: T; } var p = new Point.<double>; ✦ p.x = 3.0; p.y = 5.0;
  46. Structure
  47. Namespaces namespace extra = “extra”; ✦ Pre-defined namespaces: ✦ ✦ __ES4__ ✦ intrinsic ✦ iterator ✦ meta Namespaced variables: ✦ iteration::StopIteration intrinsic::readFile
  48. Multimethods generic function intersect(s1, s2); ✦ generic function intersect(s1: Shape, s2: Shape ) { // ... } generic function intersect(s1: Rect, s2: Rect ) { // ... } generic function test(a: Object?, b... ✦ generic function test(a: Object! ✦
  49. Iteration class Fib { ✦ private var a=0, b=1; iterator function get(deep:boolean = false) : IteratorType.<double> this public function next(): double { if ( b > 100 ) throw iterator::StopIteration; [a,b] = [b,a+b]; return a; } } for ( let i in new Fib ) ✦ alert( i );
  50. For .. Each For each loops through values ✦ let s = “”; ✦ for each ( let n in [“a”,”b”,”c”] ) s += n; alert(s); // “abc”
  51. Self-Hosting
  52. Map.es The reference implementation’s classes are ✦ written in ECMAScript package ✦ { use namespace intrinsic; use default namespace public; intrinsic class Map.<K,V> { static const length = 2; function Map(equals=intrinsic::===, hashcode=intrinsic::hashcode) : equals = equals , hashcode = hashcode , element_count = 0 { } // ... }
  53. More Info ECMAScript 4 Progress: ✦ http://spreadsheets.google.com/ccc?key=pFIHldY_CkszsFxMkQOReAQ&hl=en ECMAScript 4 White Paper Overview: ✦ http://www.ecmascript.org/es4/spec/overview.pdf Blogging: ✦ http://ejohn.org/

×