Java script object model

JavaScript Object Model

James S. Hsieh

JavaScript build-in datatype

Primitive
Number (float), String, Boolean, undefined, null

And Object
Array, Function, RegExp, Date ....

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

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"

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();
.....

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

Constructor - Questions
            this.name = name;
  this.program = function() {
          };
            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

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.

    this.name = name;
};

Engineer.prototype.program = function() {
};
Engineer.prototype.createBug = function() {
    /* .... */
};


● All objects of Engineer refer one prototype
● object.__proto__ === Engineer.prototype

Prototype - Questions
    this.name = name;
};

Engineer.prototype.program = function() {
};
Engineer.prototype.createBug = function() {
    /* .... */
};

var chacha = new Engineer("Chacha");

  Engineer.prototype.program = // overwrite
   function() { /* new function */ };

chacha.program(); // what?
james.program();    // what?
james.hasOwnProperty("program"); // false

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();

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();

3. var tmp = function() {};
tmp.prototype = Employee.prototype;
Engineer.prototype = new tmp();

Engineer.prototype.B = function() { alert("3"); };
Engineer.prototype.C = function() { alert("4"); };

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');

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

Java script object model

More Related Content

What's hot

Viewers also liked

Similar to Java script object model

Recently uploaded

Java script object model