SlideShare a Scribd company logo
1 of 11
JAVASCRIPT PROTOTYPE OBJECT
JAVASCRIPT PROTOTYPE OBJECT
JavaScript is a prototype-based language that facilitates
the objects to acquire properties and features from one
another. Here, each object contains a prototype object.
In JavaScript, whenever a function is created the prototype
property is added to that function automatically. This
property is a prototype object that holds a constructor
property.
JAVASCRIPT PROTOTYPE OBJECT
Syntax:
ClassName.prototype.methodName
What is the requirement of a
prototype object?
Whenever an object is created in JavaScript, its
corresponding functions are loaded into memory. So, a
new copy of the function is created on each object
creation.
In a prototype-based approach, all the objects share the
same function. This ignores the requirement of creating a
new copy of function for each object. Thus, the functions
are loaded once into the memory.
JAVASCRIPT PROTOTYPE OBJECT
Prototype Chaining
In JavaScript, each object contains a prototype object that
acquires properties and methods from it. Again an object's
prototype object may contain a prototype object that also
acquires properties and methods, and so on. It can be
seen as prototype chaining.
JavaScript Prototype Object Example
2
Let's see an example to add a new
method to the constructor function.
<!DOCTYPE html>
<html>
<body>
<script>
function Employee(firstName,lastName)
{
this.firstName=firstName;
this.lastName=lastName;
}
Employee.prototype.company="Javatpoint"
var employee1=new Employee("Martin","Roy");
var employee2=new Employee("Duke",
"William");
document.writeln(employee1.firstName+"
"+employee1.lastName+"
"+employee1.company+"<br>");
document.writeln(employee2.firstName+"
"+employee2.lastName+" "+employee2.company);
</script>
</body>
</html>
JavaScript Constructor Method
A JavaScript constructor
method is a special type of
method which is used to
initialize and create an
object. It is called when
memory is allocated for an
object.
Points to remember:
o The constructor
keyword is used
to declare a
constructor
method.
o The class can
contain one
constructor
method only.
o JavaScript allows
us to use parent
class constructor
through super
keyword.
Constructor Method Example
Let's see a simple example of a constructor
method.
<!DOCTYPE html>
<html>
<body>
<script>
class Employee {
constructor() {
this.id=101;
this.name = "Martin Roy";
}
}
var emp = new Employee();
document.writeln(emp.id+" "+emp.name);
</script>
</body>
</html>
Constructor Method Example: super keyword
The super keyword is used to call the parent class
constructor. Let's see an example.
<!DOCTYPE html>
<html>
<body>
<script>
class CompanyName
{
constructor()
{
this.company="trizymartzy";
}
}
class Employee extends CompanyName {
constructor(id,name) {
super();
this.id=id;
this.name=name;
}
}
var emp = new Employee(1,"John");
document.writeln(emp.id+" "+emp.name+"
"+emp.company);
</script>
</body>
</html>
What have you learned?
Activity 01: Perform the
codes for:
1.Prototype object;
2.Constructor method;and
3. Super keyword
Activity 1: Rubrics
Points Description
10 The student successfully executes the program without guidance or supervision.
9 The student successfully executes the program with very little supervision and
guidance.
8 The student successfully executes the program with moderate supervision andguidance.
7 The student was not able to execute the program but shows eagerness to accomplishthe
activity.
5 The student was not able to execute the program due to lack of interest in the activity.
Thank You!

More Related Content

Similar to Prototype Object.pptx

Javascript Prototypal Inheritance - Big Picture
Javascript Prototypal Inheritance - Big PictureJavascript Prototypal Inheritance - Big Picture
Javascript Prototypal Inheritance - Big PictureManish Jangir
 
Object Oriented Javascript part2
Object Oriented Javascript part2Object Oriented Javascript part2
Object Oriented Javascript part2Usman Mehmood
 
QTP Descriptive programming Tutorial
QTP Descriptive programming TutorialQTP Descriptive programming Tutorial
QTP Descriptive programming TutorialJim Orlando
 
OOPS IN PHP.pptx
OOPS IN PHP.pptxOOPS IN PHP.pptx
OOPS IN PHP.pptxrani marri
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptForziatech
 
Basic Oops concept of PHP
Basic Oops concept of PHPBasic Oops concept of PHP
Basic Oops concept of PHPRohan Sharma
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingHoat Le
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayJavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayChamnap Chhorn
 
Object oriented programming in java
Object oriented programming in javaObject oriented programming in java
Object oriented programming in javaElizabeth alexander
 
Jquery Plugin
Jquery PluginJquery Plugin
Jquery PluginRavi Mone
 
Synapseindia object oriented programming in php
Synapseindia object oriented programming in phpSynapseindia object oriented programming in php
Synapseindia object oriented programming in phpSynapseindiappsdevelopment
 
JavaScript Coding with Class
JavaScript Coding with ClassJavaScript Coding with Class
JavaScript Coding with Classdavidwalsh83
 
Beginners Guide to Object Orientation in PHP
Beginners Guide to Object Orientation in PHPBeginners Guide to Object Orientation in PHP
Beginners Guide to Object Orientation in PHPRick Ogden
 

Similar to Prototype Object.pptx (20)

Javascript Prototypal Inheritance - Big Picture
Javascript Prototypal Inheritance - Big PictureJavascript Prototypal Inheritance - Big Picture
Javascript Prototypal Inheritance - Big Picture
 
Object Oriented Javascript part2
Object Oriented Javascript part2Object Oriented Javascript part2
Object Oriented Javascript part2
 
Java scriptforjavadev part2a
Java scriptforjavadev part2aJava scriptforjavadev part2a
Java scriptforjavadev part2a
 
QTP Descriptive programming Tutorial
QTP Descriptive programming TutorialQTP Descriptive programming Tutorial
QTP Descriptive programming Tutorial
 
Oops in PHP
Oops in PHPOops in PHP
Oops in PHP
 
OOPS IN PHP.pptx
OOPS IN PHP.pptxOOPS IN PHP.pptx
OOPS IN PHP.pptx
 
Object Oriented Programming In JavaScript
Object Oriented Programming In JavaScriptObject Oriented Programming In JavaScript
Object Oriented Programming In JavaScript
 
Introduction Php
Introduction PhpIntroduction Php
Introduction Php
 
Oops in php
Oops in phpOops in php
Oops in php
 
Basic Oops concept of PHP
Basic Oops concept of PHPBasic Oops concept of PHP
Basic Oops concept of PHP
 
eXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction TrainingeXo SEA - JavaScript Introduction Training
eXo SEA - JavaScript Introduction Training
 
JavaScript in Object-Oriented Way
JavaScript in Object-Oriented WayJavaScript in Object-Oriented Way
JavaScript in Object-Oriented Way
 
Object oriented programming in java
Object oriented programming in javaObject oriented programming in java
Object oriented programming in java
 
Jquery Plugin
Jquery PluginJquery Plugin
Jquery Plugin
 
ClassJS
ClassJSClassJS
ClassJS
 
Synapseindia object oriented programming in php
Synapseindia object oriented programming in phpSynapseindia object oriented programming in php
Synapseindia object oriented programming in php
 
JavaScript Coding with Class
JavaScript Coding with ClassJavaScript Coding with Class
JavaScript Coding with Class
 
Javascript
JavascriptJavascript
Javascript
 
Beginners Guide to Object Orientation in PHP
Beginners Guide to Object Orientation in PHPBeginners Guide to Object Orientation in PHP
Beginners Guide to Object Orientation in PHP
 
oop 3.pptx
oop 3.pptxoop 3.pptx
oop 3.pptx
 

More from Steins18

creating html using notepad-learning material
creating html using notepad-learning materialcreating html using notepad-learning material
creating html using notepad-learning materialSteins18
 
Visual BAsic Softwares intended for ICT students
Visual BAsic Softwares intended for ICT studentsVisual BAsic Softwares intended for ICT students
Visual BAsic Softwares intended for ICT studentsSteins18
 
Cookie Attribute.pptx
Cookie Attribute.pptxCookie Attribute.pptx
Cookie Attribute.pptxSteins18
 
Defining method in JavaScript object.pptx
Defining method in JavaScript object.pptxDefining method in JavaScript object.pptx
Defining method in JavaScript object.pptxSteins18
 
HTML Attributes.pptx
HTML Attributes.pptxHTML Attributes.pptx
HTML Attributes.pptxSteins18
 
JavaScript number object.pptx
JavaScript number object.pptxJavaScript number object.pptx
JavaScript number object.pptxSteins18
 

More from Steins18 (6)

creating html using notepad-learning material
creating html using notepad-learning materialcreating html using notepad-learning material
creating html using notepad-learning material
 
Visual BAsic Softwares intended for ICT students
Visual BAsic Softwares intended for ICT studentsVisual BAsic Softwares intended for ICT students
Visual BAsic Softwares intended for ICT students
 
Cookie Attribute.pptx
Cookie Attribute.pptxCookie Attribute.pptx
Cookie Attribute.pptx
 
Defining method in JavaScript object.pptx
Defining method in JavaScript object.pptxDefining method in JavaScript object.pptx
Defining method in JavaScript object.pptx
 
HTML Attributes.pptx
HTML Attributes.pptxHTML Attributes.pptx
HTML Attributes.pptx
 
JavaScript number object.pptx
JavaScript number object.pptxJavaScript number object.pptx
JavaScript number object.pptx
 

Recently uploaded

POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxSayali Powar
 
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...jaredbarbolino94
 
CELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxCELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxJiesonDelaCerna
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTiammrhaywood
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitolTechU
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxthorishapillay1
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)eniolaolutunde
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentInMediaRes1
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxEyham Joco
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Meghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media ComponentMeghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media ComponentInMediaRes1
 
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,Virag Sontakke
 
internship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerinternship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerunnathinaik
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Celine George
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxAvyJaneVismanos
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for BeginnersSabitha Banu
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxOH TEIK BIN
 

Recently uploaded (20)

POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptxPOINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
POINT- BIOCHEMISTRY SEM 2 ENZYMES UNIT 5.pptx
 
Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...Historical philosophical, theoretical, and legal foundations of special and i...
Historical philosophical, theoretical, and legal foundations of special and i...
 
OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...OS-operating systems- ch04 (Threads) ...
OS-operating systems- ch04 (Threads) ...
 
CELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptxCELL CYCLE Division Science 8 quarter IV.pptx
CELL CYCLE Division Science 8 quarter IV.pptx
 
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPTECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
ECONOMIC CONTEXT - LONG FORM TV DRAMA - PPT
 
Capitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptxCapitol Tech U Doctoral Presentation - April 2024.pptx
Capitol Tech U Doctoral Presentation - April 2024.pptx
 
ESSENTIAL of (CS/IT/IS) class 06 (database)
ESSENTIAL of (CS/IT/IS) class 06 (database)ESSENTIAL of (CS/IT/IS) class 06 (database)
ESSENTIAL of (CS/IT/IS) class 06 (database)
 
Proudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptxProudly South Africa powerpoint Thorisha.pptx
Proudly South Africa powerpoint Thorisha.pptx
 
Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)Software Engineering Methodologies (overview)
Software Engineering Methodologies (overview)
 
Alper Gobel In Media Res Media Component
Alper Gobel In Media Res Media ComponentAlper Gobel In Media Res Media Component
Alper Gobel In Media Res Media Component
 
Types of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptxTypes of Journalistic Writing Grade 8.pptx
Types of Journalistic Writing Grade 8.pptx
 
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Kamla Market (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
 
9953330565 Low Rate Call Girls In Rohini Delhi NCR
9953330565 Low Rate Call Girls In Rohini  Delhi NCR9953330565 Low Rate Call Girls In Rohini  Delhi NCR
9953330565 Low Rate Call Girls In Rohini Delhi NCR
 
Meghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media ComponentMeghan Sutherland In Media Res Media Component
Meghan Sutherland In Media Res Media Component
 
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,भारत-रोम व्यापार.pptx, Indo-Roman Trade,
भारत-रोम व्यापार.pptx, Indo-Roman Trade,
 
internship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developerinternship ppt on smartinternz platform as salesforce developer
internship ppt on smartinternz platform as salesforce developer
 
Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17Computed Fields and api Depends in the Odoo 17
Computed Fields and api Depends in the Odoo 17
 
Final demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptxFinal demo Grade 9 for demo Plan dessert.pptx
Final demo Grade 9 for demo Plan dessert.pptx
 
Full Stack Web Development Course for Beginners
Full Stack Web Development Course  for BeginnersFull Stack Web Development Course  for Beginners
Full Stack Web Development Course for Beginners
 
Solving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptxSolving Puzzles Benefits Everyone (English).pptx
Solving Puzzles Benefits Everyone (English).pptx
 

Prototype Object.pptx

  • 2. JAVASCRIPT PROTOTYPE OBJECT JavaScript is a prototype-based language that facilitates the objects to acquire properties and features from one another. Here, each object contains a prototype object. In JavaScript, whenever a function is created the prototype property is added to that function automatically. This property is a prototype object that holds a constructor property.
  • 3. JAVASCRIPT PROTOTYPE OBJECT Syntax: ClassName.prototype.methodName What is the requirement of a prototype object? Whenever an object is created in JavaScript, its corresponding functions are loaded into memory. So, a new copy of the function is created on each object creation. In a prototype-based approach, all the objects share the same function. This ignores the requirement of creating a new copy of function for each object. Thus, the functions are loaded once into the memory.
  • 4. JAVASCRIPT PROTOTYPE OBJECT Prototype Chaining In JavaScript, each object contains a prototype object that acquires properties and methods from it. Again an object's prototype object may contain a prototype object that also acquires properties and methods, and so on. It can be seen as prototype chaining.
  • 5. JavaScript Prototype Object Example 2 Let's see an example to add a new method to the constructor function. <!DOCTYPE html> <html> <body> <script> function Employee(firstName,lastName) { this.firstName=firstName; this.lastName=lastName; } Employee.prototype.company="Javatpoint" var employee1=new Employee("Martin","Roy"); var employee2=new Employee("Duke", "William"); document.writeln(employee1.firstName+" "+employee1.lastName+" "+employee1.company+"<br>"); document.writeln(employee2.firstName+" "+employee2.lastName+" "+employee2.company); </script> </body> </html>
  • 6. JavaScript Constructor Method A JavaScript constructor method is a special type of method which is used to initialize and create an object. It is called when memory is allocated for an object. Points to remember: o The constructor keyword is used to declare a constructor method. o The class can contain one constructor method only. o JavaScript allows us to use parent class constructor through super keyword.
  • 7. Constructor Method Example Let's see a simple example of a constructor method. <!DOCTYPE html> <html> <body> <script> class Employee { constructor() { this.id=101; this.name = "Martin Roy"; } } var emp = new Employee(); document.writeln(emp.id+" "+emp.name); </script> </body> </html>
  • 8. Constructor Method Example: super keyword The super keyword is used to call the parent class constructor. Let's see an example. <!DOCTYPE html> <html> <body> <script> class CompanyName { constructor() { this.company="trizymartzy"; } } class Employee extends CompanyName { constructor(id,name) { super(); this.id=id; this.name=name; } } var emp = new Employee(1,"John"); document.writeln(emp.id+" "+emp.name+" "+emp.company); </script> </body> </html>
  • 9. What have you learned?
  • 10. Activity 01: Perform the codes for: 1.Prototype object; 2.Constructor method;and 3. Super keyword Activity 1: Rubrics Points Description 10 The student successfully executes the program without guidance or supervision. 9 The student successfully executes the program with very little supervision and guidance. 8 The student successfully executes the program with moderate supervision andguidance. 7 The student was not able to execute the program but shows eagerness to accomplishthe activity. 5 The student was not able to execute the program due to lack of interest in the activity.