inheritence            in        Javascript           Aditya GaurMentor: Apurba Nath, Satya Prakash
Why inheritence ?
   Creating a hierarchy   Code reuse
Classical inheritance Objects are instances of classes A Class inherits from other class
Prototypal inheritance A prototypal language is a class less object oriented language.     OOP without classes – now tha...
How do we do this?
prototypeA prototype is an object used to implementstructure, state, and behaviour inheritance inECMAScript.
So, what kind ofobjects contain the prototype object?
Each and every object     (Except the Object.prototype)
What !But when I do { }.prototype, I get null                  :-/
So what is prototype actually? The true prototype of an object is held by the internal [[Prototype]] property. This is r...
Accessing the prototype Most browsers support the non standard accessor __proto__ . ECMA 5 introduces the standard acces...
Examplevar baseObject = {    firstMethod: function () {alert(“first method");},    secondMethod: function () {alert(“secon...
Prototype chainingWhen an object is asked to evaluate property foo,JavaScript walks the prototype chain (starting withobje...
var baseObject = {                                   name: "FooBarBaz",extendedObject                     getModifiedStrin...
OK, So what was the prototype we were   talking about in the last session?
Prototype property in functionsvar newClass = function (){var privateVal = 10;                   whats this?this.publicVal...
examples Every function has a prototype property, and the  objects which are not function don’t have the prototype  prope...
examplesfunction Foo(name){    this.name = name;                            obj}Foo.prototype.getName = function(){       ...
Examples (augmentation) Note that the prototype is "live". Objects are passed by reference in  JavaScript, and therefore ...
A catch If the prototype property is completely replaced the object still  points to the original prototype ([[Prototype]...
Object.create Creates a new object with the specified prototype object and  properties Introduced in ECMAscript 5.Object...
Object.create. Why ? The new keyword.      If we forget the new keyword, “this” is bounded to global object.         var...
References Douglas Crockford’s video lecture on Advanced javascript Mozilla developer network
Thank you
Upcoming SlideShare
Loading in …5
×

Prototype

2,071 views
2,001 views

Published on

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

No Downloads
Views
Total views
2,071
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
105
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Prototype

  1. 1. inheritence in Javascript Aditya GaurMentor: Apurba Nath, Satya Prakash
  2. 2. Why inheritence ?
  3. 3.  Creating a hierarchy Code reuse
  4. 4. Classical inheritance Objects are instances of classes A Class inherits from other class
  5. 5. Prototypal inheritance A prototypal language is a class less object oriented language.  OOP without classes – now that’s weird Here Objects inherit from objects  What could be more object oriented than this!  Code reuse done via cloning
  6. 6. How do we do this?
  7. 7. prototypeA prototype is an object used to implementstructure, state, and behaviour inheritance inECMAScript.
  8. 8. So, what kind ofobjects contain the prototype object?
  9. 9. Each and every object (Except the Object.prototype)
  10. 10. What !But when I do { }.prototype, I get null :-/
  11. 11. So what is prototype actually? The true prototype of an object is held by the internal [[Prototype]] property. This is represented as __proto__ in some of the browsers like firefox. newObject oldObject __proto__
  12. 12. Accessing the prototype Most browsers support the non standard accessor __proto__ . ECMA 5 introduces the standard accessor Object.getPrototypeOf(object) Useobject constructor. object.constructor.prototype
  13. 13. Examplevar baseObject = { firstMethod: function () {alert(“first method");}, secondMethod: function () {alert(“second method");}};var extendedObject = {};extendedObject.thirdMethod = function () {alert(“third method")};extendedObject.__proto__ = baseObject;extendedObject.firstMethod();extendedObject.thirdMethod(); extendedObject baseObject thirdMethod firstMethod __proto__ secondMethod __proto__
  14. 14. Prototype chainingWhen an object is asked to evaluate property foo,JavaScript walks the prototype chain (starting withobject a itself), checking each link in the chain for thepresence of property foo.If and when foo is found it is returned, otherwiseundefined is returned.
  15. 15. var baseObject = { name: "FooBarBaz",extendedObject getModifiedString : function(){age return "Hello " + this.name;__proto__ } }; var extendedObject = { age : 10 }; extendedObject.__proto__ = baseObject; extendedObject.getModifiedString(); extendedObject.toString(); baseObject name getModifiedString __proto__ Object.prototype toString __proto__ null
  16. 16. OK, So what was the prototype we were talking about in the last session?
  17. 17. Prototype property in functionsvar newClass = function (){var privateVal = 10; whats this?this.publicVal = 20;}newClass.prototype.sharedVal = 30;  The functions in JavaScript are objects and they contain methods and properties.  One of property of the function objects is prototype.  A function’s prototype property is the object that will be assigned as the prototype ([[Prototype]] ) to all instances created when this function is used as a constructor.
  18. 18. examples Every function has a prototype property, and the objects which are not function don’t have the prototype property.//function will never be a constructor but it has a prototypeproperty anywayMath.max.prototype; //[object Object]//function intended to be a constructor has a prototype toovar A = function(name) {this.name = name;}A.prototype; //[object Object]//Math is not a function so no prototype propertyMath.prototype; //null
  19. 19. examplesfunction Foo(name){ this.name = name; obj}Foo.prototype.getName = function(){ name return this.name; __proto__}var obj = new Foo("bar");obj.getName(); Foo constructor getName prototype __proto__ Function.prototype
  20. 20. Examples (augmentation) Note that the prototype is "live". Objects are passed by reference in JavaScript, and therefore the prototype is not copied with every new object instance. It means that prototype property can be changed at any time and all the instances will reflect the change.function Foo(name){ this.name = name;}Foo.prototype.getName = function(){ return this.name;};var obj = new Foo("bar");obj.getName(); //barFoo.prototype.getFullName = function(){return "Foo" + this.name;};obj.getFullName();// Foobar
  21. 21. A catch If the prototype property is completely replaced the object still points to the original prototype ([[Prototype]] )function Foo(name){ this.name = name;}Foo.prototype.getName = function(){ return this.name;};var obj = new Foo("bar");obj.getName(); //barFoo.prototype = { getFullName : function (){ return "FOO" + this.name; }};obj.getFullName();// ERRORobj.getName(); //barvar obj2 = new Foo("baz");obj2.getFullName(); //FOObaz
  22. 22. Object.create Creates a new object with the specified prototype object and properties Introduced in ECMAscript 5.Object.create = function (o) { function F() {} F.prototype = o; return new F(); };
  23. 23. Object.create. Why ? The new keyword.  If we forget the new keyword, “this” is bounded to global object. var func = function(){ alert(this); this.aVar =10; } var aVar = func();  Also gives an impression of classical inheritance Deprecated __proto__
  24. 24. References Douglas Crockford’s video lecture on Advanced javascript Mozilla developer network
  25. 25. Thank you

×