Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add a method to a JavaScript object?
In this article, we’ll go over how to add a method to a JavaScript object in JavaScript with appropriate examples.
A JavaScript object is an entity which has properties. A property can be a variable or a method which define state and behavior of the object. A method is a property of an object that adds behavior to an object.
We can add a method to a JavaScript object using object prototype. All JavaScript objects get their attributes and methods from a prototype.
Let’s understand this concept better with the help of examples further in this article.
Syntax
The syntax to add a method to the JavaScript object using Object Prototype is −
functionName.prototype.newMethodName = function(){}
or
functionName.prototype.newMethodName = function(param1,param2,..paramN){}
Where,
functionName is the existing function name
newMethodName is the method name to be added.
param1, param2..paramN are the parameters that are to be passed to the new method.
Example 1
This is an example program to add a method to an object by extending the behavior of Calculator function prototype with add.
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To add a method to a JavaScript object.</title>
</head>
<body style="text-align : center">
<h3>To add a method to a JavaScript object.</h3>
<p id="method-to-obj"></p>
<script>
function Calculator(){
Calculator.prototype.add = function (a,b){
var result = a+b;
document.getElementById('method-to-obj').innerHTML='The sum of two numbers is : '+result;
}
}
var calc = new Calculator();
calc.add(10,20);
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 2
This is an example program to add a method to JavaScript object.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To add a method to a JavaScript object.</title>
</head>
<body style="text-align : center">
<h3>To add a method to a JavaScript object.</h3>
<p id="method-to-obj"></p>
<script>
function Car(name, model, year, color) {
this.Name = name;
this.Model = model;
this.Year = year;
this.Color = color;
}
var car1 = new Car("Maruti", "Vitara Brezza", "2016", "Red");
car1.prop = function() {
return ""+this.Name+" has launched in the year "+this.Year;
}
document.getElementById("method-to-obj").innerHTML = car1.prop();
</script>
</body>
</html>
On executing the above code, the below output is generated.
Example 3
This is an example program to create a function which returns an object. In this example, a .mul is created as a property of the object. Each of the new object created has a .mul function created for them. In this example, method is a parameter to the function.
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To add a method to a JavaScript object.</title>
</head>
<body style="text-align : center">
<h3>To add a method to a JavaScript object.</h3>
<p id="method-to-obj"></p>
<script>
function ReturnCalculatorObject() {
var a, b,
multiplication = function (a, b) {
var result = a * b;
document.getElementById('method-to-obj').innerHTML = 'The Product of two numbers is : ' + result;
},
object1 = {
mul: multiplication
};
return object1;
}
var calc = new ReturnCalculatorObject();
calc.mul(20, 30);
</script>
</body>
</html>
On executing the above code, the below output is generated.
5K+ Views
