JavaScript 1.5 to 2.0 (TomTom)

JavaScript 1.5 to 2.0 John Resig (ejohn.org) Mozilla Corporation

The Big Picture ECMAScript 3 JavaScript 1.5 ActionScript 2 JScript Etc. SpiderMonkey AVM JScript Engine KJS (Apple) Rhino Opera

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

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) ✦

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

Getters and Setters var n = “John”; ✦ var obj = {}; obj.__deﬁneGetter__(“name”, function(){ return n; }); obj.__deﬁneSetter__(“name”, function(value){ n = value; }); obj.name = “Ted”; obj.name == “Ted”; // true obj.__lookupGetter__(“name”) ✦ // => function(){ return n; } // __lookupSetter__ too!

Lazy-Loading Data var pixelsDone; ✦ data.__deﬁneGetter__(”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] ✦

JavaScript 1.6 Array Extras ✦ ✦ indexOf / lastIndexOf [0,1,2].indexOf(1) == 1 ✦ every / ﬁlter / 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){});

JavaScript 1.7 Generators and Iterators ✦ ✦ Lazy-load data ✦ Database querying ✦ Threading http://www.neilmix.com/2007/02/07/ threading-in-javascript-17/

Generators and Iterators function ﬁb() { ✦ var i = 0, j = 1; while (true) { yield i; var t = i; i = j; j += t; } } var g = ﬁb(); for ( var i in g ) { document.write(i + “<br>n”); if ( i > 100 ) break; }

let Block-level statements ✦ for ( let i = 0; i < 10; i++ ) { } ✦ while ( true ) { let test = 5; } ✦ let (test = 5) { ✦ function stuﬀ(){ return test; } } { let test = 5; ✦ { let test = 6; print(test);} print(test); }

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))]

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”} ✦

JavaScript 1.8 Mostly a bug ﬁx 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) ) { ... }

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 ✦

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)

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”;

JSON mozilla.JSON.parse(“{name:’John’}”) ✦ // => {name: ‘John’} mozilla.JSON.serialize({name:’John’}) ✦ // => “{name:’John’}”

Catchalls var props = {}; ✦ var obj = { test: true, get *(name){ return props[name]; }, set *(name, value){ props[name] = value; } } obj.__deﬁneGetter_(“”, function(){}) ✦

JavaScript 2 Goals Backwards Compatible ✦ Suitable to developing large systems ✦ Allow for reusable libraries ✦ Merge previous eﬀorts (ActionScript) ✦ Fix ECMAScript 3 bugs ✦ Keep it usable for small programs ✦

Features Classes and Interfaces ✦ Packages and Namespaces ✦ Type Annotations ✦ Strict Veriﬁcation ✦ Optimization ✦ Syntax Shortcuts ✦ Iterators and Generators ✦ Self-hosting ✦

The Direction ECMAScript 4 JavaScript 2 ActionScript 4 JScript Etc. Screaming Tamarin KJS (Apple) Monkey Opera

Tamarin Tamarin ✦ ✦ New Virtual Machine from Adobe ✦ Perfect for ActionScript ✦ (a mutant cousin of JavaScript 2) The Three Monkeys: ✦ ✦ ActionMonkey ✦ ScreamingMonkey ✦ IronMonkey

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

Classes

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

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” );

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”

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”);

Inheritance class Artist { ✦ function draw() { alert(“Drawing!”); } } class Designer extends Artist { override function draw() { alert(“Designing!”); } } var d = new Designer ✦ d.draw(); // alert(“Designing!”);

Inheritance (cont.) ‘ﬁnal’ methods can’t be overriden ✦ class Artist { ✦ ﬁnal function draw() {alert(“Drawing!”);} } class Designer extends Artist { // ERROR: Can’t override draw! override function draw() { alert(“Designing!”); } }

Inheritance (cont.) ‘ﬁnal’ classes can’t be inherited from ✦ ﬁnal class Artist { ✦ function draw() { alert(“Drawing!”); } } // ERROR: Can’t inherit from Artist class Designer extends Artist { override function draw() { alert(“Designing!”); } }

Metaclass Provide global functions and properties on ✦ a class object class Users { ✦ static function ﬁnd( name ) { // ... } } Users.ﬁnd( “John” ); ✦

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!”);

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 stuﬀ( x: string, obj: Object ) : ✦ boolean {}

Function Types Only return speciﬁc 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

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 );

Union and Any Types var test : (string, double) = “test”; ✦ test = 3; test = {}; // ERROR These are equivalent: ✦ ✦ var test : * = “test”; ✦ var test = “test”;

Type Deﬁnitions 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! = “John”; ✦ name = “Ted”; name = null; // ERROR function test( name: string? ) { ✦ alert( name ); }

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 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] ); }

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;

Structure

Namespaces namespace extra = “extra”; ✦ Pre-deﬁned namespaces: ✦ ✦ __ES4__ ✦ intrinsic ✦ iterator ✦ meta Namespaced variables: ✦ iteration::StopIteration intrinsic::readFile

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! ✦

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 );

For .. Each For each loops through values ✦ let s = “”; ✦ for each ( let n in [“a”,”b”,”c”] ) s += n; alert(s); // “abc”

Self-Hosting

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 { } // ... }

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/

http://www.devexp.eu	97
http://www.slideshare.net	12
http://jsgod.wordpress.com	9
http://onwebdev.blogspot.com	5
http://www.kennethvr.be	2
http://translate.googleusercontent.com	1
http://74.125.39.132	1
http://feeds.feedburner.com	1
http://feed.bmaron.net	1
http://clicenclic.blogspot.com	1

JavaScript 1.5 to 2.0 (TomTom)

by jeresig on Jun 08, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

10 Embeds 130

Statistics

JavaScript 1.5 to 2.0 (TomTom) — Presentation Transcript