SlideShare a Scribd company logo
1 of 13
Prototype & Inheritance
in
JavaScript

C# Corner – 21st September

Sunny Kumar
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.
Sneak Peek into past…

Functions

- 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.
Sneak Peek into past…

Constructor Functions
var Person = function(name) {
this.name = name;
this.getName = function() {
return this.name;
};
};
var me = new Person(“Sunny");
me.getName(); // “Sunny"
• prototype is a property of function object.
• Only function Objects can have prototype property.
var foo = function(){};
console.log(foo.prototype);
Object {} //output
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 !”
foo.prototype={x:1,y:2}
var Person = function(name) {
this.name = name;
};
Person.prototype.say = function(){
return this.name;
};
var dude = new Person('dude');

dude.name; // "dude“
dude.say(); // "dude“ same result
Prototype & Inheritance in JavaScript

More Related Content

Viewers also liked

JavaScript: The prototype Property
JavaScript: The prototype PropertyJavaScript: The prototype Property
JavaScript: The prototype Property
Guillermo Paz
 
Oo java script class construction
Oo java script class constructionOo java script class construction
Oo java script class construction
Ken Collins
 
2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance
pedro.carvalho
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayJavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
Chamnap Chhorn
 

Viewers also liked (20)

JavaScript: The prototype Property
JavaScript: The prototype PropertyJavaScript: The prototype Property
JavaScript: The prototype Property
 
JavaScript Prototype and Module Pattern
JavaScript Prototype and Module PatternJavaScript Prototype and Module Pattern
JavaScript Prototype and Module Pattern
 
Javascript Prototype Visualized
Javascript Prototype VisualizedJavascript Prototype Visualized
Javascript Prototype Visualized
 
.Net Fundamentals
.Net Fundamentals.Net Fundamentals
.Net Fundamentals
 
Node.js and express
Node.js and expressNode.js and express
Node.js and express
 
Html5 Offline Applications
Html5 Offline Applications Html5 Offline Applications
Html5 Offline Applications
 
Typescript Fundamentals
Typescript FundamentalsTypescript Fundamentals
Typescript Fundamentals
 
Inversion of Control in MVC
Inversion of Control in MVCInversion of Control in MVC
Inversion of Control in MVC
 
Real Time Data Visualization using asp.net / SignalR + D3.js
Real Time Data Visualization using asp.net / SignalR + D3.jsReal Time Data Visualization using asp.net / SignalR + D3.js
Real Time Data Visualization using asp.net / SignalR + D3.js
 
Oo java script class construction
Oo java script class constructionOo java script class construction
Oo java script class construction
 
New ES6 Hotness
New ES6 HotnessNew ES6 Hotness
New ES6 Hotness
 
2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance
 
Javascript foundations: Inheritance
Javascript foundations: InheritanceJavascript foundations: Inheritance
Javascript foundations: Inheritance
 
JavaScript Inheritence
JavaScript  InheritenceJavaScript  Inheritence
JavaScript Inheritence
 
Basic inheritance in JavaScript
Basic inheritance in JavaScriptBasic inheritance in JavaScript
Basic inheritance in JavaScript
 
03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery
 
JavaScript and Internet Controlled Hardware Prototyping
JavaScript and Internet Controlled Hardware PrototypingJavaScript and Internet Controlled Hardware Prototyping
JavaScript and Internet Controlled Hardware Prototyping
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
CSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle ApproachCSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle Approach
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayJavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
 

Similar to Prototype & Inheritance in JavaScript

Backbone.js Simple Tutorial
Backbone.js Simple TutorialBackbone.js Simple Tutorial
Backbone.js Simple Tutorial
추근 문
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
Adieu
 

Similar to Prototype & Inheritance in JavaScript (20)

JavaScript - Chapter 8 - Objects
 JavaScript - Chapter 8 - Objects JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
 
Ajaxworld
AjaxworldAjaxworld
Ajaxworld
 
Javascript patterns
Javascript patternsJavascript patterns
Javascript patterns
 
JavaScript Patterns
JavaScript PatternsJavaScript Patterns
JavaScript Patterns
 
Backbone.js Simple Tutorial
Backbone.js Simple TutorialBackbone.js Simple Tutorial
Backbone.js Simple Tutorial
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almostAwesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
 
Object oriented programming in JavaScript
Object oriented programming in JavaScriptObject oriented programming in JavaScript
Object oriented programming in JavaScript
 
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG JuneUnderstanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG June
 
JS OO and Closures
JS OO and ClosuresJS OO and Closures
JS OO and Closures
 
JavaScript Object Oriented Programming Cheat Sheet
JavaScript Object Oriented Programming Cheat SheetJavaScript Object Oriented Programming Cheat Sheet
JavaScript Object Oriented Programming Cheat Sheet
 
Object-Oriented Programming with PHP (part 1)
Object-Oriented Programming with PHP (part 1)Object-Oriented Programming with PHP (part 1)
Object-Oriented Programming with PHP (part 1)
 
A Deeper look into Javascript Basics
A Deeper look into Javascript BasicsA Deeper look into Javascript Basics
A Deeper look into Javascript Basics
 
Advanced JavaScript
Advanced JavaScriptAdvanced JavaScript
Advanced JavaScript
 
Object Oriented JavaScript - II
Object Oriented JavaScript - IIObject Oriented JavaScript - II
Object Oriented JavaScript - II
 
Week 06 Modular Javascript_Brandon, S. H. Wu
Week 06 Modular Javascript_Brandon, S. H. WuWeek 06 Modular Javascript_Brandon, S. H. Wu
Week 06 Modular Javascript_Brandon, S. H. Wu
 
Object oriented java script
Object oriented java scriptObject oriented java script
Object oriented java script
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Advanced Javascript
Advanced JavascriptAdvanced Javascript
Advanced Javascript
 
Java Constructor
Java ConstructorJava Constructor
Java Constructor
 

More from Sunny Sharma (8)

Cognitive Services by Abhimanyu Kumar Vatsa
Cognitive Services by Abhimanyu Kumar VatsaCognitive Services by Abhimanyu Kumar Vatsa
Cognitive Services by Abhimanyu Kumar Vatsa
 
JavaScript Debugging Tips & Tricks
JavaScript Debugging Tips & TricksJavaScript Debugging Tips & Tricks
JavaScript Debugging Tips & Tricks
 
Microsoft Azure DocumentDB - Global Azure Bootcamp 2016
Microsoft Azure DocumentDB -  Global Azure Bootcamp 2016Microsoft Azure DocumentDB -  Global Azure Bootcamp 2016
Microsoft Azure DocumentDB - Global Azure Bootcamp 2016
 
AngularJS Forms Validation
AngularJS Forms ValidationAngularJS Forms Validation
AngularJS Forms Validation
 
JavaScript Debugging Tips and Tricks
JavaScript Debugging Tips and TricksJavaScript Debugging Tips and Tricks
JavaScript Debugging Tips and Tricks
 
Exploring Git in Visual Studio 2013
Exploring Git in Visual Studio 2013Exploring Git in Visual Studio 2013
Exploring Git in Visual Studio 2013
 
Self Hosting
Self HostingSelf Hosting
Self Hosting
 
Evolution of wcf
Evolution of wcfEvolution of wcf
Evolution of wcf
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 
ICT role in 21st century education and its challenges
ICT role in 21st century education and its challengesICT role in 21st century education and its challenges
ICT role in 21st century education and its challenges
 
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot ModelNavi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Navi Mumbai Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu SubbuApidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
Apidays Singapore 2024 - Modernizing Securities Finance by Madhu Subbu
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
Emergent Methods: Multi-lingual narrative tracking in the news - real-time ex...
 
Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024Manulife - Insurer Transformation Award 2024
Manulife - Insurer Transformation Award 2024
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdfGenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
 
Automating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps ScriptAutomating Google Workspace (GWS) & more with Apps Script
Automating Google Workspace (GWS) & more with Apps Script
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 

Prototype & Inheritance in JavaScript

  • 1. Prototype & Inheritance in JavaScript C# Corner – 21st September Sunny Kumar
  • 2. 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.
  • 3. Sneak Peek into past… Functions - 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.
  • 4. Sneak Peek into past… Constructor Functions var Person = function(name) { this.name = name; this.getName = function() { return this.name; }; }; var me = new Person(“Sunny"); me.getName(); // “Sunny"
  • 5.
  • 6.
  • 7. • prototype is a property of function object. • Only function Objects can have prototype property.
  • 8. var foo = function(){}; console.log(foo.prototype); Object {} //output
  • 9. 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 !”
  • 11. var Person = function(name) { this.name = name; }; Person.prototype.say = function(){ return this.name; };
  • 12. var dude = new Person('dude'); dude.name; // "dude“ dude.say(); // "dude“ same result