The document discusses inheritance in JavaScript, focusing on the differences between classical and prototypal inheritance. It explains the prototype chain, how prototypes work, and provides examples of object creation and method sharing. The document also highlights the significance of the prototype property in functions and the implications of modifying prototypes.

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.
__proto__
oldObjectnewObject

12. Accessing the prototype
Most browsers support the non standard
accessor __proto__ .
ECMA 5 introduces the standard accessor
Object.getPrototypeOf(object)
Use object 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();
firstMethod
secondMethod
__proto__
thirdMethod
__proto__
baseObjectextendedObject

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",
getModifiedString : function(){
return "Hello " + this.name;
}
};
var extendedObject = {
age : 10
};
extendedObject.__proto__ = baseObject;
extendedObject.getModifiedString();
extendedObject.toString();
name
getModifiedString
__proto__
age
__proto__
baseObject
extendedObject
toString
__proto__
Object.prototype
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;
this.publicVal = 20;
}
newClass.prototype.sharedVal = 30;
what's this?
 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
//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
 Every function has a prototype property, and the
objects which are not function don’t have the prototype
property.

19. examples
function Foo(name){
this.name = name;
}
Foo.prototype.getName = function(){
return this.name;
}
var obj = new Foo("bar");
obj.getName();
Foo
prototype
__proto__
constructor
getName
obj
name
__proto__
Function.prototype

20. Examples (augmentation)
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
 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.

21. A catch
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
 If the prototype property is completely replaced the object still
points to the original prototype ([[Prototype]] )

22. Object.create = function (o) {
function F() {}
F.prototype = o;
return new F();
};
 Creates a new object with the specified prototype object and
properties
 Introduced in ECMAscript 5.
Object.create

23. var func = function(){
alert(this);
this.aVar =10;
}
var aVar = func();
 The new keyword.
 If we forget the new keyword, “this” is bounded to global object.
 Also gives an impression of classical inheritance
 Deprecated __proto__
Object.create. Why ?

24.  Douglas Crockford’s video lecture on Advanced
javascript
 Mozilla developer network
References

25. Thank you