Page 0: Page 1: JavaScript 1.5 to 2.0 John Resig (ejohn.org) Mozilla Corporation Page 2: The Big Picture ECMAScript 3 JavaScript 1.5 ActionScript 2 JScript Etc. SpiderMonkey AVM JScript Engine KJS (Apple) Rhino Opera Page 3: Jav aS c rip t1 .5 t1 rip Jav aS c t1 rip aS c aS c .6 .7 Jav Jav Path to JavaScript 2 1999 2005 2006 2008 2009 Jav ript aS 1.8 cr ipt Ja 1.9 va Sc ri pt 2 Page 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) ✦ ✦ ✦ ✦ ✦ Page 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 ✦ Page 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! ✦ Page 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] ✦ Page 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){}); Page 9: JavaScript 1.7 ✦ Generators and Iterators ✦ Lazy-load data ✦ Database querying ✦ Threading http://www.neilmix.com/2007/02/07/ threading-in-javascript-17/ Page 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; } Page 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); } ✦ Page 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))] ✦ Page 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”} ✦ ✦ Page 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) ) { ... } ✦ Page 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 ✦ ✦ Page 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) ✦ ✦ ✦ Page 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”; ✦ Page 18: JSON ✦ mozilla.JSON.parse(“{name:’John’}”) // => {name: ‘John’} mozilla.JSON.serialize({name:’John’}) // => “{name:’John’}” ✦ Page 19: Catchalls ✦ var props = {}; var obj = { test: true, get *(name){ return props[name]; }, set *(name, value){ props[name] = value; } } obj.__defineGetter_(“”, function(){}) ✦ Page 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 Page 21: Features ✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦ Classes and Interfaces Packages and Namespaces Type Annotations Strict Verification Optimization Syntax Shortcuts Iterators and Generators Self-hosting Page 22: The Direction ECMAScript 4 JavaScript 2 ActionScript 4 JScript Screaming Monkey Etc. Tamarin KJS (Apple) Opera Page 23: Tamarin ✦ Tamarin ✦ New Virtual Machine from Adobe ✦ Perfect for ActionScript ✦ (a mutant cousin of JavaScript 2) The Three Monkeys: ✦ ActionMonkey ✦ ScreamingMonkey ✦ IronMonkey ✦ Page 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 ✦ ✦ Page 25: Classes Page 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 ✦ Page 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” ); ✦ Page 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” ✦ Page 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”); ✦ Page 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!”); ✦ Page 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!”); } } Page 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!”); } } Page 33: Metaclass ✦ Provide global functions and properties on a class object class Users { static function find( name ) { // ... } } Users.find( “John” ); ✦ ✦ Page 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!”); Page 35: Types Page 36: Types ✦ Types are broken down into: ✦ string ✦ double (ECMAScript 3-style Number) ✦ boolean Page 37: Type Annotations ✦ ✦ ✦ var name : string = “John”; let x : double = 5.3; function stuff( x: string, obj: Object ) : boolean {} Page 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 ✦ Page 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 ); ✦ ✦ ✦ Page 40: Union and Any Types ✦ var test : (string, double) = “test”; test = 3; test = {}; // ERROR These are equivalent: ✦ var test : * = “test”; ✦ var test = “test”; ✦ Page 41: Type Definitions ✦ ✦ type Point = { x: double, y: double }; var p : Point = { x: 3.0, y: 24.0 }; Page 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 ); } ✦ ✦ ✦ Page 43: Initialization ✦ class User { var name : string!; // Must be initialized function User( n ) : name = n { // ... } } Page 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] ); } ✦ ✦ Page 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; ✦ Page 46: Structure Page 47: Namespaces ✦ ✦ namespace extra = “extra”; Pre-defined namespaces: ✦ __ES4__ ✦ intrinsic ✦ iterator ✦ meta Namespaced variables: iteration::StopIteration intrinsic::readFile ✦ Page 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! ✦ ✦ Page 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 ); ✦ Page 50: For .. Each ✦ ✦ For each loops through values let s = “”; for each ( let n in [“a”,”b”,”c”] ) s += n; alert(s); // “abc” Page 51: Self-Hosting Page 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 { } // ... } ✦ Page 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/ Page 54: