SlideShare a Scribd company logo
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 & Inheritance in JavaScript
Prototype & Inheritance in JavaScript
• 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
Ad

Recommended

Object Oriented Programming in JavaScript
Object Oriented Programming in JavaScript
zand3rs
 
webプログラマが楽にiPhoneアプリを開発する方法
webプログラマが楽にiPhoneアプリを開発する方法
Junya Ishihara
 
JavaScript For CSharp Developer
JavaScript For CSharp Developer
Sarvesh Kushwaha
 
Scala 101
Scala 101
Ignasi Marimon-Clos i Sunyol
 
Constructors in C++
Constructors in C++
RubaNagarajan
 
Dependency injection
Dependency injection
Marc Morera
 
JavaScript Inheritance
JavaScript Inheritance
Jussi Pohjolainen
 
RubyistのためのObjective-C入門
RubyistのためのObjective-C入門
S Akai
 
JavaScript: The prototype Property
JavaScript: The prototype Property
Guillermo Paz
 
JavaScript Prototype and Module Pattern
JavaScript Prototype and Module Pattern
Narendra Sisodiya
 
Javascript Prototype Visualized
Javascript Prototype Visualized
军 沈
 
.Net Fundamentals
.Net Fundamentals
Sunny Sharma
 
Node.js and express
Node.js and express
Sunny Sharma
 
Html5 Offline Applications
Html5 Offline Applications
Sunny Sharma
 
Typescript Fundamentals
Typescript Fundamentals
Sunny Sharma
 
Inversion of Control in MVC
Inversion of Control in MVC
Sunny Sharma
 
Real Time Data Visualization using asp.net / SignalR + D3.js
Real Time Data Visualization using asp.net / SignalR + D3.js
Sunny Sharma
 
Oo java script class construction
Oo java script class construction
Ken Collins
 
New ES6 Hotness
New ES6 Hotness
Pawel Szymczykowski
 
2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance
pedro.carvalho
 
Javascript foundations: Inheritance
Javascript foundations: Inheritance
John Hunter
 
JavaScript Inheritence
JavaScript Inheritence
Pawel Szymczykowski
 
Basic inheritance in JavaScript
Basic inheritance in JavaScript
Brian Moschel
 
03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery
Danae Aguilar Guzmán
 
JavaScript and Internet Controlled Hardware Prototyping
JavaScript and Internet Controlled Hardware Prototyping
Jonathan LeBlanc
 
Advanced JavaScript
Advanced JavaScript
Stoyan Stefanov
 
CSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle Approach
Julie Kuehl
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
Chamnap Chhorn
 
JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
WebStackAcademy
 
Ajaxworld
Ajaxworld
deannalagason
 

More Related Content

Viewers also liked (20)

JavaScript: The prototype Property
JavaScript: The prototype Property
Guillermo Paz
 
JavaScript Prototype and Module Pattern
JavaScript Prototype and Module Pattern
Narendra Sisodiya
 
Javascript Prototype Visualized
Javascript Prototype Visualized
军 沈
 
.Net Fundamentals
.Net Fundamentals
Sunny Sharma
 
Node.js and express
Node.js and express
Sunny Sharma
 
Html5 Offline Applications
Html5 Offline Applications
Sunny Sharma
 
Typescript Fundamentals
Typescript Fundamentals
Sunny Sharma
 
Inversion of Control in MVC
Inversion of Control in MVC
Sunny Sharma
 
Real Time Data Visualization using asp.net / SignalR + D3.js
Real Time Data Visualization using asp.net / SignalR + D3.js
Sunny Sharma
 
Oo java script class construction
Oo java script class construction
Ken Collins
 
New ES6 Hotness
New ES6 Hotness
Pawel Szymczykowski
 
2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance
pedro.carvalho
 
Javascript foundations: Inheritance
Javascript foundations: Inheritance
John Hunter
 
JavaScript Inheritence
JavaScript Inheritence
Pawel Szymczykowski
 
Basic inheritance in JavaScript
Basic inheritance in JavaScript
Brian Moschel
 
03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery
Danae Aguilar Guzmán
 
JavaScript and Internet Controlled Hardware Prototyping
JavaScript and Internet Controlled Hardware Prototyping
Jonathan LeBlanc
 
Advanced JavaScript
Advanced JavaScript
Stoyan Stefanov
 
CSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle Approach
Julie Kuehl
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
Chamnap Chhorn
 
JavaScript: The prototype Property
JavaScript: The prototype Property
Guillermo Paz
 
JavaScript Prototype and Module Pattern
JavaScript Prototype and Module Pattern
Narendra Sisodiya
 
Javascript Prototype Visualized
Javascript Prototype Visualized
军 沈
 
Node.js and express
Node.js and express
Sunny Sharma
 
Html5 Offline Applications
Html5 Offline Applications
Sunny Sharma
 
Typescript Fundamentals
Typescript Fundamentals
Sunny Sharma
 
Inversion of Control in MVC
Inversion of Control in MVC
Sunny Sharma
 
Real Time Data Visualization using asp.net / SignalR + D3.js
Real Time Data Visualization using asp.net / SignalR + D3.js
Sunny Sharma
 
Oo java script class construction
Oo java script class construction
Ken Collins
 
2012 oct-12 - java script inheritance
2012 oct-12 - java script inheritance
pedro.carvalho
 
Javascript foundations: Inheritance
Javascript foundations: Inheritance
John Hunter
 
Basic inheritance in JavaScript
Basic inheritance in JavaScript
Brian Moschel
 
03. Introduccion a JavaScript y JQuery
03. Introduccion a JavaScript y JQuery
Danae Aguilar Guzmán
 
JavaScript and Internet Controlled Hardware Prototyping
JavaScript and Internet Controlled Hardware Prototyping
Jonathan LeBlanc
 
CSS Sanity with Sass: The Inverted Triangle Approach
CSS Sanity with Sass: The Inverted Triangle Approach
Julie Kuehl
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
Chamnap Chhorn
 

Similar to Prototype & Inheritance in JavaScript (20)

JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
WebStackAcademy
 
Ajaxworld
Ajaxworld
deannalagason
 
Javascript patterns
Javascript patterns
thinkphp
 
JavaScript Patterns
JavaScript Patterns
Stoyan Stefanov
 
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
추근 문
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
Quinton Sheppard
 
Lecture 4- Javascript Function presentation
Lecture 4- Javascript Function presentation
GomathiUdai
 
Object oriented programming in JavaScript
Object oriented programming in JavaScript
Aditya Majety
 
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG June
Deepu S Nath
 
JS OO and Closures
JS OO and Closures
Jussi Pohjolainen
 
JavaScript Object Oriented Programming Cheat Sheet
JavaScript Object Oriented Programming Cheat Sheet
HDR1001
 
Object-Oriented Programming with PHP (part 1)
Object-Oriented Programming with PHP (part 1)
Bozhidar Boshnakov
 
A Deeper look into Javascript Basics
A Deeper look into Javascript Basics
Mindfire Solutions
 
Advanced JavaScript
Advanced JavaScript
Nascenia IT
 
Object Oriented JavaScript - II
Object Oriented JavaScript - II
TO THE NEW | Technology
 
Week 06 Modular Javascript_Brandon, S. H. Wu
Week 06 Modular Javascript_Brandon, S. H. Wu
AppUniverz Org
 
Object oriented java script
Object oriented java script
vivek p s
 
Advanced Javascript
Advanced Javascript
Adieu
 
Advanced Javascript
Advanced Javascript
Manikanda kumar
 
Advanced Javascript
Advanced Javascript
relay12
 
JavaScript - Chapter 8 - Objects
JavaScript - Chapter 8 - Objects
WebStackAcademy
 
Javascript patterns
Javascript patterns
thinkphp
 
Backbone.js Simple Tutorial
Backbone.js Simple Tutorial
추근 문
 
Awesomeness of JavaScript…almost
Awesomeness of JavaScript…almost
Quinton Sheppard
 
Lecture 4- Javascript Function presentation
Lecture 4- Javascript Function presentation
GomathiUdai
 
Object oriented programming in JavaScript
Object oriented programming in JavaScript
Aditya Majety
 
Understanding Object Oriented Javascript - Coffee@DBG June
Understanding Object Oriented Javascript - Coffee@DBG June
Deepu S Nath
 
JavaScript Object Oriented Programming Cheat Sheet
JavaScript Object Oriented Programming Cheat Sheet
HDR1001
 
Object-Oriented Programming with PHP (part 1)
Object-Oriented Programming with PHP (part 1)
Bozhidar Boshnakov
 
A Deeper look into Javascript Basics
A Deeper look into Javascript Basics
Mindfire Solutions
 
Advanced JavaScript
Advanced JavaScript
Nascenia IT
 
Week 06 Modular Javascript_Brandon, S. H. Wu
Week 06 Modular Javascript_Brandon, S. H. Wu
AppUniverz Org
 
Object oriented java script
Object oriented java script
vivek p s
 
Advanced Javascript
Advanced Javascript
Adieu
 
Advanced Javascript
Advanced Javascript
relay12
 
Ad

More from Sunny Sharma (8)

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

Recently uploaded (20)

Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
Precisely
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Seminar: New Data: Passkey Adoption in the Workforce.pptx
FIDO Alliance
 
Supporting the NextGen 911 Digital Transformation with FME
Supporting the NextGen 911 Digital Transformation with FME
Safe Software
 
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Reducing Conflicts and Increasing Safety Along the Cycling Networks of East-F...
Safe Software
 
Providing an OGC API Processes REST Interface for FME Flow
Providing an OGC API Processes REST Interface for FME Flow
Safe Software
 
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
SAP Modernization Strategies for a Successful S/4HANA Journey.pdf
Precisely
 
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
FME for Good: Integrating Multiple Data Sources with APIs to Support Local Ch...
Safe Software
 
Edge-banding-machines-edgeteq-s-200-en-.pdf
Edge-banding-machines-edgeteq-s-200-en-.pdf
AmirStern2
 
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
“From Enterprise to Makers: Driving Vision AI Innovation at the Extreme Edge,...
Edge AI and Vision Alliance
 
OWASP Barcelona 2025 Threat Model Library
OWASP Barcelona 2025 Threat Model Library
PetraVukmirovic
 
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
ENERGY CONSUMPTION CALCULATION IN ENERGY-EFFICIENT AIR CONDITIONER.pdf
Muhammad Rizwan Akram
 
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
Tech-ASan: Two-stage check for Address Sanitizer - Yixuan Cao.pdf
caoyixuan2019
 
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Seminar: Targeting Trust: The Future of Identity in the Workforce.pptx
FIDO Alliance
 
June Patch Tuesday
June Patch Tuesday
Ivanti
 
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
FME for Distribution & Transmission Integrity Management Program (DIMP & TIMP)
Safe Software
 
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
AudGram Review: Build Visually Appealing, AI-Enhanced Audiograms to Engage Yo...
SOFTTECHHUB
 
High Availability On-Premises FME Flow.pdf
High Availability On-Premises FME Flow.pdf
Safe Software
 
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik - Passionate Tech Enthusiast
Raman Bhaumik
 
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Floods in Valencia: Two FME-Powered Stories of Data Resilience
Safe Software
 
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
Can We Use Rust to Develop Extensions for PostgreSQL? (POSETTE: An Event for ...
NTT DATA Technology & Innovation
 

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"
  • 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