Java Script Workshop
-
Upload
dmitry-baranovskiy -
Category
Education
-
view
2.399 -
download
0
Transcript of Java Script Workshop
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