1. inheritence
in
Javascript
Aditya Gaur
Mentor: Apurba Nath, Satya Prakash

2. Why inheritence ?

3.  Creating a hierarchy
 Code reuse

4. Classical inheritance
 Objects are instances of classes
 A Class inherits from other class

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. How do we do this?

7. prototype
A prototype is an object used to implement
structure, state, and behaviour inheritance in
ECMAScript.

8. So, what kind of
objects contain the
prototype object?

9. Each and every object
(Except the Object.prototype)

10. What !
But when I do { }.prototype, I get null
:-/

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. 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. Example
var 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. Prototype chaining
When an object is asked to evaluate property foo,
JavaScript walks the prototype chain (starting with
object a itself), checking each link in the chain for the
presence of property foo.
If and when foo is found it is returned, otherwise
undefined is returned.

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. OK, So what was the prototype we were
talking about in the last session?

17. Prototype property in functions
var newClass = function (){
var privateVal = 10; what's 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. 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 prototype
property anyway
Math.max.prototype; //[object Object]
//function intended to be a constructor has a prototype too
var A = function(name) {
this.name = name;
}
A.prototype; //[object Object]
//Math is not a function so no prototype property
Math.prototype; //null

19. examples
function 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. 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(); //bar
Foo.prototype.getFullName = function(){
return "Foo" + this.name;
};
obj.getFullName();// Foobar

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(); //bar
Foo.prototype = {
getFullName : function (){
return "FOO" + this.name;
}
};
obj.getFullName();// ERROR
obj.getName(); //bar
var obj2 = new Foo("baz");
obj2.getFullName(); //FOObaz

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. 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. References
 Douglas Crockford’s video lecture on Advanced
javascript
 Mozilla developer network

25. Thank you