1. JavaScript Object Model
James S. Hsieh

2. JavaScript build-in datatype
Primitive
Number (float), String, Boolean, undefined, null
And Object
Array, Function, RegExp, Date ....

3. Object
● JavaScript Object is a hash of key and value.
● How to create a Object? {}
● How to assemble a Object?
var myObject = {
"!@. #%": "what is that?",
value: 1,
abc: { key: 2 },
fun: function() {
return myObject;
}
};
myObject.value; // 1
myObject.abc; // { key: 2 }
myObject.!@. #% // SyntaxError: Unexpected string
myObject["!@. #%"]; // "what is that?"
myObject.fun; // function
myObject.fun(); // call function
myObject.xxx; // undefined

4. Array
● JavaScript Array is a object
● How to create a Array? []
● How to assemble a Array?
var myArray = [1, "x", function() { return myArray; }];
myArray[2]; // return element of array
myArray.length; // 3
myArray.abc = "xxx"; // add member to array
typeof myArray; // "object"

5. Function
● JavaScript Function is a object.
● How to create a Function function() {}
● Function object is a invokable.
● All Functions return a value.
● Default is undefined, it can return any object.
● this is execution context.
○ If function object is invoked by a.fun();
execution context of fun is a (this == a)
○ If function object is invoked by fun();
execution context of fun is DOMWindow
○ If function object is invoked by new fun();
.....

6. Constructor - assemble an object
● when invoked with new, functions return an object known
as this. You can return other object to replace this.
● You have a chance of modifying this before it's returned.
var Engineer = function(name) {
this.name = name;
this.favoriteLanguage = "JavaScript";
this.program = function() {
return this.createBug();
};
this.createBug = function() {
/* .... */
};
};
var james = new Engineer("James S. Hsieh"); // prototype an object
james.name; // "James S. Hsieh"
james.program(); // call function
james.constructor == Engineer; // true

7. Constructor - Questions
var Engineer = function(name) {
this.name = name;
this.favoriteLanguage = "JavaScript";
this.program = function() {
return this.createBug();
};
this.createBug = function() {
/* .... */
};
};
var james = new Engineer("James");
var chacha = new Engineer("Chacha");
chacha.program = // overwrite
function() { /* new function */ };
chacha.program(); // what?
james.program(); // what?
james.hasOwnProperty("program"); // true

8. Prototype
A prototype is an early sample or model built to test
a concept or process or to act as a thing to be
replicated or learned from.
var Engineer = function(name) {
this.name = name;
this.favoriteLanguage = "JavaScript";
};
Engineer.prototype.program = function() {
return this.createBug();
};
Engineer.prototype.createBug = function() {
/* .... */
};
var james = new Engineer("James");
● All objects of Engineer refer one prototype
● object.__proto__ === Engineer.prototype

9. Prototype - Questions
var Engineer = function(name) {
this.name = name;
this.favoriteLanguage = "JavaScript";
};
Engineer.prototype.program = function() {
return this.createBug();
};
Engineer.prototype.createBug = function() {
/* .... */
};
var james = new Engineer("James");
var chacha = new Engineer("Chacha");
Engineer.prototype.program = // overwrite
function() { /* new function */ };
chacha.program(); // what?
james.program(); // what?
james.hasOwnProperty("program"); // false

10. Prototype chain
Prototype can be a chain, and JavaScript
has a build-in mechanism to resolve
property by this chain. It and C++
inheritance are similar.
Employee <- Engineer
var james = new Engineer();
james.A();
james.B();
james.C();
var someOne = new Employee();
someOne.A();
someOne.B();

11. Prototype chain
var Employee = function() {
this.aaa = "hellow";
};
Employee.prototype.A = function() { alert("1"); };
Employee.prototype.B = function() { alert("2"); };
var Engineer = function() {
};
1. Engineer.prototype = Employee.prototype;
Engineer.prototype.constructor = Engineer;
2. Engineer.prototype = new Employee();
Engineer.prototype.constructor = Engineer;
3. var tmp = function() {};
tmp.prototype = Employee.prototype;
Engineer.prototype = new tmp();
Engineer.prototype.constructor = Engineer;
Engineer.prototype.B = function() { alert("3"); };
Engineer.prototype.C = function() { alert("4"); };

12. MooTools framework
MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the
intermediate to advanced JavaScript developer. It allows you to write powerful, flexible,
and cross-browser code with its elegant, well documented, and coherent API.
http://mootools.net/docs/core/Class/Class
http://mootools.net/docs/core/Class/Class.Extras
var Animal = new Class({
initialize: function(name){
this.name = name;
}
});
var Cat = new Class({
Extends: Animal,
talk: function(){
return 'Meow!';
}
});
var james = new Animal('james');
var missy = new Cat('Missy');

13. Reference
Book: JavaScript Patterns
MooTools: http://mootools.net/
Advanced JavaScript: Closures, Prototypes and Inheritance:
http://www.slideshare.net/Sampetruda/advanced-javascript-
closures-prototypes-and-inheritance?
src=related_normal&rel=1188958