Java script object model

504 views
417 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
504
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Java script object model

  1. 1. JavaScript Object Model James S. Hsieh
  2. 2. JavaScript build-in datatypePrimitive    Number (float), String, Boolean, undefined, nullAnd Object    Array, Function, RegExp, Date .... 
  3. 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. 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. 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. 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 its 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. 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. 8. PrototypeA prototype is an early sample or model built to testa concept or process or to act as a thing to bereplicated 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. 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. 10. Prototype chainPrototype can be a chain, and JavaScripthas a build-in mechanism to resolveproperty 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. 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. 12. MooTools frameworkMooTools is a compact, modular, Object-Oriented JavaScript framework designed for theintermediate 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/Classhttp://mootools.net/docs/core/Class/Class.Extrasvar 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. 13. ReferenceBook: JavaScript PatternsMooTools: 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

×