13
Prototype & Inheritance in JavaScript C# Corner – 21 st September Sunny Kumar

Prototype & Inheritance in JavaScript

Embed Size (px)

DESCRIPTION

What is prototype and how we use it to inherit the properties of an object in JavaScript.

Citation preview

Page 1: Prototype & Inheritance in JavaScript

Prototype & Inheritancein

JavaScript

C# Corner – 21st September Sunny Kumar

Page 2: Prototype & Inheritance in JavaScript

Prototypes in JavaScript• What is Prototype?• Augmenting the Prototype• Overwriting the Prototype• Use of Prototype• Prototype Chain

Inheritance in JavaScript• Various ways of Inheritance in JavaScript.

Page 3: Prototype & Inheritance in JavaScript

- are objects.- returns Value.- can return objects, including other functions.- they have properties.- they have methods.- can be copied, deleted, augmented.- special feature: Invokable.- when invoked with new keyword, returns an object named this , can be modified before it’s returned.

FunctionsSneak Peek into past…

Page 4: Prototype & Inheritance in JavaScript

var Person = function(name) { this.name = name; this.getName = function() { return this.name; };};var me = new Person(“Sunny");me.getName(); // “Sunny"

Constructor Functions

Sneak Peek into past…

Page 5: Prototype & Inheritance in JavaScript

FireBug Console …as a Learning Tool.

Page 6: Prototype & Inheritance in JavaScript

Prototype

Page 7: Prototype & Inheritance in JavaScript

Prototype

• prototype is a property of function

object.

• Only function Objects can have prototype property.

Page 8: Prototype & Inheritance in JavaScript

Prototype

var foo = function(){}; console.log(foo.prototype);

Object {} //output

Page 9: Prototype & Inheritance in JavaScript

Augmenting Prototype(Adding properties to prototype object)

Var foo=function(){};Var myFoo = new foo(); //instantiates an object of foo.foo.prototype.MaxValue=100; foo.prototype.SayHello=function(name){

return “Hi “+name+” !”;

}myFoo.SayHello(“Kumar”); // “Hi Kumar !”

Page 10: Prototype & Inheritance in JavaScript

Overwriting Prototype

foo.prototype={x:1,y:2}

Page 11: Prototype & Inheritance in JavaScript

Prototype Usage

var Person = function(name) { this.name = name; }; Person.prototype.say = function(){ return this.name; };

Page 12: Prototype & Inheritance in JavaScript

Prototype Usage

var dude = new Person('dude');

dude.name; // "dude“

dude.say(); // "dude“ same result

Page 13: Prototype & Inheritance in JavaScript

Thank You!