Transcript Internet Explorer JavaScript Performance Sunspider runs per minute (log scale) 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011

Internet Explorer JavaScript Performance
Sunspider runs per minute (log scale)
1000
100
10
1
2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011
is just a funny name for JavaScript
is based on a few key ideas
but not a whole lot of it
function everything() {
var x = {a:10}, y = [1,2], z = function() { };
for(var p in x) {
lbl: for(var i = 0; i < 10; i++) {
switch(x[p]) {
case 0: continue; default: break lbl;
}
}
if(x instanceof String || 'a' in x) delete x.a;
}
while(true) {
if(true) {
this.x = 3 / (-this.f()) ? /foo/g : new String("hello")
} else {
do { try { throw 3; } catch(e) { debugger; return; } finally {}}
while(false);
}
}
}
a small set of basic types
are bags of properties
var o1 = {};
o1.x = 3;
o1.x = 4;
var o2 = { x : 3 };
var o3 = {
first: o2,
second: function() { return 5; }
}
o2.x === 3;
o2["x"] === 3;
o2["the answer!"] = 42;
have prototypes
var o1 = { };
o1.valueOf() === "[object Object]"
var o2 = {valueOf: function() { return 10; }};
o2.valueOf() === 10
inherit from other objects
var point2d = { x:10, y:20 };
var point3d = Object.create(point2d);
point3d.z = 30;
var location = Object.create(point2d);
location.name = "Mandalay Bay"
can have both “data properties” and “accessor properties”
// Data Property
var bankAccount = {
balance: 1257
}
// Accessor Property
var bankAccount2 = {
get balance() { return 1257; }
set balance(v) { };
}
have a descriptor associated with each property
Accessor Properties
Object.getOwnPropertyDescriptor
Object.defineProperty
Objects
key ideas
are first-class values
function sum(x, y) {
return x + y;
}
var sum2 = function(x, y) {
return x + y;
}
var sum3 = sum;
function wrap(f) {
return f();
}
wrap(function() { return 5; })
are objects
function sum(x, y) {
return x + y;
}
sum.length === 2;
Object.getPrototypeOf(sum) === Function.prototype;
have special rules for ‘this’
var obj = {
sum: function(x,y) { return x + y; }
}
obj.sum(3,4);
var obj2 = {
offset: 7;
sum: function(x,y) { return x + y + this.offset; }
}
obj2.sum(3,4) === 14;
var f = obj2.sum;
f(3,4) === NaN;
f.call(obj2, 3, 4);
have special behaviour when invoked with ‘new’
function Person(firstName,lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
var bob = new Person("Bob", "Crites");
var anil = new Person("Anil", "Madhavan");
bob.firstName === "Bob";
Person.prototype.getFullName = function() {
return this.firstName + " " + this.lastName;
}
bob.getFullName() === "Bob Crites"
objects and prototypes and constructors, oh my!
"bob";
bob.getFullName() === "Bob Crites";
anil.getFullName === bob.getFullName;
objects and prototypes and constructors, oh my!
instanceof Person
Person.prototype.getFullName = function() { ... };
new (bob.constructor)("Cynthia", "Washington")
objects and prototypes and constructors, oh my!
Person.valueOf()
objects and prototypes and constructors, oh my!
Constructors and ‘new’
HTML Element inheritance
WebIDL
have their own variable scopes
// Scope
(function() {
var x = 5;
x === 5;
})();
x === undefined
// Outer variable access
var outer = "hello";
(function() {
outer = "goodbye";
})();
outer === "goodbye";
// Isolating from changes in outer variables
var outer = "hello";
(function(outer) {
setInterval(function() {alert(outer);}, 100);
})(outer);
outer = "goodbye";
Functions
important points
lets you opt-in to a more constrained subset of JavaScript
function () {
"use strict";
// this function is strict...
x = 5; // Error!
arguments.caller; // Error!
arguments.callee; // Error!
var o = { x: 5};
Object.freeze(o);
o.x = 7; // Throws
}());
Indirect eval
Duplicates
Eval scope
and calls to action!
http://www.microsoft.com/visualstudio/en-us
Somasegar’s Blog
http://blogs.msdn.com/b/somasegar/
http://blogs.msdn.com/b/jasonz/
http://www.facebook.com/visualstudio
http://twitter.com/#!/visualstudio
http://northamerica.msteched.com
www.microsoft.com/learning
http://microsoft.com/technet
http://microsoft.com/msdn