Prototype

inheritencein

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 that’s weird

Here Objects inherit from objects What could be more object oriented than this! Code reuse done via cloning

How do we do this?

prototype

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

So, what kind of objects 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 represented as __proto__ in some of the browsers like firefox.

__proto__oldObjectnewObject

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

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

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.

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

OK, So what was the prototype we were talking about in the last session?

Prototype property in functionsvar 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.

examples

//function will never be a constructor but it has a prototype property 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

Every function has a prototype property, and the objects which are not function don’t have the prototype property.

examples

function Foo(name){ this.name = name;}Foo.prototype.getName = function(){ return this.name;}var obj = new Foo("bar");obj.getName();

Fooprototype__proto__

constructorgetName

objname__proto__

Function.prototype

Examples (augmentation)

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

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.

A catch

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

If the prototype property is completely replaced the object still points to the original prototype ([[Prototype]] )

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

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 ?

Douglas Crockford’s video lecture on Advanced javascript

Mozilla developer network

References

Thank you