JavaScript

WebDU 2009 · Dmitry Baranovskiy

Every object (including host objects) must implement the

((Prototype)) and ((Class)) properties and the ((Get)), ((Put)),

((CanPut)), ((HasProperty)), ((Delete)), and ((DefaultValue))

methods. (Note, however, that the ((DefaultValue)) method may,

for some objects, simply throw a TypeError exception.) The value

of the ((Prototype)) property must be either an object or null, and

every ((Prototype)) chain must have finite length (that is, starting

from any object, recursively accessing the ((Prototype)) property

must eventually lead to a null value). Whether or not a native

object can have a host object as its ((Prototype)) depends on the

implementation. The value of the ((Class)) property

is defined by this specification for every

kind of built-in object. The value of the

((Class)) property of a host object may

be any value, even a value used by

Every object (including host objects) must implement the

((Prototype)) and ((Class)) properties and the ((Get)), ((Put)),

((CanPut)), ((HasProperty)), ((Delete)), and ((DefaultValue))

methods. (Note, however, that the ((DefaultValue)) method may,

for some objects, simply throw a TypeError exception.) The value

of the ((Prototype)) property must be either an object or null, and

every ((Prototype)) chain must have finite length (that is, starting

from any object, recursively accessing the ((Prototype)) property

must eventually lead to a null value). Whether or not a native

object can have a host object as its ((Prototype)) depends on the

implementation. The value of the ((Class)) property

is defined by this specification for every

kind of built-in object. The value of the

((Class)) property of a host object may

be any value, even a value used by

It is a bit “cryptic”

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

Undefined "undefined"

Null "object"

Number "number"

Boolean "boolean"

String "string"

Object "object"

typeof

Undefined NaN

Null 0

Number —

Boolean false ! 0, true ! 1

String parsing

Object .valueOf()

to Number

Undefined !"#$%

Null !"#$%

Number &'())(*+*,(-(.+/01(2(3451

Boolean 6

String 77(-(.+/01(2(3451

Object 89:%

to Boolean

Undefined "undefined"

Null "null"

Number "5"

Boolean "false" || "true"

String —

Object .toString()

to String

Undefined exception!

Null exception!

Number new Number(v)

Boolean new Boolean(v)

String new String(v)

Object Object

to 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"

"$" + 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")

"9px"

"$12"

2

NaN

5

"number"

"string"

"object"

"object"

"undefined"

"object"

"number"

Object Properties

ReadOnly DontEnum

InternalDontDelete

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

1alert(b);

b = 1;

alert(a);

var a = 1;

(function () {

var x = 1;

})();

alert(x);

(function () {

y = 1;

})();

alert(y);

2

3

4

Function declaration

1

2

3

4

5

function x(a) {

return a && x(--a);

}

var x = function (a) {

return a && x(--a);

};

setTimeout(function (a) {

return a && arguments.callee(--a);

}, 1000);

var x = function y(a) {

return a && y(--a);

};

setTimeout(function y(a) {

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”

1

2

3

4

var mouse = {

name: "Mike",

voice: function () { alert("Squik!"); }

};

var o = new Object();

o.name = "Mike";

o.voice = function () { alert("Squik!"); };

var O = function () {

this.name = "Mike";

this.voice = function () { alert("Squik!"); };

};

var o = new O();

var O = function () {};

O.prototype.name = "Mike";

O.prototype.voice = function () { alert("Squik!"); };

var o = new O();

Inheritance

Inheritance

Delegation

Class

Object Object Object

Class

Object

Classic Model

Object Object Object

Object

Prototypal Model

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