- Javascript: Adding Methods to Objects
- Amazon Ad Analytics For Humans
- How to add a method to a JavaScript object?
- Syntax
- Example 1
- To add a method to a JavaScript object.
- Example 2
- To add a method to a JavaScript object.
- Example 3
- To add a method to a JavaScript object.
- How to Add Methods to an Object in JavaScript for HTML5 and CSS3 Programming
- About This Article
- This article is from the book:
- About the book author:
- JavaScript Object Methods
- Note
- See Also:
- JavaScript Methods
- Accessing Object Methods
- Example
Javascript: Adding Methods to Objects
We can add functions to objects, as properties, and when that is done they are referred to as methods.
// We will create an object called someObject and a property of that object // will be a function called "add". The "add" function is now a METHOD. var someObject = name: "Nick Coughlin", height: "5'11\"", hair: "brown", age: 30, isCool: true, pets: ["max", "jewel", "bailey", "lola"], add: function(x,y) return x + y; > > //to call the function we now must call it as a property of the object someObject someObject.add(10,140) //150
So why would we want to add methods to objects? Why not just keep our functions separate?
// adding methods to objects becomes useful for organizing functions that are similar, // so that we can avoid namespace collisions. var dog = name: "lola", age: 5, sound: function() return("woof woof"); > > var cat = name: "Mr. Puff", age: 8, sound: function() return("meow meow"); > >
And if we run that in the console we get:
and an alternate way to add functions to objects is like this:
// we create an empty object named comments var comments = > // and then we add methods to the object comments.add = function(x,y) return x + y; > comments.subtract = function(x,y) return x - y; >
and we can see that that works in the console and returns the expected values:
// The "this" keyword is used inside of a method to refer to the object that it is contained inside of // It is a way of sharing data inside of an object // Lets take a simple array of comments inside of an object var article = >; article.comments = ["great article", "I hate your face", "I find this content offensive"]; // and now let us write a function that prints the comments article.printComments = function() this.comments.forEach(function(el) //el is short for element console.log(el); >); > // so we just added a function to the object "article" called printComments that // references the object that it's inside of (articles) and then the array inside // that it wants to loop over (comments)
and that gives us the following result:
Amazon Ad Analytics For Humans
Advertising reports automatically saved and displayed beautifully for powerful insights.
How to add a method to a JavaScript object?
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)<>
- 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.
To add a method to a JavaScript object.
On executing the above code, the below output is generated.
Example 2
This is an example program to add a method to JavaScript object.
To add a method to a JavaScript object.
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.
To add a method to a JavaScript object.
On executing the above code, the below output is generated.
How to Add Methods to an Object in JavaScript for HTML5 and CSS3 Programming
Objects in JavaScript have other characteristics besides properties. They can also have methods. A method is simply a function attached to an object. To see what this means, take a look at this example:
//create the critter //from addingMethods.html var critter = new Object(); //add some properties critter.name = "Milo"; critter.age = 5; //create a method critter.talk = function() < msg = "Hi! my name is " + this.name; msg += " and I’m " + this.age; alert(msg); >// end method // call the talk method critter.talk();
In addition to properties, the new critter has a talk() method. If a property describes a characteristic of an object, a method describes something the object can do.
- Build an object with whatever properties you need. Begin by building an object and giving it some properties.
- Define a method much like a property. In fact, methods are properties in JavaScript, but don’t worry too much about that; it’ll make your head explode.
- You can assign a prebuilt function to a method. If you created a function that you want to use as a method, you can simply assign it.
- You can also create an anonymous function. More often, you’ll want to create your method right there as you define the object. You can create a function immediately with the function() < syntax.
- The this keyword refers to the current object. Inside the function, you may want to access the properties of the object. this.name refers to the name property of the current object.
- You can then refer to the method directly. After you define an object with a method, you can invoke it. For example, if the critter object has a talk method, use critter.talk() to invoke this method.
About This Article
This article is from the book:
About the book author:
Andy Harris taught himself programming because it was fun. Today he teaches computer science, game development, and web programming at the university level; is a technology consultant for the state of Indiana; has helped people with disabilities to form their own web development companies; and works with families who wish to teach computing at home.
JavaScript Object Methods
In JavaScript, the this keyword refers to an object.
Which object depends on how this is being invoked (used or called).
The this keyword refers to different objects depending on how it is used:
In an object method, this refers to the object. |
Alone, this refers to the global object. |
In a function, this refers to the global object. |
In a function, in strict mode, this is undefined . |
In an event, this refers to the element that received the event. |
Methods like call() , apply() , and bind() can refer this to any object. |
Note
See Also:
JavaScript Methods
JavaScript methods are actions that can be performed on objects.
A JavaScript method is a property containing a function definition.
Property | Value |
---|---|
firstName | John |
lastName | Doe |
age | 50 |
eyeColor | blue |
fullName | function() |
Methods are functions stored as object properties.
Accessing Object Methods
You access an object method with the following syntax:
You will typically describe fullName() as a method of the person object, and fullName as a property.
The fullName property will execute (as a function) when it is invoked with ().
This example accesses the fullName() method of a person object:
Example
If you access the fullName property, without (), it will return the function definition: