
- Javascript Basics Tutorial
- Javascript - Home
- Javascript - Overview
- Javascript - Syntax
- Javascript - Enabling
- Javascript - Placement
- Javascript - Variables
- Javascript - Operators
- Javascript - If...Else
- Javascript - Switch Case
- Javascript - While Loop
- Javascript - For Loop
- Javascript - For...in
- Javascript - Loop Control
- Javascript - Functions
- Javascript - Events
- Javascript - Cookies
- Javascript - Page Redirect
- Javascript - Dialog Boxes
- Javascript - Void Keyword
- Javascript - Page Printing
- JavaScript Objects
- Javascript - Objects
- Javascript - Number
- Javascript - Boolean
- Javascript - Strings
- Javascript - Arrays
- Javascript - Date
- Javascript - Math
- Javascript - RegExp
- Javascript - HTML DOM
- JavaScript Advanced
- Javascript - Error Handling
- Javascript - Validations
- Javascript - Animation
- Javascript - Multimedia
- Javascript - Debugging
- Javascript - Image Map
- Javascript - Browsers
- JavaScript Useful Resources
- Javascript - Questions And Answers
- Javascript - Quick Guide
- Javascript - Functions
- Javascript - Resources
Function prototypes in JavaScript
Functions created in JavaScript always have the prototype property added by the JavaScript engine to them. The prototype property is an object which contains the constructor property by default. The function protoype can be accessed by −
functionName.prototype
When objects are creating using the function constructor, this prototype property can be used to share methods or properties between the objects created by that function constructor.
Following is the code for function prototypes in JavaScript −
Example
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .result { font-size: 20px; font-weight: 500; color: blueviolet; } </style> </head> <body> <h1>Function prototypes in JavaScript</h1> <div class="result"></div> <br /> <button class="Btn">Click Here</button> <h3>Click on the above button to call the welcome method of person1 and person2 object</h3> <script> let resEle = document.querySelector(".result"); let BtnEle = document.querySelector(".Btn"); function personConstructor(fName, lName) { this.fName = fName; this.lName = lName; } personConstructor.prototype.welcome = function () { return "Welcome " + this.fName + " " + this.lName; }; let person1 = new personConstructor("Rohan", "Sharma"); let person2 = new personConstructor("Shawn", "Smith"); BtnEle.addEventListener("click", () => { resEle.innerHTML = "person1.welcome() = " + person1.welcome() + "<br>"; resEle.innerHTML += "person2.welcome() = " + person2.welcome() + "<br>"; }); </script> </body> </html>
Output
On clicking the ‘Click Here’ button −
- Related Articles
- Modifying prototypes in JavaScript
- Explain Native Prototypes in JavaScript.
- Adding methods to Javascript Prototypes
- Can we modify built-in object prototypes in JavaScript
- Function returning another function in JavaScript
- Function Expression vs Function Declaration in JavaScript?
- ArrayBuffer.isView() function in JavaScript
- ArrayBuffer.slice() function in JavaScript
- Atomics.add() function in JavaScript
- Atomics.and() function in JavaScript
- Atomics.or() function in JavaScript
- Atomics.isLockFree() function in JavaScript
- Atomics.load() function in JavaScript
- Atomics.store() function in JavaScript
- Atomics.sub() function in JavaScript

Advertisements