Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
Upcoming SlideShare
Loading in …5
×

Published on

Classes

Published in: Business, Technology
  • Be the first to comment

×