Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.



Published on

Published in: Technology
  • Be the first to comment


  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 " +;__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) { = name;}A.prototype; //[object Object]//Math is not a function so no prototype propertyMath.prototype; //null
  19. 19. examplesfunction Foo(name){ = name; obj}Foo.prototype.getName = function(){ name return; __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){ = name;}Foo.prototype.getName = function(){ return;};var obj = new Foo("bar");obj.getName(); //barFoo.prototype.getFullName = function(){return "Foo" +;};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){ = name;}Foo.prototype.getName = function(){ return;};var obj = new Foo("bar");obj.getName(); //barFoo.prototype = { getFullName : function (){ return "FOO" +; }};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