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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

JavaScript Prototype and Module Pattern

  • 1,046 views
Published

JavaScript Prototype and Module Pattern

JavaScript Prototype and Module Pattern

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,046
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
31
Comments
1
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Module Pattern, Prototype chainModule Pattern, Prototype chain and Inheritance in JavaScriptand Inheritance in JavaScript By - Narendra Sisodiya - https://twitter.com/nsisodiya narendra@narendrasisodiya.com
  • 2. Module Pattern, Prototype chainModule Pattern, Prototype chain and Inheritance in JavaScriptand Inheritance in JavaScript By - Narendra Sisodiya - https://twitter.com/nsisodiya narendra@narendrasisodiya.com
  • 3. 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
  • 4. 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
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. 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")
  • 9. 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
  • 10. 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
  • 11. 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")
  • 12. 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
  • 13. 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 ) ; //
  • 14. JS Variables
  • 15. 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
  • 16. 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
  • 17. 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
  • 18. 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); }
  • 19. 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;
  • 20. Advantage Both syntax will work ! Car("TATA").giveName().drive(); (new Car("SUMO")).giveName().drive();
  • 21. 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();
  • 22. 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
  • 23. 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
  • 24. 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
  • 25. 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 : :
  • 26. 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
  • 27. 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
  • 28. 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
  • 29. 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