JavaScript
WebDU 2009 · Dmitry Baranovskiy

E very object (including host objects) must implement the
e)) and ((Class)) propertie s and the ((Get)), ((Put)),
((Prototyp
t)), ((HasProperty)), ((Dele te)), and ((DefaultValue))
((CanPu
. (Note, however, that the ((D efaultValue)) method may,
methods exception.) The value
for some objects , simply throw a TypeError
Prototype)) property must be either an object or null, and
of the ((
Prototype)) chain must have finite length (that is, starting
every ((
y object, recursively access ing the ((Prototype)) property
from an
entually lead to a null val ue). Whether or not a native
must ev
an have a host object as its ((Prototype)) depends on the
object c
implementation.
The value of the ((Class)) property
is defined by this specification for every
kind of built-i n object. The value of the
((Class)) prop erty of a host object may
be any value , even a value used by

E very object (including host objects) must implement the
e)) and ((Class)) propertie s and the ((Get)), ((Put)),
((Prototyp
t)), ((HasProperty)), ((Dele te)), and ((DefaultValue))
((CanPu
. (Note, however, that the ((D efaultValue)) method may,
methods exception.) The value
for some objects , simply throw a TypeError
Prototype)) property must be either an object or null, and
of the ((
Prototype)) chain must have finite length (that is, starting
every ((
from an
must ev
It is a bit “cryptic”
y object, recursively access
entually lead to a null val
ing the ((Prototype)) property
ue). Whether or not a native
an have a host object as its ((Prototype)) depends on the
object c
implementation.
The value of the ((Class)) property
is defined by this specification for every
kind of built-i n object. The value of the
((Class)) prop erty of a host object may
be any value , even a value used by

“ECMAScript does not contain proper
classes such as those in C++, Smalltalk, or
Java, but rather, supports constructors
which create objects by executing code
that allocates storage for the objects and
initialises all or part of them by assigning
initial values to their properties.”
ECMAScript Specification

Basic Types

Undefined Null Boolean
Number String Object

typeof

typeof
Undefined \"undefined\"
Null \"object\"
Number \"number\"
Boolean \"boolean\"
String \"string\"
Object \"object\"

to Number
Undefined NaN
Null 0
Number —
Boolean false ! 0, true ! 1
String parsing
Object .valueOf()

to Boolean
Undefined !\"#$%
Null !\"#$%
Number &'())(*+*,(-(.+/01(2(3451
Boolean 6
String 77(-(.+/01(2(3451
Object 89:%

to String
Undefined \"undefined\"
Null \"null\"
Number \"5\"
Boolean \"false\" || \"true\"
String —
Object .toString()

to Object
Undefined exception!
Null exception!
Number new Number(v)
Boolean new Boolean(v)
String new String(v)
Object Object

On the fly

5 + 4 + \"px\"
\"$\" + 1 + 2
\"4\" / \"2\"
\"$\" + 1 - 2
\"webdu\".length
typeof 5
typeof \"5\"
typeof {property: value}
typeof null
typeof undefined
typeof [1, 2, 3]
typeof (4 - \"px\")

5 + 4 + \"px\" \"9px\"
\"$\" + 1 + 2 \"$12\"
\"4\" / \"2\" 2
\"$\" + 1 - 2 NaN
\"webdu\".length 5
typeof 5 \"number\"
typeof \"5\" \"string\"
typeof {property: value} \"object\"
typeof null \"object\"
typeof undefined \"undefined\"
typeof [1, 2, 3] \"object\"
typeof (4 - \"px\") \"number\"

Object Properties

ReadOnly DontEnum
DontDelete Internal

for in

var a = {
x: 12,
y: 23,
r: 10,
draw: function () {/*...*/}
};
for (var property in a) {
alert(\"a.\" + property + \" = \" + a[property]);
}

var a = {
x: 12,
y: 23,
r: 10,
draw: function () {/*...*/}
};
for (var property in a) {
alert(\"a.\" + property + \" = \" + a[property]);
}

Function
Array
Date
RegExp

Function

var y = 1;
function x() {
var y = 2;
return ++y;
}
var z = function () {
return ++y;
};

function x() {
var y = 2;
return function () {
return ++y;
};
}
var a = x();
a();
a();

arguments

function add(a, b) {
return a + b;
}
add(4, 5); // = 9
add(4, 5, 6, 7, 8, 9) // = 39
function add() {
var sum = 0;
for (var i = 0, ii = arguments.length; i < ii; i++) {
sum +=+ arguments[i];
}
return sum;
}

Scope & “this”

function is(it) {
alert(this + \" is \" + it);
}
is(\"global\");
is.call(5, \"number\");
is.apply(\"A\", [\"string\"]);
alert.is = is;
alert.is(\"function\");

Variable declaration

alert(b);
1 b = 1;
alert(a);
2 var a = 1;
(function () {
3 var x = 1;
})();
alert(x);
(function () {
4 y = 1;
})();
alert(y);

Function declaration

function x(a) {
1 return a && x(--a);
}
var x = function (a) {
2 return a && x(--a);
};
setTimeout(function (a) {
3 return a && arguments.callee(--a);
}, 1000);
var x = function y(a) {
4 return a && y(--a);
};
setTimeout(function y(a) {
5 return a && y(--a);
}, 1000);

Arrays declaration

var a = new Array();
var a = new Array(3);
var a = [];
var a = [undefined, undefined, undefined];
var a = [1, 2, 3, 4];

Object declaration
(JSON)

var a = new Object();
var a = {};
var a = {x: 10, y: 15};
var a = {
x: 10,
name: \"object\",
\"font-style\": \"italic\",
getHeight: function () {/*...*/},
points: [1, 2, 3],
child: {x: 10, y: 15}
};

OOP

“Object Owns Prototype”

var mouse = {
1 name: \"Mike\",
voice: function () { alert(\"Squik!\"); }
};
var o = new Object();
2 o.name = \"Mike\";
o.voice = function () { alert(\"Squik!\"); };
var O = function () {
3 this.name = \"Mike\";
this.voice = function () { alert(\"Squik!\"); };
};
var o = new O();
var O = function () {};
4 O.prototype.name = \"Mike\";
O.prototype.voice = function () { alert(\"Squik!\"); };
var o = new O();

Inheritance

Inheritance

Delegation

Classic Model
Class
Object
Class
Object Object Object

Prototypal Model
Object
Object Object Object

Object Object

// Sharing
function Parent(value) {
this.value = value;
}
Parent.prototype.getValue = function () {
return this.value;
};
function A(value) {
this.value = value + 1;
}
A.prototype = new Parent();
function B(value) {
this.value = value * 2;
}
B.prototype = new Parent();
alert((new A(5)).getValue()); // 6
alert((new B(5)).getValue()); // 10

// Sharing
function A(value) {
this.value = value + 1;
}
function B(value) {
this.value = value * 2;
}
A.prototype.getValue = B.prototype.getValue = function ()
{
return this.value;
};
alert((new A(5)).getValue()); // 6
alert((new B(5)).getValue()); // 10

Array

Date

RegExp

Thank You