JavaScript Prototype and Module Pattern
Upcoming SlideShare
Loading in...5
×
 

JavaScript Prototype and Module Pattern

on

  • 733 views

JavaScript Prototype and Module Pattern

JavaScript Prototype and Module Pattern

Statistics

Views

Total Views
733
Views on SlideShare
726
Embed Views
7

Actions

Likes
4
Downloads
20
Comments
1

3 Embeds 7

https://twitter.com 4
http://www.slideee.com 2
http://www.google.com.hk 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

JavaScript Prototype and Module Pattern JavaScript Prototype and Module Pattern Presentation Transcript

  • Module Pattern, Prototype chainModule Pattern, Prototype chain and Inheritance in JavaScriptand Inheritance in JavaScript By - Narendra Sisodiya - https://twitter.com/nsisodiya narendra@narendrasisodiya.com
  • Module Pattern, Prototype chainModule Pattern, Prototype chain and Inheritance in JavaScriptand Inheritance in JavaScript By - Narendra Sisodiya - https://twitter.com/nsisodiya narendra@narendrasisodiya.com
  • Object.create & prototype chain //var a = Object.create(Object.prototype); is Same as //var a = {}; var person = { name : "Child of earth", age : 0, nature: "cool", eat: function (){ alert(this.name +" is eating"); } } var narendra = Object.create(person); narendra.name = "Narendra Sisodiya"; narendra.age = 29; narendra.eat(); //"Narendra Sisodiya is eating"; narendra.hasOwnProperty("eat") //false narendra.hasOwnProperty("name") //true narendra.hasOwnProperty("nature") //false
  • Object.create & prototype chain person nature eat name age __proto__ constructor Object.prototype toString __proto__ hasOwnProperty null : :function Object() { [native code] } narendra name age __proto__ constructor a property, it will look into object, if unable to find, it will look into object.__proto__ , if unable to find, it will look into object.__proto__.proto__ and so on, until it find null. This is call Prototype Chaining Longer the prototype chain, more the access time
  • Function at prototype chain & context eat: function (){ alert(this.name +" is eating"); } function eat is not part of object “narendra”, this.name When you run, narendra.eat(), eat() function of prototype chain will be executed with Execution Context == narendra, Every function executed with a context, narendra.eat() will be executed with context as “narendra” so inside eat function, value of this will be narendra narendra === this //true person.eat(); // Child of earth is eating person.eat.call(narendra); // Narendra Sisodiya is eating
  • Constructors Without Prototypes var Car = function(data) { this.data = data;    this.drive =  function() { alert("Car is running"); return this; }; this.giveName = function(){ alert("The car name is " + this.data); return this; } }; (new Car("SUMO")).giveName().drive(); var a = new Car("TATA") ; a.drive(); alert( a.data ) ; // Problem - Every Object contains same Functions, They are not shared, Sharing is possible using Prototypes a.drive & b.drive give same result,but they are different Useful Only for Singleton
  • Constructors Without Prototypes var Car = function(data) { this.data = data;    this.drive =  function() { alert("Car is running"); return this; }; this.giveName = function(){ alert("The car name is " + this.data); return this; } }; (new Car("SUMO")).giveName().drive(); var a = new Car("TATA") ; a.drive(); alert( a.data ) ; // Problem - Every Object contains same Functions, They are not shared, Sharing is possible using Prototypes a.drive & b.drive give same result,but they are different Useful Only for Singleton
  • Constructors Without Prototypes function - Car constructor data object - a __proto__ Car.prototype constructor __proto__ Object.prototype toString __proto__ hasOwnProperty null : : constructor function Function() { [native code]  } drive givenName data object - b __proto__ constructor drive givenName function Object() { [native code]  } constructor function Car() { } var a = new Car("TATA") var b = new Car("SUMO")
  • Constructors With Prototypes function - Car constructor data object - a __proto__ Car.prototype constructor __proto__ Object.prototype toString __proto__ hasOwnProperty null : : constructor function Function() { [native code]  } data object - b __proto__ constructor function Object() { [native code]  } constructor function Car() { } Car.prototype = { ... } var a = new Car("TATA") var b = new Car("SUMO") drive giveName
  • Constructors With Prototypes function - Car constructor data object - a __proto__ Car.prototype constructor __proto__ Object.prototype toString __proto__ hasOwnProperty null : : constructor function Function() { [native code]  } data object - b __proto__ constructor function Object() { [native code]  } constructor function Car() { } Car.prototype = { ... } var a = new Car("TATA") var b = new Car("SUMO") drive giveName
  • Constructors Without Prototypes Simple function - Car constructor data object - a __proto__ Car.prototype constructor __proto__ Object.prototype toString __proto__ hasOwnProperty null : : constructor drive givenName data object - b __proto__ constructor drive givenName constructor function Car() { } var a = new Car("TATA") var b = new Car("SUMO")
  • Constructors With Prototypes Simple function - Car constructor data object - a __proto__ Car.prototype constructor __proto__ Object.prototype toString __proto__ hasOwnProperty null : : constructor data object - b __proto__ constructor constructor function Car() { } Car.prototype = { ... } var a = new Car("TATA") var b = new Car("SUMO") drive giveName
  • Constructors With Prototypes var Car = function(data) { this.data = data; } Car.prototype = { drive: function() { alert("Car is running"); return this; }, giveName: function(){ alert("The car name is " + this.data); return this; } }; (new Car("SUMO")).giveName().drive(); var a = new Car("TATA") ; a.drive(); alert( a.data ) ; //
  • JS Variables
  • JS Variables function - Car prototype constructor data object - a __proto__ Car.prototype a.__proto__ === b.__proto__ === Car.prototype // true givenName data object - b __proto__ constructor constructor __proto__ drive Object.prototype toString __proto__ hasOwnProperty null : :constructor Every Object Share Common Prototype Object
  • What happen If I do not use “new” ? var Car = function(data){ console.dir(this); this.data = data; } var a = new Car(); var b = Car(); WITH NEW var Car = function(data){ //var this = new Object.create(Car.prototype); console.dir(this); this.data = data; // return this } Without new – value of this will be Window object
  • What happen If I do not use “new” ? var a = new Car(); var b = Car(); When you invoke constructor with new operator, function will be passed with a THIS variable which inherit from function.prototype
  • Module Pattern without new Operator (1st way) var Car = function(data) { this.data = data; } Car.prototype = { drive: function() { alert("Car is running"); return this; }, giveName: function(){ alert("The car name is " + this.data); return this; } }; var CarFactory = function(data){ return new Car(data); }
  • Module Pattern without new Operator (2nd way) var Car = function(data) { return new Car.prototype.init(data); } Car.prototype = { init : function(data){ this.data = data; }, drive: function() { alert("Car is running"); return this; }, giveName: function(){ alert("The car name is " + this.data); return this; } }; Car.prototype.init.prototype = Car.prototype;
  • Advantage Both syntax will work ! Car("TATA").giveName().drive(); (new Car("SUMO")).giveName().drive();
  • Inheritance in JavaScript var Person = function(full_name, age) { this.full_name = full_name; this.age = age; } Person.prototype = { drive: function() { if(this.age >= 18){ console.log(this.full_name + " is driving"); }else{ console.log(this.full_name + " is not eligible for driving"); } return this; }, eat: function(){ console.log(this.full_name + " is eating"); return this; } }; var chotu = new Person("Chotu", 7, "Student"); chotu.eat().drive();
  • Inheritance in JavaScript Object.prototype toString __proto__ hasOwnProperty null : : Person prototype __proto__ constructor Function.prototype toString __proto__ hasOwnProperty : : chotu full_name __proto__ constructor Person.prototype eat __proto__ drive : : age function Function() { [native code] }prototype
  • Inheritance in JavaScript var Employee = function(full_name, age, job_title){ //Employee.parent.call(this,full_name, age); this.job_title = job_title; }; Employee.prototype = { office: function(){ console.log(this.full_name + " is a "+ this.job_title + " and he is going to Office"); return this; } }; var narendra = new Employee("Narendra", 30, "Engineer"); narendra.eat().drive().office(); // Note – eat() & drive() will not work at this time.. we need inheritance for this
  • Inheritance in JavaScript Object.prototype toString __proto__ hasOwnProperty nu : : Person prototype __proto__ constructor Function.prototype toString __proto__ constructor null : : chotu full_name __proto__ constructor Person.prototype eat __proto__ drive age function Function() { [native code] }prototype Employee prototype __proto__ constructor narendra job_title __proto__ constructor Employee.prototype __proto__ office
  • Goal is to understand this function Function.prototype.inheritFrom = function (Base){ var F = function(){}; F.prototype = Base.prototype; var old_prototype = this.prototype; this.prototype = new F(); this.prototype.constructor = this; for (i in old_prototype) { this.prototype[i] = old_prototype[i]; } this. parent = Base; } & Employee.parent.call(this,full_name, age); & Employee.inheritFrom(Person); Function.prototype inheritFrom __proto__ constructor null : :
  • Step by Step (Employee.inheritFrom(Person)) Object.prototype toString __proto__ hasOwnProperty nu : : Person prototype __proto__ constructor Function.prototype toString __proto__ constructor null : : Person.prototype eat __proto__ drive Employee prototype __proto__ constructor Employee.prototype __proto__ office var F = function(){}; F.prototype = Base.prototype; var old_prototype = this.prototype; F prototype __proto__ constructor old_prototype
  • Step by Step (Employee.inheritFrom(Person)) Object.prototype toString __proto__ hasOwnProperty nu : : Person prototype __proto__ constructor Function.prototype toString __proto__ constructor null : : Person.prototype eat __proto__ drive Employee prototype __proto__ constructor Employee.prototype __proto__ office this.prototype = new F(); this.prototype.constructor = this; F prototype __proto__ constructor old_prototype Employee.prototype __proto__ constructor
  • Step by Step (Employee.inheritFrom(Person)) Object.prototype toString __proto__ hasOwnProperty nu : : Person prototype __proto__ constructor Function.prototype toString __proto__ constructor null : : Person.prototype eat __proto__ drive Employee prototype __proto__ constructor Employee.prototype __proto__ office for (i in old_prototype) { this.prototype[i] = old_prototype[i]; } this. parent = Base; F prototype __proto__ constructor old_prototype Employee.prototype __proto__ constructor parent office
  • Step by Step (Employee.inheritFrom(Person)) Final Object.prototype toString __proto__ hasOwnProperty nu : : Person prototype __proto__ constructor Function.prototype toString __proto__ constructor null : : Person.prototype eat __proto__ drive Employee prototype __proto__ constructor Employee.prototype __proto__ constructorparent office chotu full_name __proto__ constructor age narendra job_title __proto__ constructor full_name age